JS中简单的滑动特效
东郭鸿福
window.onload = function(){
}
这句代码指的是：当整个窗体加载结束后，才执行大括号中的代码。
这篇代码中用到了JS中的点击事件onclick，及时当该标签范围内元素被鼠标点击的时候，发生的事件。
a = document.getElementById(“a”);
这句代码指的是：提取文档（document）中的标签元素的id为a的标签，赋给变量a.
setInterval(“方法”，每隔多少毫秒启动“方法”)；//该计时器有循环
setTimeout（“方法”，每隔多少毫秒启动“方法”）；//该计时器没有循环
clearInterval(set_id);
结束计时器set_id，将需要结束的计时器赋给一个变量值，set_id。通过clearInterval,和clearTimeOut来清除计时器。（计时器用完后需要被清除，不然会消耗资源，产生BUG）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#a{
border: 1px solid #000000;
width: 100px;
height: 100px;
position: absolute;
overflow: hidden;
}
#a img{
position: absolute;
top:-52px;
left: -42px;
}
</style>
<script>
var i = 0;
var set_id;
window.onload = function(){
var a = document.getElementById("a");
a.onclick = function(){
set_id = setInterval(function(){
if(i >= 300){
clearInterval(set_id);
}
i+=10;
var str = i+"px";
a.style.left = str;
},10);
}
}
</script>
</head>
<body>
<div id="a">
<img src="img/mouse.png" />
</div>
</body>
</html>
类似资料：