<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>無縫滾動3</title>
????<style>
????????*{
????????????padding:?0;
????????????margin:?0;
????????}
????????#div1{
????????????width:?800px;
????????????height:?107px;
????????????background-color:red;
????????????position:?relative;
????????????margin:?100px?auto;
????????????overflow:hidden;
????????}
????????#div1?ul{
????????????list-style:?none;
????????????position:?absolute;
????????????top:?0;
????????????left:?0;
????????}
????????#div1?ul?li{
????????????float:?left;
????????????position:?relative;
????????????top:?0;
????????????left:?0;
????????}
????????#div1?ul?li?img{
????????????width:?200px;
????????}
????</style>
????<script>
????????window.onload=function()?{
????????????var?oDiv?=?document.getElementById("div1");
????????????var?aUl?=?oDiv.getElementsByTagName("ul")[0];
????????????var?aLi?=?oDiv.getElementsByTagName("Li");
????????????var?aImg?=?oDiv.getElementsByTagName("img");
????????????aUl.innerHTML?+=?aUl.innerHTML;
????????????aUl.style.width?=?aLi[1].offsetWidth?*?aLi.length?+?"px";
????????????var?speed?=?2;
????????????function?move()?{
????????????????if?(aUl.offsetLeft?<?-aUl.offsetWidth?/?2)?{
????????????????????aUl.style.left?=?0
????????????????}?else?if?(aUl.offsetLeft?>?0)?{
????????????????????aUl.style.left?=?-aUl.offsetWidth?/?2?+?"px";
????????????????}
????????????????aUl.style.left?=?aUl.offsetLeft?+?speed?+?"px";
????????????}
????????????var?timer?=?setInterval(move,?30);
????????????for?(var?n=0;n<aLi.length;n++)?{
????????????????aLi[n].onmouseover?=?function?()?{
????????????????????clearInterval(timer);
????????????????????aLi[n].top=-10+"px";
????????????????};
????????????????aLi[n].onmouseout?=?function?()?{
????????????????????timer?=?setInterval(move,?30);
????????????????????aLi[n].top=0;
????????????????};
????????????}
????????}
????</script>
</head>
<body>
<div?id="div1">
????<ul>
????????<li><img?src="dog1.jpg"></li>
????????<li><img?src="dog2.jpg"></li>
????????<li><img?src="dog5.jpg"></li>
????????<li><img?src="dog4.jpg"></li>
????</ul>
</div>
</body>
</html>我想實現鼠標停在哪個圖片上后 ?停止滾動 ?然后對應指住的那張圖片向上稍微偏移一下以達到和其他圖片區別的效果但只能做到讓整個滾動停止 ?不知道怎么做讓單獨指住的那張圖片做出區別于其他的效果。。
新手關于無縫滾動onmouseover問題
Ni14
2016-12-13 20:25:01