JavaScript制作滑动动效
Posted 黑马程序员官方
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript制作滑动动效相关的知识，希望对你有一定的参考价值。
1.动画效果描述
当我们用鼠标点击滑块时就可以拖拽，当滑块左外边距超过背景开关宽度的一半时，灯泡亮起；小于一半时，灯泡熄灭。当我们中途鼠标按键抬起时，如果滑块左外边距超过背景开关宽度的一半，那么滑块最终居右；反之，滑块最终居左。
2. html代码准备
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
<style>
div
/*border: 1px solid red;*/
width: 140px;
height: 40px;
margin: auto;
background: url("./img/switch.png");
</style>
</head>
<body>
<center>
<img src="img/off.gif" id="light">
</center>
<div>
<img src="img/button.png" id="slideBtn">
</div>
</body>
</html>3. 拖拽分析
鼠标移动多大的距离(moveX-startX)，那么滑块也移动多大的距离，要想让滑块移动，最简单的做法可以直接修改滑块的margin-left样式值。如图所示：
4. javascript代码实现动画
<script>
window.onload=function ()
//获取滑块按钮元素对象
var slideBtn = document.getElementById("slideBtn");
//获取背景开关div的宽度
var mWidth = document.getElementById("switchBg").offsetWidth;
//获取灯泡图片元素
var light=document.getElementById("light");
//定义一个变量表示是否按下鼠标
var isDown=false;//默认没有按下
var startX;//按下点X轴坐标
var marginLeft=0;//默认左外边距是0
var flag=false;//默认灯泡没有亮
//绑定鼠标按下事件
slideBtn.onmousedown=function ()
//表示已经按下了
isDown=true;
//保存按下的点X坐标值
startX=event.screenX;
return false;
//绑定鼠标移动事件
slideBtn.onmousemove=function ()
if(isDown)//按下了之后才执行拖拽操作
//获取移动的坐标x
var moveX = event.screenX;
//计算查找，也就是移动的距离
var dx=moveX-startX;
startX=moveX;
//让滑块按钮左外边距移动dx像素
marginLeft+=dx;
//marginLeft不能大于mWidth/2，不能小于0
marginLeft=marginLeft>=mWidth/2?mWidth/2:marginLeft;
marginLeft=marginLeft<=0?0:marginLeft;
//设置滑块按钮的左外边距
slideBtn.style.marginLeft=marginLeft+"px";
//如果左外边距>mWidth/4 px，那么灯泡就亮
if(marginLeft>=mWidth/4 && !flag)
light.src="img/on.gif"
flag=!flag
else if (marginLeft<=mWidth/4 && flag)
light.src="img/off.gif"
flag=!flag
return false;
//绑定鼠标按键抬起事件
slideBtn.onmouseup=function ()
//最终按钮要复位，左外边距<mWidth/4就回到最左边，否则回到最右边
slideBtn.style.marginLeft=(marginLeft>=mWidth/4)?mWidth/2+"px":"0px"
isDown=false;//鼠标按键抬起了
//鼠标移出事件
slideBtn.onmouseout=function ()
isDown=false;//鼠标按键抬起了,否则下次在移入到滑块身上，isDown还是true，会导致我们没有按下鼠标就能拖动滑块
</script>
5. 总结：
这是一个比较简单的小动画，当然我们不使用margin-left也能完成。比如使用定位，我们可以使用相对定位来个开关和背景布局，修改开关的left值也是一样的。但是涉及到的事件依然是鼠标的按下、移动、抬起、移除事件。
以上是关于JavaScript制作滑动动效的主要内容，如果未能解决你的问题，请参考以下文章
网页精美动效/动画制作 按钮鼠标悬浮动效的注意点 02《炫彩网页 iVX 无代码动效/动画制作》
网页精美动效/动画制作 按钮鼠标悬浮动效基础 01《炫彩网页 iVX 无代码动效/动画制作》
Sketch+Keynote双剑合璧：5步快速制作移动动效！