这个要看你自己的需求是什么。如果单纯的是想在某个模块不要滚动的话直接overflow:hidden就可以。如果需要整个页面都不想要浏览器的滚动行为可以用JS阻止浏览器行为,比如:
event.preventDefault()//firefox等event.returnValue = false//IE系列
#box1 div:hover{animation-play-state: paused
}
animation--play-state属性指定动画是否正在运行或已暂停。
语法: animation-play-state: paused|running
paused 指定暂停动画
running 指定正在运行的动画
我写的代码,要下班了,所以就简单注释一下。鼠标经过会停止,移开鼠标会继续走。已经测试过了。另存xx.htm打开可看效果。
<script type="text/javascript">var timer_movex
start_timer()
function start_timer(){
timer_movex = setInterval(function() {//setInterval是js循环定时器每隔一段时间就执行一次function代码
var x = document.getElementById('x')//获得id为x的html元素
if(x.offsetLeft >= 800)
x.style.left = 0//如果移动到了800的位置,则跳回左边0点重新开始移动
else
x.style.left = x.offsetLeft + 50//向右移动20个像素
}, 1000)//每隔1000毫秒移动一次
}
function stop_timer() {
clearInterval(timer_movex)
}
function movex(v) {
var x = document.getElementById('x')//获得id为x的html元素
x.style.left = x.offsetLeft + v//移动v个像素,v为正数则向右,负数则向左。x.style.left即为左边框位置。
}
</script>
<div id="x" style="position:absolute left:500px top:100px width:100px height:100px border=1px solid #000" onmouseover="stop_timer()" onmouseout="start_timer()">
<h1>TEST</h1>
</div>
<form>
<input id="test" onclick="movex(-100)" value="点击左移" type="button"/>
<input id="test" onclick="movex(100)" value="点击右移" type="button"/>
<input id="test" onclick="start_timer()" value="start" type="button"/>
<input id="test" onclick="stop_timer()" value="stop" type="button"/>
</form>