鼠标拖动切换图片效果

【Javascript】

下载

新闻

文章

鼠标拖动切换图片效果

为了帮人解答而随手写的一个简单特效并没有进入美化改良。

<script type="text/javascript">
    //通过class选取元素
    function getByClass(oParent,sClass){
        var aEle=oParent.getElementsByTagName('*');
        var aResult=[];
        var re=new RegExp('\\b'+sClass+'\\b','i');   //去掉class左右的空格
        for(var i=0;i<aEle.length;i++){
            if(re.test(aEle[i].className)){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }
    //得到样式
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];
        }
    }
    function drag(id){
        var oWrap=document.getElementById(id);
        var aContent=getByClass(oWrap,'content');
        function cut(b,n){
            n+=b;
            if(n<0)n=aContent.length-1;
            if(n>aContent.length-1)n=0;
            for(var i=0;i<aContent.length;i++){
                if(i==n){
                    aContent[i].style.zIndex=2;
                }else if(i!=b){
                    aContent[i].style.zIndex=1;
                }
            }
        }
        function move(obj,x){
            obj.style.border="1px solid #ff3300";
            var i=x>0?-5:5;
            var st=null,_x=Math.floor(x);
            if(Math.abs(x)>100){
                obj.style.zIndex=1;
            }else{
                //需要返回原点
                obj.style.filter="alpha(opacity=100)";
                obj.style.opacity=1;
            }
            function b(){
                _x+=i;
                obj.style.left=_x+"px";
                if(Math.abs(_x)<10){
                    clearInterval(st);
                    obj.style.left=0;
                    obj.style.filter="alpha(opacity=100)";
                    obj.style.opacity=1;
                    obj.style.border="1px solid #fff";
                    obj.move=false;
                }
            }
            st=setInterval(b,20);
        }
        for(var i=0;i<aContent.length;i++){
            aContent[i].index=i;
            aContent[i].move=false;
            aContent[i].onmousedown=function(ev){
                if(this.move)return false;
                this.move=true;
                var oEvent=ev||event;
                var _this=this, x,direction="";
                var disX=oEvent.clientX-_this.offsetLeft;
                _this.style.filter="alpha(opacity=80)";
                _this.style.opacity=0.8;
                _this.style.border="1px solid red";
                _this.style.zIndex=3;
                document.onmousemove=function(ev){
                    var oEvent=ev||event;
                    x=oEvent.clientX - disX;//x坐标位移量
                    _this.style.left =  x + "px";//移动中
                    if(x<0&&direction!="left"){
                        direction="left";
                        cut(_this.index,1);
                    }else if(x>0&&direction!="right"){
                        direction="right";
                        cut(_this.index,-1);
                    }
                    document.onmouseup=function(){
                        move(_this,x);
                        document.onmousemove = document.onmouseup = null;
                    };
                };

            }
        }
    }
    window.onload=function(){drag('wrap')}
</script>

完整代码及演示效果点击这里查看