目录
( 一 ) 课程介绍
前言
这是写给自己的,唯一的感想就是太累了,写一篇博文纯手打确实很累,虽说不是技术含量太高的东西,但是确实有点累！,不过想想自己又学到了新的东西还是很值的~
今天课程有下面几个内容
- scroll系列:
重点要知道每个属性是什么意思- 封装scroll系列的相关的属性,固定导航栏案例
重点事件浏览器的滚动条事件能够写出来- 封装动画函数—缓动动画—变速动画
- 筋斗云
- 获取元素计算后的样式属性值
- 升级变速动画
重点理解,能够自己写出最终版本的函数- 手风琴案例
- 开机动画案例
- 旋转木马案例
- 另一个系列
- 图片跟着鼠标飞
( 二 ) scroll系列
(1) scroll
1.1 scroll 滚动事件
- 滚动事件,指浏览器页面向下滚动时,页面向上卷曲
1.2 scroll 的一些属性
scrollWidth元素中没有内容,则是元素本身的宽。元素中有内容,则是内容本身的宽。scrollHeight元素中没有内容,则是元素本身的高。元素中有内容,则是内容本身的高。scrollTop元素中页面向上卷曲出去的距离。scrollLeft元素中页面向左卷曲出去的距离。1.3. div 的滚动事件
my$("div的id").onscrolldiv的滚动事件
<div id="dv"></div>
<input type="button" value="显示效果" id="btn" />
my$("btn").onclick = function () {
console.log(my$("dv").scrollWidth);
console.log(my$("dv").scrollHeight);
console.log(my$("dv").scrollTop);
console.log(my$("dv").scrollLeft);
};
//div的滚动事件,实时的获取向上卷曲出去的距离的值
my$("dv").onscroll = function () {
console.log(this.scrollTop);
};
(2) 封装scroll系列的相关属性
2.1 封装getScroll函数
- 写一段兼容代码,目的是与谷歌、火狐、IE三大浏览器兼容。
- 兼容代码写好后写一段测试代码,测试代码有没有BUG
- 测试代码：浏览器的滚动事件
window.onscroll = function () {console.log(getScroll().top); };
function getScroll() {
return {
top:window.pageYOffset||document.documentElement.scrollTop||document.scrollTop||0
top:window.pageYOffset||document.documentElement.scrollTop||document.scrollTop||0
};
}
(3) 固定导航栏案例
3.1 固定导航栏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
vertical-align: top;
}
.main {
margin: 0 auto;
width: 1000px;
margin-top: 10px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="top" id="topPart"><img src="images/top.png" alt=""/></div>
<div class="nav" id="navBar"><img src="images/nav.png" alt=""/></div>
<div class="main" id="mainPart"><img src="images/main.png" alt=""/></div>
<script src="common.js"></script>
<script>
function getScroll () {
left : window.pageXOffsetLeft || document.documentElement.scrollLeft || document.scrollLeft || 0,
top : window.pageYOffsetTop || document.documentElement.scrollTop || document.scrollTop || 0
}
window.onscroll = function () {
if (getScroll().top >= my$("topPart").offsetHeight) {
my$("navBar").className = "nav fixed";
my$("mainPart").marginTop = my$("navBar").offsetHeight + "px";
} else {
my$("navBar").className = "nav";
my$("mainPart").marginTop = "10px";
}
};
</script>
</body>
</html>
( 三 ) 封装动画函数----缓动动画----变速动画
(1) 匀速动画
匀速动画
匀速动画就是动画朝一个方向,均等速度的移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin-top: 20px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
<script src="common.js"></script>
<script>
my$("btn1").onclick = function () {
animate(my$("dv"),400);
};
my$("btn2").onclick = function () {
animate(my$("dv"),800);
};
function animate(element,target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var current = element.offsetLeft;
var step = 10;
step = target > current ? step : -step;
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 20);
}
</script>
</div>
</body>
</html>
(2) 变速动画
变速动画
变速动画动画移动时,开始时移动很快,越往后越慢,快到达终点时有一个缓速效果。- 效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin-top: 20px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
<script src="common.js"></script>
<script>
my$("btn1").onclick = function () {
animate(my$("dv"),400);
};
my$("btn2").onclick = function () {
animate(my$("dv"),800);
};
function animate(element,target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var current = element.offsetLeft;
var step = (target - current)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style.left = current + "px";
if (current == target) {
clearInterval(element.timeId);
}
console.log("目标位置"+target+"当前位置"+current+"移动的步数"+step);
}, 20);
}
</script>
</div>
</body>
</html>
( 四 ) 筋斗云
筋斗云案例
- 功能一：
(图1)当鼠标进入导航栏某个位置，云过来。鼠标离开导航栏,云回到原点。- 功能二：
(图2)当鼠标点击导航栏中某个具体位置，云过来并以此为原点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
body {
background-color: #333;
}
.nav {
width: 800px;
height: 42px;
margin: 100px auto;
background: url(images/rss.png) right center no-repeat;
background-color: #fff;
border-radius: 10px;
position: relative;
}
.nav li {
width: 83px;
height: 42px;
text-align: center;
line-height: 42px;
float: left;
cursor: pointer;
}
.nav span {
position: absolute;
top: 0;
left: 0;
width: 83px;
height: 42px;
background: url(images/cloud.gif) no-repeat;
}
ul {
position: relative;
}
</style>
</head>
<body>
<div class="nav">
<span id="cloud"></span>
<ul id="navBar">
<li>北京校区</li>
<li>上海校区</li>
<li>广州校区</li>
<li>深圳校区</li>
<li>武汉校区</li>
<li>关于我们</li>
<li>联系我们</li>
<li>招贤纳士</li>
</ul>
</div>
<script src="common.js"></script>
<script>
function animate (element,target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var current = element.offsetLeft;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style.left = current + "px";
if (current == target) {
clearInterval(element.timeId);
}
console.log("目标的位置"+target+"当前的位置"+current+"移动的步数"+step);
}, 20);
}
var cloud = my$("cloud");
var list = my$("navBar").children;
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = onmouserHandle;
list[i].onclick = onclickHandle;
list[i].onmouseout = onmousetHandle;
}
function onmouserHandle () {
animate(cloud, this.offsetLeft);
}
var lastPosition = 0;
function onclickHandle () {
lastPosition = this.offsetLeft;
}
function onmousetHandle() {
animate(cloud, lastPosition);
}
</script>
</body>
</html>
( 五 ) 获取元素计算后的样式属性值
(1) 封装getStyle函数
5.1 获取元素属性样式值得一些属性
getComputedStyle()方法 - 返回一个对象
---- 1.1 语法
window.getComputedStyle(element, [pseudoElt]);
element- 用于获取计算样式的Element。
pseudoElt- 指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。示例：①
my$("btn").onclick = function () { //获取元素距离左边的值，谷歌、火狐、IE9-IE11支持。IE8不支持。 console.log(window.getComputedStyle(my$("dv"),null).left); console.log(window.getComputedStyle(my$("dv"),null)["left"]); //IE8-IE11支持。谷歌、火狐不支持。 console.log(my$("dv").currentStyle.left); };示例：②
//浏览器兼容代码 案例 ①代码存在浏览器不兼容问题,这里是优化后最终版本的代码 function getStyle (element,attr) { //判断浏览器支不支持window.getComputedStyle方法,支持就返回这个方法返回对象,不支持就返回element.currentStyle方法对象。 //这两个方法属性类似,只不过一个是谷歌,火狐浏览器支持,另一个是IE浏览器支持。 return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currentStyle[attr]; } my$("btn").onclick = function () { //获取top,如果没给定top值就会返回auto console.log(getStyle(my$("dv"),"top")); };
( 六 ) 升级变速动画
(1) 变速函数封装增加任意一个属性
目标是实现如图效果,通过设置属性和值来改变元素移动形态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 200px;
height: 100px;
margin-top: 25px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动400px" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//获取按钮,注册点击事件
my$("btn").onclick = function () {
//获取元素变宽后此时的值(width:400px)
animate(my$("dv"),"width",400);
//获取元素向下,与头部距离的值(top:400px)
animate(my$("dv"),"top",400);
};
//变速函数封装,获取计算后的属性值
function getStyle (element,attr) {
//三元表达式,判断浏览器支不支持这个方法(兼容代码)
return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currentStyle[attr];
}
//动画函数封装
function animate (element,attr,target) {
//先清理定时器,再创建定时器
element.timeId = setInterval(function () {
//获取元素当前位置
var current = parseInt(getStyle(element,attr));
//元素每次移动距离
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//计算后的元素的位置
current += step;
element.style[attr] = current + "px";
//如果元素到达目标,清除定时器
if (current == target) {
clearInterval(element.timeId);
}
//测试代码
console.log("目标位置"+target+"当前位置"+current+"移动的步数"+step);
}, 20);
}
</script>
</body>
</html>
(2) 变速函数封装增加任意多个属性
点击按钮,改变宽度到达目标值,高度到达目标值
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left:10px;
top:10px;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值,左距离到达一个目标值,顶部到达一个目标值
my$("btn").onclick = function () {
animate(my$("dv"),{"width":300,"height":400,"left":400,"top":80});
};
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值。attr是参数,也是变量,有属性名字,有字符串,有变量
function getStyle (element,attr) {
return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currentStyle[attr] || 0;
}
//json---对象---多个属性及多个目标值
function animate (element,json) {
clearInterval(element.timeId);
element.timeId = setInterval(function(){
//默认,假设,全部到达目标
var flag = true;
//遍历循环json所有属性值
for (var attr in json) {
var current = parseInt(getStyle(element,attr));
var target = json[attr];
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[attr] = current + "px";
//判断所有元素有没有到达目标位置,如果没有到达位置则继续执行
if (current != target) {
flag = false;
}
}
if (flag) {
clearInterval(element.timeId);
}
//测试代码
console.log("目标:"+target+"当前位置"+current+"移动步数"+step);
},20);
}
</script>
</body>
</html>
(3) 变速函数封装增加任意多个属性和回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//获取元素当前属性当前的值---获取属性当前的位置
function getStyle (element,attr) {
return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currentStyle[attr] || 0;
}
//element---元素
//json---对象---多个属性多个目标值
//fn---函数
function animate (element,json,fn) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var flag = true;//默认,假设,全部到达目标
for (var attr in json) {
var current = parseInt(getStyle(element,attr));
var target = json[attr];
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[attr] = current + "px";
if (current != target) {
flag = false;
}
}
if (flag) {
clearInterval(element.timeId);
//所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if (fn) {
fn();
}
}
//测试代码
console.log("目标:"+target+"当前位置:"+current+"移动步数:"+step);
}, 20);
}
my$("btn").onclick = function () {
var json1 = {"width":400,"height":500,"left":500,"top":80};
animate(my$("dv"),json1,function (){
var json2 = {"width":40,"height":50,"left":50,"top":800};
animate(my$("dv"),json2,function(){
var json3 = {"width":450,"height":550,"left":550,"top":600};
animate(my$("dv"),json3);
});
});
};
</script>
</body>
</html>
(4) 变速函数封装增加任意多个属性和回调函数及层级还有透明度
通过代码实现如图效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
input {
z-index: 10;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//获取元素的任意一个属性的任意一个值---获取当前属性的位置
function getStyle(element,attr){
return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currentStyle[attr] || 0;
}
function animate (element,json,fn) {
clearInterval(element.timeId);
//定时器,返回的是定时器的id
element.timeId = setInterval(function () {
var flag = true;//默认,假设,全部到达目标
//遍历json对象中的每个属性还有属性对应的目标值
for (var attr in json) {
//判断这个属性attr中是不是opacity
if (attr == "opacity") {
//获取元素的当前的透明度,当前的透明度放大100倍
var current = getStyle(element, attr) * 100;
//目标的透明度放大100倍
var target = json[attr] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
//层级改变就是直接改变这个属性的值
element.style[attr] = json[attr];
} else {
//普通的属性
//获取元素这个属性的当前的值
var current = parseInt(getStyle(element, attr));
//当前的属性对应的目标值
var target = json[attr];
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current + "px";
}
//是否到达目标
if (current != target) {
flag = false;
}
}
if (flag) {
//清理定时器
clearInterval(element.timeId);
//所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if (fn) {
fn();
}
}
//测试代码
console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
}, 20);
}
//透明度: 数字类型----小数---放大100倍
my$("btn1").onclick = function () {
var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
animate(my$("dv"), json1, function () {
animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
});
};
</script>
</body>
</html>
( 七 ) 手风琴案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
//获取任意一个元素的任意一个属性的当前的值---获取当前元素当前位置
function getStyle (element,attr) {
return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currentStyle[attr] || 0;
}
function animate (element,json,fn) {
clearInterval(element.timeId);//清除定时器
//定时器---定时器id返回值
element.timeId = setInterval(function () {
//默认,假设全部到达目标
var flag = true;
//遍历循环json对象,获取所有属性和属性对应的值
for (var attr in json) {
//如果attr属性是opacity
if (attr == "opacity") {
//获取属性当前透明度,透明度放大100倍
var current = getStyle(element,attr) * 100;
var target = json[attr] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[attr] = current / 100;
//判断attr这个属性中是不是zIndex
} else if (attr == "zIndex") {
element.style[attr] = json[attr];
} else {
//获取任意一个元素的任意一个属性的属性值,
var current = parseInt(getStyle(element,attr));
var target = json[attr];
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style[attr] = current + "px";
if (current != target) {
flag = false;
}
}
if (flag) {
clearInterval(element.timeId);
if (fn) {
fn();
}
}
}
//测试代码
console.log("目标:"+target+"当前位置:"+current+"移动步数:"+step);
}, 20);
}
//获取li标签
var list = my$("box").getElementsByTagName("li");
for (var i = 0;i<list.length;i++) {
list[i].style.backgroundImage = "url(images/"+(i + 1)+".jpg)";
//鼠标进入
list[i].onmouseover = mouserHandle;
//鼠标离开
list[i].onmouseout = mousetHandle;
}
//进入事件
function mouserHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j],{"width":100});
}
animate(this,{"width":800});
}
//离开
function mousetHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j],{"width":240});
}
}
</body>
</html>
( 八 ) 开机动画案例
如图所示,点击按钮实现相关效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 322px;
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
span {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<span id="closeButton"></span>
<div class="hd" id="headPart"><img src="images/t.jpg" alt=""/></div>
<div class="bd" id="bottomPart"><img src="images/b.jpg" alt=""/></div>
</div>
//位置获取代码封装在js中(主要是针对浏览器兼容的几个方法),动画封装函数
<script src="common.js"></script>
<script>
//获取按钮,注册点击事件
my$("closeButton").onclick = function () {
//设置最下面的div的高渐渐的变成0
animate(my$("bottomPart"),{"height" : 0}, function () {
animate(my$("box"),{"width" : 0});
});
};
</script>
</body>
</html>
( 九 ) 旋转木马案例
(1) 数组中的方法
1.删除数组中第一个元素的值
- arr.shift();
2.删除数组中第一个元素的值追加到数组中的最后
- arr.push(arr.shift());
3.删除元素最后一个值,追加到数组中第一个位置
- arr.unshift(arr.pop());
(2) 旋转木马
旋转木马案例
- 准备工作是先引入css文件,js文件。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css(1).css"/>
<script src="common.js"></script>
<script>
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];
//页面加载事件---页面加载完毕
window.onload = function () {
//假设,默认全部到达目标---锁
var flag = true;
//首先获取所有li标签
var list = my$("slide").getElementsByTagName("li");
//图片散开
function assign () {
//获取所有li
for (var i = 0; i < list.length; i++) {
//设置每个li,都要把宽,层级,透明度,left,top到达指定的目标位置
animate(list[i],config[i],function () {
flag = true;
});
}
}
assign();
//点击右按钮
my$("arrRight").onclick = function () {
if (flag) {
flag = false;
config.push(config.shift());
assign();//重新分配
}
};
//点击右按钮
my$("arrLeft").onclick = function () {
if (flag) {
flag = false;
config.unshift(config.pop());
assign();//重新分配
}
};
//鼠标进入显示
my$("slide").onmouseover = function () {
animate(my$("arrow"),{"opacity":1});
};
//鼠标离开隐藏
my$("slide").onmouseout = function () {
animate(my$("arrow"),{"opacity":0});
};
};
</script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
</body>
</html>
( 十 ) client系列
三大系列有
1.offset系列
- offset系列:获取元素的宽,高,left,top, offsetParent
- offsetWidth:元素的宽,有边框
- offsetHeight:元素的高,有边框
- offsetLeft:元素距离左边位置的值
- offsetTop:元素距离上面位置的值
2.croll系列
- croll系列:卷曲出去的值
- scrollLeft:向左卷曲出去的距离
- scrollTop:向上卷曲出去的距离
- scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框
- scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框
3.client系列
- client系列:可视区域
- clientWidth:可视区域的宽(没有边框),边框内部的宽度
- clientHeight:可视区域的高(没有边框),边框内部的高度
- clientLeft:左边边框的宽度
- clientTop :上面的边框的宽度
( 十一 ) 图片跟着鼠标飞
1.事件参数对象----e
文档的鼠标移动事件
对象.事件 = 事件处理函数,事件触发了函数的代码就会执行,执行的时候,函数调用的时候
通过arguments.length,可以得出在事件处理函数中是有参数的,这个参数和事件有关系,是一个对象- - -事件参数对象。
事件参数对象----e,在谷歌和火狐浏览器中有这个参数,IE8中没有,不支持。在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 () { //window.event----谷歌和火狐中有,IE8中也有 my$("im").style.left = window.event.clientX + "px"; my$("im").style.top =window.event.clientY + "px"; }document.onmousemove=function (e) { //浏览器兼容----谷歌火狐有e和window.event,IE8有没有e只有window.event 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"; }
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
