图片分左右不同点击效果不同的处理方法

来源:互联网 发布:机械类软件 编辑:程序博客网 时间:2024/05/02 02:44

情况是这样的,图片一分为二,鼠标在图片的左边滑动时显示向左的箭头,右边就显示右边的箭头,一分为二的条件在ie下是event.offsetX<width/2,用你写的方法,测试了下,在ff,当鼠标进入图片范围不出来的话就不会改变箭头方向,希望能有办法帮我找到问题,谢谢!

 

 

<script>    function upNext(event){        var img = document.getElementById("imgId");        var lefturl = document.location;        var righturl = document.location;                var imgurl = righturl;        var width = (img.width==undefined) ? img.getAttribute("width") : img.width;        var x = (event.offsetX==undefined) ? getOffset(event).offsetX : event.offsetX;        function move(){            img.style.cursor = '';            if(event.offsetX<width/2){                if(lefturl != ''){                    if(window.attachEvent){                        img.style.cursor = 'url(images/left.cur),auto';                    }else{                        img.setAttribute("style","cursor:url(images/left.cur),auto;");                    }                }            }else{                if(righturl != ''){                    if(window.attachEvent){                        img.style.cursor = 'url(images/right.cur),auto';                    }else{                        img.setAttribute("style","cursor:url(images/right.cur),auto;");                    }                }            }                    }                function up(){            if(event.offsetX<width/2){                if(lefturl != ''){                    top.location = lefturl;                }            }else{                if(righturl != ''){                    top.location = righturl;                }            }        }                if(window.attachEvent){            img.attachEvent("onmousemove",move);            img.attachEvent("onmouseup",up);        }else{            img.addEventListener("mousemove",move,false);             img.addEventListener("mouseup",up,false);         }                            }    function getOffset(e){        var target = e.target;        if(target.offsetLeft == undefined){            target = target.parentNode;        }        var pageCoord = getPageCoord(target);        var eventCoord ={                 x: window.pageXOffset + e.clientX,            y: window.pageYOffset + e.clientY        };        var offset ={            offsetX: eventCoord.x - pageCoord.x,            offsetY: eventCoord.y - pageCoord.y        };        return offset;    }    function getPageCoord(element)    {      var coord = {x: 0, y: 0};      while (element){        coord.x += element.offsetLeft;        coord.y += element.offsetTop;        element = element.offsetParent;      }      return coord;    }    if(window.attachEvent){        document.getElementById("imgId").attachEvent("onmouseover",upNext);    }else{        document.getElementById("imgId").addEventListener("mouseover",upNext,false);     }</script>


 

原创粉丝点击