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




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" οnmοuseοver="clearTimeout(scrl);" οnmοusemοve="getpos()" οnmοuseοut="change(1);"><img src=http://www.jb51.net/upload/out500b.jpg οnlοad="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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值