Javascript使用三大家族和事件来DIY动画效果相关笔记（四）
2024-05-09 02:43:13
1.图片轮播基础之缓速轮播
◆使用封装的缓慢速动画来DIY滑动轮播图，也就是鼠标移动到123456这些数字上后，图片以缓慢速滑动的方式进行切换。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用封装的缓速动画制作滑动轮播图</title><style type="text/css">body, ul, li, div, span, img {padding: 0;margin: 0;}img {border: 0 none;vertical-align: top;}.box {width: 490px;height: 170px;padding: 5px;border: 1px solid #f09;margin: 100px auto;}.inner {width: 490px;height: 170px;position: relative;overflow: hidden;cursor: pointer;}ul {list-style: none;width: 500%;position: absolute;left: 0;}li {width: 490px;height: 170px;float: left;}.square {position: absolute;bottom: 10px;right: 10px;}.square span {display: inline-block;width: 16px;height: 16px;line-height: 14px;border: 1px solid #ccc;background-color: #fff;text-align: center;margin-left: 5px;cursor: pointer;}.square .current {background-color: #f00;color: #fff;}</style>
</head>
<body>
<div class="box"><div class="inner" id="inner"><ul><li><img src="data:images1/01.jpg"></li><li><img src="data:images1/02.jpg"></li><li><img src="data:images1/03.jpg"></li><li><img src="data:images1/04.jpg"></li><li><img src="data:images1/05.jpg"></li></ul><div class="square"><span class="current">1</span><span>2</span><span>3</span><span>4</span><span>5</span></div></div>
</div>
<script>//需求：当鼠标移动指定的索引时，切换到对应索引的图片（缓速动画）//思路：当鼠标移动到指定的索引时，图片移动的距离（-索引*某张图片的实际宽度）//步骤：//1.获取事件源及相关对象//2.绑定事件//3.书写事件驱动程序//1.获取事件源及相关对象var inner = document.getElementById("inner");var ul = inner.children[0];var spanArr = inner.children[1].children;//获取某张图片的实际宽度 图片框的宽度就是 一张图片的宽度var imgWidth = inner.offsetWidth;//2.绑定事件for (var i = 0; i < spanArr.length; i++) {//给每一个span绑定一个索引 因为图片移动的时候需要用spanArr[i].index = i;spanArr[i].onmouseover = function () {//先处理span 给当前的span添加高亮样式for (var j = 0; j < spanArr.length; j++) {spanArr[j].className = "";}this.className = "current";//开始移动ulanimateX(ul, -this.index * imgWidth);}}//3.书写事件驱动程序/*** 功能：元素水平方向缓速移动* @param element* @param target*/function animateX(element, target) {//使用定时器之前先清除定时器clearInterval(element.timer);//使用定时器element.timer = setInterval(function () {//获取步长 缓速的步长=（指定距离 -当前距离）/10element.speed = (target - element.offsetLeft) / 10;//二次计算步长 因为如果当步长为小数时 可能会导致 水取不尽 定时器永远停不下来element.speed = element.speed > 0 ? Math.ceil(element.speed) : Math.floor(element.speed);//判断 剩下的距离是否小于或者等于步长，如果是的话，// 那就不需要再移动了，直接指定位置然后清除定时器//判断要取绝对值，因为步长可负可正if (Math.abs(target - element.offsetLeft) <= element.speed) {element.style.left = target + "px";clearInterval(element.timer);return;}//如果剩下的距离不小于或者等于步长 那么就老老实实的缓速移动element.style.left = element.offsetLeft + element.speed + "px";}, 30);}</script></body>
</html>◆使用封装的缓速动画来DIY左右轮播图，也就是点击左右按钮的时候，图片左右缓速切换。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用封装的缓速动画制作左右轮播图</title><style type="text/css">body, ul, li, div, span, img {padding: 0;margin: 0;}img {border: 0 none;vertical-align: top;}.box {width: 520px;height: 280px;padding: 5px;border: 1px solid #f09;margin: 100px auto;}.inner {width: 520px;height: 280px;position: relative;overflow: hidden;cursor: pointer;}ul {list-style: none;width: 500%;position: absolute;left: 0;}li {width: 520px;height: 280px;float: left;}/*鼠标移动到图片框时 就显示*/.inner:hover .square {display: block;}.square {width: 100%;position: absolute;top: 50%;margin-top: -20px;display: none;/*默认不显示*/}.square span {display: block;width: 30px;height: 60px;background-color: #fff;font: 500 25px/60px "consolas";text-align: center;cursor: pointer;color: #fff;background-color: rgba(0, 0, 0, 0.3);}#sq-left {float: left;}#sq-right {float: right;}</style>
</head>
<body>
<div class="box"><div class="inner" id="inner"><ul><li><img src="data:images2/1.jpg"></li><li><img src="data:images2/2.jpg"></li><li><img src="data:images2/3.jpg"></li><li><img src="data:images2/4.jpg"></li><li><img src="data:images2/5.jpg"></li></ul><div class="square"><span id="sq-left"><</span><span id="sq-right">></span></div></div>
</div>
<script>//需求：当点击左右箭头时，切换到上一张或下一张图片，如果是第一张或者最后一张，则给出提示//思路：点击左右箭头，图片的索引值++ 切换原理是移动图片 （-图片索引*图片实际的宽度）//步骤：//1.获取事件源及相关元素对象//2.绑定事件//3.书写事件驱动程序//1.获取事件源及相关元素对象var inner = document.getElementById("inner");var ul = inner.firstElementChild || inner.firstChild;var spleft = document.getElementById("sq-left");var spright = document.getElementById("sq-right");//2.绑定事件var index = 0;//定义一个全局变量图片索引spleft.onclick = function () {//3.书写事件驱动程序index--;//向左边切换if (index < 0) {index=0;alert("已经是第一张了！");return;}//移动animateX(ul, -index * inner.offsetWidth);}spright.onclick = function () {//3.书写事件驱动程序index++;//向右边切换if (index > ul.children.length-1) {index=ul.children.length-1;alert("已经是最后一张");return;}//移动animateX(ul, -index * inner.offsetWidth);}/*** 功能：缓速移动元素* @param element* @param target*/function animateX(element, target) {//使用定时器之前先清除定时器clearInterval(element.timer);//使用定时器element.timer = setInterval(function () {//获取步长：步长=（指定距离-当前距离）/10element.speed = (target - element.offsetLeft) / 10;//二次计算步长 防止有小数时 水取不尽而导致定时器永远不停element.speed=element.speed>0?Math.ceil(element.speed):Math.floor(element.speed);//判断 剩余的距离是否只剩一步之遥//如果只剩一步之遥 就直接移动到指定位置 然后清除定时器//因为 步长可正可负 所以取绝对值来比较if(Math.abs(target - element.offsetLeft)<=Math.abs(element.speed)){element.style.left=target+"px";clearInterval(element.timer);return;}//如果距离还很长 ，那就老老实实的缓速移动element.style.left=element.offsetLeft+element.speed+"px";}, 25);}</script>
</body>
</html>◆使用封装的缓速动画来DIY无缝轮播图，轮播的本质就是来回移动图片的位置，无缝轮播其实是多加了一张图片在最后面，当你切换到最后一张图片时，最后一张图片再往后切换时，实际上会瞬间切换到第一张然后再继续切换缓速切换到第二张，因为最后一张和第一张一模一样，所以瞬间切换的过程根本看不出来，所以就像很完整的无缝轮播了。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用封装的缓速动画制作无缝轮播图</title><style type="text/css">body, ul, ol, li, div, span, img {padding: 0;margin: 0;}img {border: 0 none;vertical-align: top;}.box {width: 500px;height: 200px;padding: 5px;border: 1px solid #f09;margin: 100px auto;}.inner {width: 500px;height: 200px;position: relative;overflow: hidden;/*cursor: pointer;*/}ul {list-style: none;width: 620%;position: absolute;left: 0;}ul li {float: left;}/*鼠标移动到图片框时 就显示*/.inner:hover .square {display: block;}.square {width: 100%;position: absolute;top: 50%;margin-top: -20px;display: none;/*默认不显示*/}.square span {display: block;width: 30px;height: 60px;background-color: #fff;font: 500 25px/60px "consolas";text-align: center;cursor: pointer;color: #fff;background-color: rgba(0, 0, 0, 0.3);}#sq-left {float: left;}#sq-right {float: right;}ol {position: absolute;bottom: 10px;right: 10px;}ol li {display: inline-block;width: 16px;height: 16px;line-height: 14px;font-size: 12px;border: 1px solid #ccc;background-color: #fff;text-align: center;margin-left: 5px;cursor: pointer;}ol .current {background-color: #f00;color: #fff;}</style>
</head>
<body>
<div class="box"><div class="inner" id="inner"><ul><li><img src="data:images3/1.jpg"></li><li><img src="data:images3/2.jpg"></li><li><img src="data:images3/3.jpg"></li><li><img src="data:images3/4.jpg"></li><li><img src="data:images3/5.jpg"></li></ul><ol></ol><div class="square"><span id="sq-left"><</span><span id="sq-right">></span></div></div>
</div>
<script>//需求：// ol的li根据ul中li动态生成// 鼠标移入到ol中li时就切换到相应的图片// 鼠标点击左右箭头时就切换图片// 自动从左至右轮播图片// 鼠标移动到图片框时，图片就不动了// 要求实现无缝缓速轮播//思路：// 遍历ul中li 动态创建ol中li 添加到ol中去// 克隆第一个li然后追加到ul中// 给ol中li绑定事件 鼠标移入到哪一个li中就切换对应的图片 也就是移动ul的位置// 鼠标点击左右箭头时 就切换对应的图片// 设置定时器，图片隔段时间就自动切换// 给图片框设置移入移出事件 移入就清除定时器 移出就开启定时器// 无缝轮播的原理是 第一张和最后一张一样，// 当移动到最后一张时，继续向下移动时就瞬间移动到第一张，// 并且在此时还执行移动到第二张的动画，由于速度很快，所以看不出来，就像是无缝了。//步骤：//1.获取事件源及相关元素对象//2.绑定事件//3.书写事件驱动程序//1.获取事件源及相关元素对象var inner = document.getElementById("inner");var ul = inner.firstElementChild || inner.firstChild;var ol = inner.children[1];var sqleft = document.getElementById("sq-left");var sqright = document.getElementById("sq-right");//遍历ul中li 动态创建ol中li 添加到ol中去for (var i = 0; i < ul.children.length; i++) {var li = document.createElement("li");li.innerHTML = i + 1;if (i == 0) {li.className = "current";}ol.appendChild(li);}//克隆第一个li然后追加到ul中ul.appendChild(ul.children[0].cloneNode(true));//2.绑定事件var lastIndex=0;for (var i = 0; i < ol.children.length; i++) {//给每一个li绑定索引ol.children[i].index = i;//绑定事件ol.children[i].onmouseover = function () {//3.书写事件驱动程序//排他原则for (var j = 0; j < ol.children.length; j++) {ol.children[j].className = "";}//复活自己this.className = "current";// //如果你是从最后一张跳到第一张的话
// if(this.index==0&&lastIndex==ol.children.length-1){
// autoplay();
// //如果是从第一张跳到最后一张的话
// }else if(this.index==ol.children.length-1&&lastIndex==0){
// rautoplay();
// }else if(lastIndex-this.index==-1){
// autoplay();
// }else if(lastIndex-this.index==1)
// {
// rautoplay();
// }else{//移动图片animateX(ul, -this.index * inner.offsetWidth);
// for(var k=0;k<this.index;k++){
//
// }
// }//给左右箭头切换时记住当前的图片索引key = this.index;//记录最后一次 切换的图片索引lastIndex=key;}}//左右箭头的单击事件sqleft.onclick = function () {rautoplay();}sqright.onclick = function () {autoplay();}//正方向自动轮播var key = 0;//切换记住图片的索引function autoplay() {key++;if (key > ol.children.length) {ul.style.left=0;key = 1;}//移动图片animateX(ul, -key * inner.offsetWidth);按左右箭头切换图片时 ol中的li样式也要跟着改变//排他原则for (var j = 0; j < ol.children.length; j++) {ol.children[j].className = "";}//这个key是ul图片的索引，ul图片比方块儿多一张// 所以这里是判断方块儿是否到了最大的极限了if(key > ol.children.length-1) {//复活自己ol.children[0].className = "current";}else {//复活自己ol.children[key].className = "current";}//记录最后一次 切换的图片索引lastIndex=key;}//反方向自动轮播function rautoplay() {key--;if (key < 0) {//图片从第一张切换到最后一张 瞬间ul.style.left = -ol.children.length * inner.offsetWidth + "px";key = ol.children.length - 1;//动画的索引 切换到倒数第二张}//移动图片animateX(ul, -key * inner.offsetWidth);//按左右箭头切换图片时 ol中的li样式也要跟着改变//排他原则for (var j = 0; j < ol.children.length; j++) {ol.children[j].className = "";}//复活自己ol.children[key].className = "current";//记录最后一次 切换的图片索引lastIndex=key;}//自动轮播var timer= setInterval(autoplay,1000);//鼠标移入到图片框是 停止自动轮播inner.onmouseover=function(){clearInterval(timer);}//鼠标移出到图片框是 开始自动轮播inner.onmouseout=function(){timer= setInterval(autoplay,1000);}/*** 功能：元素缓速移动的动画* @param element* @param target*/function animateX(element, target) {//使用计时器之前先清除定时器clearInterval(element.timer);//使用定时器element.timer = setInterval(function () {//获取步长 缓速步长计算公式：步长=（指定位置-当前位置）/10element.speed = (target - element.offsetLeft) / 10;//二次计算步长 防止步长带有小数 导致水永远取不完 然后定时器永远都不会停element.speed = element.speed > 0 ? Math.ceil(element.speed) : Math.floor(element.speed);//判断指定的距离与当前的位置是否只剩一步之遥//如果只剩一步之遥，那就直接移动到指定的位置，然后停止计时器//由于步长可正可负，所以判断时要使用绝对值if (Math.abs(target - element.offsetLeft) <= Math.abs(element.speed)) {element.style.left = target + "px";clearInterval(element.timer);return;}//如果剩余的距离不止是一步之遥，那么老老实实的 缓速移动element.style.left = element.offsetLeft + element.speed + "px";}, 18);}</script>
</body>
</html>2.使用缓速动画加scroll来DIY补充：楼层缓速跳跃
◆楼层缓速跳跃：同时设置html，body，ul，li的width:100%;height:100%，会让li继承占满一整页空间，因为这个时候html、body、ul、li的宽度和高度都是默认占满一整页，无论怎么放大缩小，都是默认占满一整页。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>楼层缓速跳跃</title><style type="text/css">body, ul, li, ol {margin: 0;padding: 0;}html, body, ul, li {width: 100%;height: 100%;}ol {list-style: none;position: fixed;left: 50px;top: 180px;}ol li {border: 1px solid #000;width: 88px;height: 88px;line-height: 88px;text-align: center;margin-top: -1px;cursor: pointer;}</style><script>window.onload = function () {//需求：给ol和ul中的li添加背景色// 当点击ol中li时缓速跳转到对应的ul中li中，// 也就是楼层跳转//思路：创建一个数组，循环给每一个li添加背景色// 给ol中的li添加单击事件，获取每一个对应的ul中li的距离上面的距离，然后设置缓速移动//步骤：//1.获取事件源及相关元素对象//2.绑定事件//3.书写事件驱动程序//1.获取事件源及相关元素对象var bgcolor = ["#f09", "#f00", "#0f0", "#ff0", "#909"];var ul = document.getElementsByTagName("ul")[0];var ol = document.getElementsByTagName("ol")[0];//循环给每一个li添加背景色for (var i = 0; i < bgcolor.length; i++) {ul.children[i].style.backgroundColor = bgcolor[i];ol.children[i].style.backgroundColor = bgcolor[i];}//2.绑定事件for (var i = 0; i < ol.children.length; i++) {//绑定索引ol.children[i].index = i;//绑定单击事件ol.children[i].onclick = function () {//每一次点击获取 对应ul中li被卷去的距离var target = ul.children[this.index].offsetTop;//使用定时器之前先清除定时器clearInterval(ul.timer);ul.timer = setInterval(function () {//获取步长 缓速步长获取原理：步长=（指定位置-当前位置）/10ul.speed = (target - scroll().top) / 10;//二次计算步长ul.speed = ul.speed > 0 ? Math.ceil(ul.speed) : Math.floor(ul.speed);//判断指定位置与当前位置是否只剩一步之遥//如果只剩一步之遥，那就直接移动到指定位置，然后清除定时器//由于步长可正可负，所以要取绝对值if (Math.abs(target - scroll().top) <= Math.abs(ul.speed)) {window.scrollTo(0, target);clearInterval(ul.timer);return;}//如果不止一步之遥 就继续缓速移动window.scrollTo(0, scroll().top + ul.speed);}, 18);}}//3.书写事件驱动程序}/*** 功能：获取兼容性的scroll对象* @returns {{left: (Number|number), top: (Number|number)}}*/function scroll() {return {left: window.pageXOffset || document.body.offsetLeft || document.documentElement.offsetLeft,top: window.pageYOffset || document.body.offsetTop || document.documentElement.offsetTop}}</script></head>
<body>
<ul><li>大仙女</li><li>大熊猫</li><li>大小熊</li><li>大考拉</li><li>大袋鼠</li>
</ul>
<ol><li>小仙女</li><li>小熊猫</li><li>小小熊</li><li>小考拉</li><li>小袋鼠</li>
</ol>
</body>
</html>3.event对象
◆在触发dom上的某个事件的时候，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event，但支持的方式不同。例如操作鼠标时，就会添加鼠标位置的相关信息到事件对象中，普通浏览器支持event（传参数），但是IE678只支持 window.event(不传参数)
document.onclick=function(event){
//兼容性写法
event=event||window.event
console.log(event);
}在IE678中，通过传参数的方式是无法获取到event对象的，只能够使用window.event，但是在一些主流浏览器上可以通过传递参数的方式获取event对象，所以以上的兼容性写法由此而来。
◆event对象的相关属性值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>event对象</title>
</head>
<body>
<script>/*** 在触发dom上的某个事件的时候，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event，但支持的方式不同。例如操作鼠标时，就会添加鼠标位置的相关信息到事件对象中，普通浏览器支持event（传参数），但是IE678只支持 window.event(不传参数)* @param event*/document.onclick = function (event) {//兼容性写法event = event || window.event;console.log(event);console.log(event.timeStamp)//：返回事件生成的日期和时间。console.log(event.bubbles)//：返回布尔值，指示事件是否是起泡事件类型。console.log(event.button)//：返回当事件被触发时，哪个鼠标按钮被点击。console.log(event.pageX)//：光标相对于该网页的水平位置（ie无）console.log(event.pageY)//：光标相对于该网页的垂直位置（ie无）console.log(event.screenX)//光标相对于该屏幕的水平位置console.log(event.screenY)//光标相对于该屏幕的垂直位置console.log(event.target)//该事件被传送到的对象console.log(event.type)//事件的类型console.log(event.clientX)//光标相对于该网页的水平位置 （当前可见区域）console.log(event.clientY)//光标相对于该网页的垂直位置}/*** 在IE678中，通过传参数的方式是无法获取到event对象的，只能够使用window.event，但是在一些主流浏览器上可以通过传递参数的方式获取event对象，所以以上的兼容性写法由此而来*/
</script>
</body>
</html>4.pageY与screenY与clientY的区别
◆event对象的pageY和pageX、screenY和screenX、clientY和clientX都是很常用的属性。
◆pageY和pageX是以页面文档(0,0)为基准的，页面文档就是html区域，指的是整个html区域，无论html页面有多长
◆screenY和screenX是以屏幕(0,0)点为基准，屏幕就是你的显示器里的桌面
◆clientY和clientX是以浏览器（浏览器可视区域）的(0,0)点为基准，浏览器指的也是html区域，指的html区域是指当前可见的那部分的html区域
◆当页面被卷去的距离为0时，pageY和pageX与clientY和clientX是一样的，但是当页面被卷去的距离不为0时，pageY=clientY+scroll().scrollTop,pageX=clientX+scroll().scrollLeft，这就是以页面为基准和以浏览器为基准的区别，在IE678中不支持pageX和pageY这两个属性，所以只能通过pageY=clientY+scroll().scrollTop,pageX=clientX+scroll().scrollLeft来实现兼容，通过event对象获取鼠标位于页面文档的真实坐标，获取鼠标位于页面文档的真实坐标的兼容性写法
var pageX=event.pageX||event.clientX+scroll().scrollLeft;
var pageY=event.pageY||event.clientY+scroll().scrollTop;◆
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>pageY与screenY与clientY的区别</title><style type="text/css">body {height: 5000px;}</style>
</head>
<body>
<script>/*** pageY和pageX是以页面文档(0,0)为基准的，* screenY和screenX是以屏幕(0,0)点为基准，* clientY和clientX是以浏览器（浏览器可视区域）的(0,0)点为基准，* 屏幕就是你的显示器里的桌面，* 页面文档就是html区域，* 浏览器指的也是html区域，* 但是不同的地方在于，* 页面文档指的是整个html区域，无论html有多长，* 而浏览器指的html区域是指当前可见的那部分的html区域，* 所以当页面被卷去的距离为0时，* pageY和pageX与clientY和clientX是一样的，* 但是当页面被卷去的距离不为0时，* pageY=clientY+scroll().scrollTop,* pageX=clientX+scroll().scrollLeft，* 这就是以页面为基准和以浏览器为基准的区别** 在IE678中不支持pageX和pageY这两个属性，* 所以只能通过* pageY=clientY+scroll().scrollTop,* pageX=clientX+scroll().scrollLeft* 来实现兼容* @param event*/document.onclick=function(event){//兼容性写法event=event || window.event;console.log("以页面文档为基准：("+event.pageX+","+event.pageY+")");console.log("以桌面屏幕为基准：("+event.screenX+","+event.screenY+")");console.log("以浏览器可视为基准：("+event.clientX+","+event.clientY+")");var pagey = event.pageY ||event.clientY+scroll().top;var pagex= event.pageX || event.clientX+scroll().left;console.log("以页面文档为基准的兼容性写法：("+pagex+","+pagey+")");}/*** 功能：获取兼容性的scroll*/function scroll() {return {left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop}}
</script>
</body>
</html>5.使用event对象配合offset家族和scroll家族来DIY动画：鼠标点击后小图片缓速跟随的动画
◆鼠标点击后小图片缓速跟随的动画：鼠标每点击页面中某个位置，都会让这个小图片以缓速移动的方式移动到这个位置。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠标点击后小图片缓速跟随的动画</title><style type="text/css">img {vertical-align: top;border: 1px solid #000;padding:10px 0;position: absolute;cursor: pointer;}</style>
</head>
<body>
<img src="https://img-blog.csdnimg.cn/2022010705384296860.jpeg" width="100">
<script type="text/javascript">//需求：当鼠标 点击页面时，小图片 缓速移动到鼠标点击的这个距离//思路：鼠标点击时获取 相应的事件对象，获取当前的坐标值 然后 设置元素缓速移动的动画//步骤：//1.老三步：// 获取事件源及相关元素对象、// 绑定事件、// 书写事件驱动程序//2.新五步：// 获取兼容性的事件对象、// 获取兼容性的坐标值、// 先清除定时器再开启定时器// 设置缓素移动的步长然后二次加工步长、// 判断是否符合要求然后清除定时器//1.老三步：// 获取事件源及相关元素对象、var img = document.getElementsByTagName("img")[0];// 绑定事件、document.onclick = function (event) {// 书写事件驱动程序// 获取兼容性的事件对象、 在IE678中不支持传参 只支持window.event 但是其它浏览器支持传参event = event || window.event;// 获取兼容性的坐标值、在IE678中没有pageX和pageYvar targetY = event.pageY || event.clientY + scroll().top;var targetX = event.pageX || event.clientX + scroll().left;//附加需求：如果想要鼠标在图片正中间// 鼠标点击后，图片默认左上角对着鼠标// 直接让图片少移动自身的一半距离即可targetX=Math.ceil(targetX-img.offsetWidth/2);//向上取整targetY=Math.ceil(targetY-img.offsetHeight/2);//向上取整//使用定时器之前先清除定时器clearInterval(img.timer);//开启定时器img.timer = setInterval(function () {//设置缓素移动的步长img.speedX = (targetX - img.offsetLeft) / 10;//x轴的步长img.speedY = (targetY - img.offsetTop) / 10;//y轴的步长// 二次加工步长、img.speedX = img.speedX > 0 ? Math.ceil(img.speedX) : Math.floor(img.speedX);img.speedY = img.speedY > 0 ? Math.ceil(img.speedY) : Math.floor(img.speedY);//判断x轴与y轴的指定位置是否都与当前位置相差一步之遥//如果相差一步之遥那么就直接设置为指定位置然后清除定时器//因为无论是y轴还是x轴的步长都可正可负，所以相比较时要取绝对值if (Math.abs(targetX - img.offsetLeft) <= Math.abs(img.speedX)&&Math.abs(targetY - img.offsetTop) <= Math.abs(img.speedY)) {img.style.left = targetX + "px";img.style.top = targetY + "px";clearInterval(img.timer);return;}//如果 移动的距离并不是相差一步之遥 那么就继续缓速移动img.style.left = img.offsetLeft+img.speedX + "px";img.style.top = img.offsetTop+img.speedY + "px";}, 18);}//2.新五步：// 获取兼容性的事件对象、// 获取兼容性的坐标值、// 先清除定时器再开启定时器// 设置缓素移动的步长然后二次加工步长、// 判断是否符合要求然后清除定时器/*** 功能：获取兼容性的scroll*/function scroll() {return {left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop}}</script>
</body>
</html>6.使用event对象配合offset家族和scroll家族来DIY动画补充一：指定区域图片放大镜
◆图片放大镜基础之获取小鼠标基于小盒子的坐标值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取小鼠标基于小盒子的坐标值</title><style type="text/css">div {width: 300px;height: 200px;position: absolute;left: 100px;top: 100px;/*border: 1px solid #000;*/background-color: #f09;font: 18px/30px "simsun";text-align: center;padding-top: 100px;color: #fff;}</style>
</head>
<body>
<div>鼠标位于盒子的x轴坐标值：100 px <br>鼠标位于盒子的y轴坐标值：100 px <br>
</div>
<script>//需求：当鼠标移入到盒子中时，开始计算鼠标位于盒子内部(0,0)点的坐标//思路：先获取鼠标位于当前页面文档的坐标，// 然后获取盒子位于当前文档的坐标，// 二者相减就能够得到鼠标位于盒子内部的坐标值//步骤：//1.老三步//获取事件源及相关对象//绑定事件//书写事件驱动程序//获取事件源及相关对象var div = document.getElementsByTagName("div")[0];//绑定事件div.onmousemove = function (event) {//书写事件驱动程序//获取兼容性的事件对象event = event || window.event;//获取兼容性的页面坐标对象var pagex = event.pageX || event.clientX + scroll().left;var pagey = event.pageY || event.clientY + scroll().top;//获取盒子位于页面文档的坐标var divx = div.offsetLeft;var divy = div.offsetTop;//计算鼠标位于盒子的坐标值var mouseOfDivX = pagex - divx;var mouseOfDivY = pagey - divy;//防止数值造成的抖动mouseOfDivX = mouseOfDivX < 10 ? "00" + mouseOfDivX : mouseOfDivX < 100 ? "0" + mouseOfDivX : mouseOfDivX;mouseOfDivY = mouseOfDivY < 10 ? "00" + mouseOfDivY : mouseOfDivY < 100 ? "0" + mouseOfDivY : mouseOfDivY;div.innerHTML = "鼠标位于盒子的x轴坐标值：" +mouseOfDivX + " px <br>鼠标位于盒子的y轴坐标值：" +mouseOfDivY + " px <br>";}/*** 功能：获取兼容性的scroll* @returns {{left: (Number|number), top: (Number|number)}}*/function scroll() {return {left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop}}</script>
</body>
</html>◆图片放大镜进阶之鼠标区域性移动时显示放大镜效果：图片放大的比例计算公式：（大图片的实际宽度-大盒子的实际宽度）/(小盒子的实际宽度-遮盖层的实际宽度)，使用的原理是，让多余的部分进行对比，这样才能够更加准确的获取比例。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠标区域性移动时显示放大镜效果</title><style type="text/css">body, img, div {margin: 0;padding: 0;}img {vertical-align: top;border: 0 none;}.box {width: 350px;height: 350px;border: 1px solid #f09;position: relative;margin-top: 150px;margin-left: 100px;}.small {width: 350px;height: 350px;position: relative;}.small .mask {width: 175px;height: 175px;background-color: rgba(255, 200, 200, 0.3);position: absolute;left: 0;top: 0;cursor: move;display: none;}.big {width: 400px;height: 400px;position: absolute;top: 0;left: 360px;border: 1px solid #0f0;overflow: hidden;display: none;}</style>
</head>
<body>
<div class="box" id="box"><div class="small"><img src="https://img-blog.csdnimg.cn/2022010705384343303.jpeg"/><div class="mask"></div></div><div class="big"><img src="https://img-blog.csdnimg.cn/2022010705384396447.jpeg" /></div>
</div>
<script>//需求：// 1.当鼠标移入到small盒子中时 显示mask层也显示big盒子，移出时不显示mask层也不显示big盒子// 2.当鼠标在small盒子中移动时 mask层也跟着移动// 3.当mask层移动时big盒子中的图片也随之移动，即呈现放大效果//思路：// 1.设置small盒子的鼠标移入移出事件，给mask盒子和big盒子设置显示的样式或者隐藏的样式// 2.设置small盒子的鼠标移动事件，鼠标在small盒子中移动时就获取鼠标在盒子中的坐标，// 然后赋值给mask盒子，最后给mask盒子设置可移动的坐标边界，防止mask出界了// 3.计算small中的图片和遮盖层的比例和big中的图片与big盒子的比例，// 根据比例来计算mask层移动时big层中的图片应该移动的距离。//步骤：//1.获取事件源及相关对象//2.绑定事件//3.书写事件驱动程序//1.获取事件源及相关对象var box = document.getElementById("box");var small = box.children[0];var mask = small.children[1];var big = box.children[1];var bigImg = big.children[0];//2.绑定事件//设置small盒子的鼠标移入移出事件，给mask盒子和big盒子设置显示的样式或者隐藏的样式//移入small.onmouseover = function () {//3.书写事件驱动程序show(mask);show(big);}//移出small.onmouseout = function () {//3.书写事件驱动程序hide(mask);hide(big);}//移动//设置small盒子的鼠标移动事件，鼠标在small盒子中移动时就获取鼠标在盒子中的坐标small.onmousemove = function (event) {//获取兼容性的 eventevent = event || window.event;//获取兼容性的坐标位置var pagex = event.pageX || event.clientX + scroll().left;var pagey = event.pageY || event.clientY + scroll().top;//获取鼠标位于盒子的坐标 并且设置鼠标在遮盖层的中间显示var mouseOfSamllX = Math.ceil(pagex - box.offsetLeft - mask.offsetWidth / 2);var mouseOfSamllY = Math.ceil(pagey - box.offsetTop - mask.offsetHeight / 2);//最后给mask盒子设置可移动的坐标边界，防止mask出界了if (mouseOfSamllX < 0) {mouseOfSamllX = 0;}if (mouseOfSamllX > small.offsetWidth - mask.offsetWidth) {mouseOfSamllX = small.offsetWidth - mask.offsetWidth;}if (mouseOfSamllY < 0) {mouseOfSamllY = 0;}if (mouseOfSamllY > small.offsetHeight - mask.offsetHeight) {mouseOfSamllY = small.offsetHeight - mask.offsetHeight;}//然后赋值给mask盒子mask.style.left = mouseOfSamllX + "px";mask.style.top = mouseOfSamllY + "px";//计算small中的图片和遮盖层的比例和big中的图片与big盒子的比例//比例公式：（大图片的实际宽度-大盒子的实际宽度）/(小盒子的实际宽度-遮盖层的实际宽度)//原理：也就是让多余的部分进行对比，从而产生精确的比例var bili = (bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth);bigImg.style.marginLeft = -mouseOfSamllX * bili + "px";bigImg.style.marginTop = -mouseOfSamllY * bili + "px";}//显示function show(element) {element.style.display = "block";}//隐藏function hide(element) {element.style.display = "none";}//获取兼容性的scroll对象function scroll() {return {left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop}}</script>
</body>
</html>7.使用event对象配合offset家族和scroll家族来DIY动画补充二：鼠标拖拽自定义的确认框移动+模拟自定义的窗体滚动条滚动
◆鼠标拖拽自定义的确认框移动：这个确认框有一点点好看，之前文章说的制作无限弹窗，这个demo中有提到过一小部分，把代码一解注释就会出现效果了。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠标拖拽自定义的确认框移动</title><style type="text/css">.dialog {width: 360px;height: 210px;border: 4px solid #903;/*颜色 x轴阴影偏移 y轴阴影偏移 模糊半径 阴影半径*/box-shadow: #901 0px 0px 50px 5px;position: absolute;left: 0;top: 0;}.title {height: 30px;background-color: #901;padding-left: 20px;color: #fff;font: 600 15px/27px "microsoft";cursor: move;}.content {height: 180px;background-color: #ffe;}.cont-top {height: 100px;text-align: center;font: 600 20px/100px "microsoft";color: #902;}.cont-top:hover {color: #e00;}.cont-bottom {height: 120px;text-align: left;}.cont-bottom b {display: inline-block;width: 100px;height: 30px;margin-left: 50px;border: 2px solid #901;text-align: center;color: #901;font: 600 15px/30px "microsoft";cursor: pointer;background-color: #ffd;}b:hover {background-color: #fff;border-color: #d00;color: #e00;}</style>
</head>
<body>
<div class="dialog" id="dialog"><div class="title">提示框</div><div class="content"><div class="cont-top">你真的真的真的要关闭吗？</div><div class="cont-bottom"><b>狠心关掉</b><b>让它待着</b></div></div>
</div>
<script>//需求：当鼠标移动到标题部分时，鼠标按下然后移动时，窗体也跟着移动//思路：给提示框title添加鼠标按下的事件，获取鼠标为与当前盒子的坐标，// 然后再设置鼠标移动事件，然后再获取鼠标位于当前页面的坐标，// 之后后设置left top属性即可，鼠标放下时，// 就清除已经设置的鼠标移入事件//步骤：//1.获取事件源及相关元素对象//2.绑定事件//3.书写事件驱动程序//1.获取事件源及相关元素对象var dialog = document.getElementById("dialog");var title = dialog.children[0];//2.绑定事件title.onmousedown = function (event) {//获取兼容性的事件对象event = event || window.event;//获取兼容性的鼠标坐标对象var pageY = event.pageY || event.clientY + scroll().top;var pageX = event.pageX || event.clientX + scroll().left;//获取鼠标位于当前盒子中的位置var mouseOfDialogY = pageY - dialog.offsetTop;var mouseOfDialogX = pageX - dialog.offsetLeft;document.onmousemove = function (event) {//获取兼容性的事件对象//获取兼容性的事件对象event = event || window.event;//获取兼容性的鼠标坐标对象var pageY = event.pageY || event.clientY + scroll().top;var pageX = event.pageX || event.clientX + scroll().left;//获取移动后的盒子的坐标位置var dialogY = pageY - mouseOfDialogY;var dialogX = pageX - mouseOfDialogX;// 下面的盒子是弄着玩儿的 页面会出现无数的提示框 有点好玩儿
// var newDialog = dialog.cloneNode(true);
// document.body.appendChild(newDialog);
// newDialog.style.left = dialogX + "px";
// newDialog.style.top = dialogY + "px";//设置当前盒子的坐标位置dialog.style.left = dialogX + "px";dialog.style.top = dialogY + "px";//清除选中文字window.getSelection ?window.getSelection().removeAllRanges() :document.selection.empty();}title.onmouseup = function () {document.onmousemove = null;}}//3.书写事件驱动程序//获取兼容性的scroll对象function scroll() {return {left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop}}</script>
</body>
</html>◆模拟自定义的窗体滚动条滚动
◇动态设置滚动条的滑块儿的长度，公式：可见的内容的高度/内容的高度*可见的内容的高度。
◇清除选中的内容：
△window.getSelection().removeAllRanges();在IE9及以上等其它主流浏览器支持这种清除选中内容的方式，如IE9、Firefox、Safari、Chrome和Opera支持window.getSelection().removeAllRanges();
△ocument.selection.empty();IE9以下支持这种清除选中的内容的方式。
△兼容性写法：window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
◇这个窗体有一点点好看，不仅有滑块儿，还可以移动窗体，是一个综合性的demo。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模拟自定义的窗体滚动条滚动</title><style type="text/css">.dialog {width: 600px;height: 500px;border: 4px solid #903;/*颜色 x轴阴影偏移 y轴阴影偏移 模糊半径 阴影半径*/box-shadow: #901 0px 0px 50px 5px;position: absolute;left: 320px;top: 50px;}.title {height: 30px;background-color: #901;padding-left: 20px;color: #fff;font: 600 15px/27px "microsoft";cursor: move;}.container {height: 470px;width: 566px;overflow: hidden;}.content {padding: 15px;background-color: #ffe;text-align: left;font: 600 15px/25px "microsoft";color: #902;}.content:hover {color: #e00;}#scroll {height: 470px;width: 30px;border-left: 4px solid #a01;/*border-right: 2px solid #a01;*/position: absolute;right: 0;bottom: 0;background-color: #fbb;}#bar {width: 30px;height: 150px;background-color: #501;border-radius: 6px;cursor: pointer;box-shadow: #f02 0px 0px 50px 6px;position: absolute;left: 0;top: 0;}#bar:hover {background-color: #301;}</style><script>//需求：当点击滚动条之后，往下滑动时，页面的内容也会对应的滑动//思路：设置滚动条的鼠标按下的事件，// 设置鼠标移动事件，// 设置滚动条可移动的范围，// 设置页面内容的的margin即可//步骤：//1.获取事件源及相关元素对象//2.绑定事件//3.书写事件驱动程序window.onload = function () {//1.获取事件源及相关元素对象var dialog = document.getElementById("dialog");var container = dialog.children[1]var contentObj = container.children[0];var scrollObj = document.getElementById("scroll");var bar = document.getElementById("bar");//2.绑定事件bar.onmousedown = function (event) {//获取兼容性的事件对象event = event || window.event;//获取兼容性的坐标值var pageY = event.pageY || event.clientY + scroll().top;
// var pageX = event.pageX || event.clientX + scroll().left;//获取当前鼠标位于scroll条的位置 只需要一个y轴的坐标值var mouseOfScollY = pageY - bar.offsetTop;document.onmousemove = function (event) {//获取兼容性的事件对象event = event || window.event;//获取兼容性的坐标值var pageY = event.pageY || event.clientY + scroll().top;//获取滚动条的位置坐标var barY = pageY - mouseOfScollY;//设置一下约束 防止滑块儿抛出滚动条内部if (barY < 0) {barY = 0;}if (barY > scrollObj.offsetHeight - bar.offsetHeight) {barY = scrollObj.offsetHeight - bar.offsetHeight;}//设置bar的坐标值bar.style.top = barY + "px";//开始设置页面内容了//等比例公式：（内容的高度-可见的内容的高度）/（滚动条的高度-滑块儿的高度）var bili = (contentObj.offsetHeight - container.offsetHeight) /(scrollObj.offsetHeight - bar.offsetHeight);//计算页面内容需要移动的距离var marginY = -barY * bili;//开始移动contentObj.style.marginTop = marginY + "px";//取消选中window.getSelection ? window.getSelection().removeAllRanges(): document.selection.empty();}}//鼠标移入的事件bar.onmouseup = function () {document.onmousemove = null;}//动态设置滚动条的滑块儿的长度//公式：可见的内容的高度/内容的高度*可见的内容的高度var barHeight = container.offsetHeight / contentObj.offsetHeight * container.offsetHeight;bar.style.height = barHeight + "px";新增移动会话框部分var title = dialog.children[0];//2.绑定事件title.onmousedown = function (event) {//获取兼容性的事件对象event = event || window.event;//获取兼容性的鼠标坐标对象var pageY = event.pageY || event.clientY + scroll().top;var pageX = event.pageX || event.clientX + scroll().left;//获取鼠标位于当前盒子中的位置var mouseOfDialogY = pageY - dialog.offsetTop;var mouseOfDialogX = pageX - dialog.offsetLeft;document.onmousemove = function (event) {//获取兼容性的事件对象//获取兼容性的事件对象event = event || window.event;//获取兼容性的鼠标坐标对象var pageY = event.pageY || event.clientY + scroll().top;var pageX = event.pageX || event.clientX + scroll().left;//获取移动后的盒子的坐标位置var dialogY = pageY - mouseOfDialogY;var dialogX = pageX - mouseOfDialogX;// 下面的盒子是弄着玩儿的 页面会出现无数的提示框 有点好玩儿
// var newDialog = dialog.cloneNode(true);
// document.body.appendChild(newDialog);
// newDialog.style.left = dialogX + "px";
// newDialog.style.top = dialogY + "px";//设置当前盒子的坐标位置dialog.style.left = dialogX + "px";dialog.style.top = dialogY + "px";//清除选中文字window.getSelection ?window.getSelection().removeAllRanges() :document.selection.empty();}title.onmouseup = function () {document.onmousemove = null;}}}//获取兼容性的scroll对象function scroll() {return {left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop}}</script>
</head>
<body>
<div class="dialog" id="dialog"><div class="title">会话框</div><div class="container"><div class="content">--------------------------开始--------------------------。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。<br>--------------------------结束--------------------------。<br></div></div><div id="scroll"><div id="bar"></div></div>
</div>
</body>
</html>转载于:https://www.cnblogs.com/jwlLWJ2018/p/9247737.html
Javascript使用三大家族和事件来DIY动画效果相关笔记（四）相关推荐
- Javascript使用三大家族和事件来DIY动画效果相关笔记（五）
1.client家族 ◆box.clientWidth:表示盒子的宽度加padding ◆box.clientHeight:表示盒子的高度加padding ◆box.clientTop:表示盒子上边的 ...
- Javascript使用三大家族和事件来DIY动画效果相关笔记（一）
1.offset家族 ◆offsetWidth和offsetHeight表示盒子真实的宽度高度,这个真实的宽度包括 四周的边框.四周的padding.及定义的宽度高度或内容撑开的高度和宽度,可以用来检 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!D ...
- javaScript中三大家族总结
三大家族整体解释图 第一大家族:offset家族 offset 是自己的-- 目的: 方便的获取元素尺寸 offsetWidth offsetHeight 得到对象的宽度和高度(自己的,与他人无关) ...
- JavaScript之jQuery够用即可（事件委托、动画效果、扩展插件）
文章目录 一.事件委托 二.JS的动画效果 三.扩展插件 一.事件委托 1.事件委托 其实就是给对象绑定一个事件,但是委托给它所属的每一个子对象了,因此每一个子对象都具有添加进的功能 书写格式如下: ...
- javascript实现鼠标移动两个小人的动画效果
动画效果 效果说明:鼠标按住其中一个小人拖动,可以实现屏幕上两个小人的移动 实现 1.HTML中的代码 <div class="background" @mousemove= ...
- JavaScript网页特效-浮现社会主义核心价值观文字动画效果
1.案例呈现 用户在页面单击鼠标左键,页面浮现"富强"."民主"."文明"."和谐"."自由".&q ...
- HTML5+CSS3+JavaScript 实现按键令小女孩移动，改变动画效果
素材图片 1.将小女孩图片截出来,在浏览器中居中显示,一个小女孩是96px <body><div class="box"></div> < ...
- 常用jquery鼠标事件和渐变动画效果
2019独角兽企业重金招聘Python工程师标准>>> 鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的以下是具体事件的介绍: (1):click事件:click事件于用户 ...
- Javascript中交换两个变量值的十种方法相关笔记（一）
交换两个变量的值十种方法: ◆第1.6.7.8.10既可以交换简单数据类型也可以交换复杂数据类型的,基本可以确定是任何类型的值. ◆第2,3,4,5,9只可以交换简单数据类型的,基本可以确定是数字类型 ...
最新文章
- 树莓派10年销量4600万台！儿童玩具到工业设备它都可，创始人：最初只想造廉价电脑，不料第一天就卖出10万台...
- wxWidgets：命名空间
- Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]
- 动手学深度学习(PyTorch实现)(八)--AlexNet模型
- adb查看某个文件是否存在_linux实现检查文件夹是否存在不存在则创建
- 主席树入门+博客推荐
- 【毕业论文】分享当年使用过的一些好用网站，包括论文去重，翻译，作图神器，免费文献查找 | 第 1 期
- iface eth0 inet dhcp
- ORA-20011 ORA-29913 KUP-11024问题处理
- chisel线网（wire）和寄存器（reg）详解（更新）
- 柯桥增值税留抵如何退税？
- arnold如何设置鱼眼相机_关于C4D阿诺德的摄像机参数详解
- 第07讲B文件与文件夹操作
- 沪深A股分析数据财务分析信息API接口（JSON标准格式，Get请求方式）
- Ubuntu下的kdbg安装和VSCode安装与简单使用
- 量子通信与计算机网络,虽然量子计算机仍然是个梦想，但是量子通信时代已经到来...
- Maven中央仓库地址大全
- Nacos系列【25】源码分析篇之Spring Cloud启动器
- 安装Ubuntu, 使用guile
- 别不信！App三年内将被HTML5顶替彻底消失？
热门文章
- A股：我要加区块链，监管：你可消停会
- Wsus更新失败错误代码:0x80244022故障排除
- 小明的存钱计划 南阳acm54
- Android4.1 关于Rotation相关的Configuration整体分析
- linux硬盘分区的几种方式,硬盘分区的三种方式
- 森林老是显示连接服务器超时,乌鸦森林之谜3：卡赫拉之影无法连接服务器是什么原因...
- win10 win11 创建共享文件夹 mac 苹果电脑共享 无internet 安全,你的电脑只能访问本地网络中的其它设备 共享文件夹会导致本地电脑无法上网,
- Flutter - 循序渐进 Sliver
- android浏览器实现收藏功能,Lua布局fusionapp 收藏功能与历史记录实现
- OpenWRT设置ADGuardHome+小喵咪