您的位置:首页 > Web前端 > JavaScript

JS实现全景图效果360度旋转

2014-07-23 10:11 519 查看
http://www.jb51.net/article/6009.htm

<div id="div1" style="cursor:hand;position:absolute;width:500;height:190;overflow:hidden;border:1 solid red" onmouseover="clearTimeout(scrl);" onmousemove="getpos()" onmouseout="change(1);"><img src=http://www.jb51.net/upload/out500b.jpg onload="change(1);"></div>

<script>

var scrl,direction="right";

var x,xold,xdiff, i=1;

function change(start){

if(direction == "right"){

if(div1.scrollTop+190 < div1.scrollHeight){

div1.scrollTop += 190;

}

else{

div1.scrollTop = 0;

}

}

else{

if(div1.scrollTop-190 > 0){

div1.scrollTop -= 190;

}

else{

div1.scrollTop = div1.scrollHeight;

}

}

if(start) scrl = setTimeout("change(1)",100);

else clearTimeout(scrl);

}

function getpos(){

x = event.clientX;

xdiff = x - xold;

xold = x;

if(xdiff>0) direction = "right";

if(xdiff<0) direction = "left";

change(0);

}

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: