<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
}
</style>
<body>
<div id="div1">欢迎来到本网</div>
<script>
var div1 = document.getElementById('div1');
var timer = null;
div1.onmouseover=function(){
clearInterval(timer);
timer=setInterval(function(){
var speed=(600-div1.offsetWidth)/20;
if (div1.offsetWidth==600)
{
clearInterval(timer)
}
else
{
div1.style.width = div1.offsetWidth+speed+'px'
}
},30)
};
div1.onmouseout=function(){
clearInterval(timer);
timer=setInterval(function(){
var speed=(div1.offsetWidth-200)/20;
if (div1.offsetWidth==200)
{
clearInterval(timer)
}
else
{
div1.style.width = div1.offsetWidth-speed+'px'
}
},30)
};
</script>
</body>
</html>
利用源生js制作的匀减速滚动条工具
最新推荐文章于 2023-05-05 23:22:22 发布