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="images1/01.jpg"></li> <li><img src="images1/02.jpg"></li> <li><img src="images1/03.jpg"></li> <li><img src="images1/04.jpg"></li> <li><img src="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"; //开始移动ul animateX(ul, -this.index * imgWidth); } } //3.写事件驱动程序 /** * 功能:元素水平缓慢移动 * @param element * @param target */ function animateX(element, target) { ///使用定时器前清除定时器 clearInterval(element.timer); //使用定时器 element.timer = setInterval(function () { //获得步长 缓速的步长=（指定距离 -当前距离)/10 element.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) { elemnt.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="images2/1.jpg"></li>
<li><img src="images2/2.jpg"></li>
<li><img src="images2/3.jpg"></li>
<li><img src="images2/4.jpg"></li>
<li><img src="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 () {
//获取步长：步长=（指定距离-当前距离）/10
element.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><!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="images3/1.jpg"></li>
<li><img src="images3/2.jpg"></li>
<li><img src="images3/3.jpg"></li>
<li><img src="images3/4.jpg"></li>
<li><img src="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 () {
//获取步长 缓速步长计算公式：步长=（指定位置-当前位置）/10
element.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 () {
//获取步长 缓速步长获取原理：步长=（指定位置-当前位置）/10
ul.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和pageY
var 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) {
//获取兼容性的 event
event = 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>
横看成林侧成峰，远近高低