1. 图片随鼠标运动
<img src="图片路径" alt="" id="im">
<script src="common.js"></script>
<script>
//文档的鼠标移动事件
//对象 事件 事件处理函数,事件触发了,函数的代码就会执行,执行的时候,函数调用的时候
//通过arguments.length，可以得出:事件处理函数中实际上是有一个参数的,这个参数和事件有关系,是一个对象----->事件参数对象
//谷歌和火狐中都有这个事件参数对象,IE8中没有
//事件参数对象:e----在IE8中用window.event来代替
// document.onmousemove=function (e) {
// //console.log(arguments[0]);
// //console.log(e);
// };
// document.onmousemove=function (e) {
// //document.title=e.clientX+"===>"+e.clientY;
// my$("im").style.left=e.clientX+"px";
// my$("im").style.top=e.clientY+"px";
// };
// document.onmousemove=function () {
// //document.title=e.clientX+"===>"+e.clientY;
// my$("im").style.left=window.event.clientX+"px";
// my$("im").style.top=window.event.clientY+"px";
// };
// document.onmousemove = function (e) {
// e = window.event || e;
// //可视区域的横坐标
// //可视区域的纵坐标
// my$("im").style.left = e.clientX + "px";
// my$("im").style.top = e.clientY + "px";
// };
document.onmousemove = function (e) {
//相对于页面顶部的坐标
// my$("im").style.left = e.pageX + "px";
// my$("im").style.top = e.pageY + "px";
//pageX和pageY在谷歌和火狐可以使用,IE8不能用
// my$("im").style.left = window.event.pageX + "px";
// my$("im").style.top = window.event.pageY + "px";
};
</script>
2. 轮播图
/*
*
* 轮播图自己的说的要一遍的，写思路
* 定时器:两个
* setInterval(函数,时间);//定时器,隔一段时间就执行一次函数的代码
*clearInterval(定时器的id);
*setTimeout(函数,时间);//定时器,只执行一次函数的代码-----一次性的定时器
*clearTimeout(定时器的id);//
* 动画函数:
*
* offset系列:获取元素的相关的样式属性的值
* offsetWidth:获取元素的宽
* offsetHeight:获取元素的高
* offsetLeft:获取元素距离左边位置的值
* offsetTop:获取元素距离上面位置的值
*
*
* 完整轮播图:
* 1. 根据ul中li个数(图片的个数)动态的创建li,并且加入到ol中,作为小按钮来使用
* 为每个ol中的li添加鼠标进入的事件,(添加事件之前,先把索引保存在每个li的自定义属性中),鼠标进入li的时候做排他功能(背景颜色),移动图片(图片整体移动,移动的ul,每次移动的是一个图片的宽度,图片的宽度就是向宽的宽度),调用的是动画函数,移动ul,移动的是索引值*图片的宽度,并且把索引值存储在一个全局变量中,pic
* 2. 创建li之后,1---设置ol中第一个li有默认的背景颜色,2---把ul中的第一个li克隆一下(无缝连接的效果)追加到ul中所有的li的最后面(无缝效果:页面中的第一个图片和最后一个图片是同一个图片)
*
* 3.左右焦点的div显示和隐藏
* 4.为左右按钮注册点击事件
* 每一次点击右边的按钮,先判断pic的值是不是ul中li的length-1(pic的值最大是5),此时设置pic的值为0,同时设置ul距离左边的left值为0(初始值),此时pic立刻加1,移动ul,用户看到的就是第二个图片
* 设置小按钮的背景颜色
* 左边按钮,需要判断pic值是不是0,如果是0此时pic=5,ul的left为5*图片的宽,立刻pic-1,然后ul移动一张图片,此时用户看到了第五个图片
*
* 5.自动播放在页面加载的时候,启动一个定时器,里面调用的就是右边按钮的点击事件的处理函数
*
*
* BOM中顶级对象:Window
* DOM中顶级对象:Document
* jQuery中顶级对象:$--jQuery
*
*
* */
3. rem-适配
事例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
/*假设的设备 320px 414px 640px */
@media (min-width: 320px) {
html {
font-size: 50px;
}
}
@media (min-width: 414px) {
html {
font-size: 64.6875px;
}
}
@media (min-width: 640px) {
html {
font-size: 100px;
}
}
body {
margin: 0;
padding: 0;
font-size: 14px;
}
/*流式容器*/
header {
width: 100%;
height: 1rem;
line-height: 1rem;
font-size: 0.32rem;
text-align: center;
background: rgb(34, 0, 128);
color: #fff;
}
</style>
</head>
<body>
<!--1.伸缩布局 flex -->
<!--2.流式布局 百分比 -->
<!--3.响应布局 媒体查询 （超小屏设备的时候：流式布局）-->
<!--共同点：元素只能做宽度的适配（排除图片）-->
<!--适配方案rem：宽度和高度都能做到适配（等比缩放）-->
<!--4.rem布局-->
<!--通过控制html上的字体大小去控制页面上所有已rem为单位的基准值控制尺寸-->
<!--4.1 把页面上px单位转换成rem单位-->
<!--4.2 页面制作的时候 psd 上的量取的px转成rem使用-->
<!--4.3 怎么换算？？？预设一个基准值 方便计算 100px -->
<!--4.4 适配的时候设置基准值 320px 50px 怎么算：（640px 100px ===320px 50px）-->
<!--4.5 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度 -->
<!--4.6 怎么去改变 （js换算，媒体查询推荐）-->
<header>购物车</header>
</body>
</html>
4. 创建对象三种方法
<script>
//对象:特指的某个事物,具有属性和方法(一组无序的属性的集合)
//特征---->属性
//行为---->方法
//创建对象三种方式:
//1 字面量的方式
//2 调用系统的构造函数
//3 自定义构造函数方式
//实例对象
// var per1={
// name:"卡卡西",
// age:20,
// sex:"男",
// eat:function () {
// console.log("吃臭豆腐");
// },
// readBook:function () {
// console.log("亲热天堂");
// }
// };
//
// //调用系统的构造函数
// var per2=new Object();
// per2.name="大蛇丸";
// per2.age=30;
// per2.sex="男";
// per2.eat=function () {
// console.log("吃榴莲");
// };
// per2.play=function () {
// console.log("这个小蛇真好玩");
// };
// function Person() {
// }
// console.log(per2 instanceof Object);
// var dog=new Object();
//自定义构造函数
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.play = function () {
console.log("天天打游戏");
};
}
var per = new Person("雏田", 18, "女");
console.log(per instanceof Person);
</script>
5. 工厂模式创建对象
<script>
function createObject(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHi = function () {
console.log("您好");
};
return obj;
}
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHi = function () {
console.log("您好");
};
}
//创建对象---->实例化一个对象,的同时对属性进行初始化
/*
* 共同点:都是函数,都可以创建对象,都可以传入参数
*
* 工厂模式:
* 函数名是小写
* 有new,
* 有返回值
* new之后的对象是当前的对象
* 直接调用函数就可以创建对象
*
* 自定义构造函数:
* 函数名是大写(首字母)
* 没有new
* 没有返回值
* this是当前的对象
* 通过new的方式来创建对象
*
* */
var per1 = new Person("小红", 20);
var per2 = createObject("小明", 20);
</script>
6. 原型、构造函数、实例对象
- 构造函数可以实例化对象
- 构造函数中有一个属性叫prototype,是构造函数的原型对象
- 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
- 实例对象的原型对象(proto)指向的是该构造函数的原型对象
- 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的