求爱逛街网站一个热图滑动特效代码

Question

案例是在http://love.taobao.com/shop/index.htm?spm=1001.1000502.202005.6.Dy3S5H#navigation网站的，一些图片的margin-top和margin-left可以随着鼠标的移动而滚动。
求高人指点？

Answer 1

    <div style="overflow:hidden;width:300px;height:200px;">
        <img src="5.jpg">
    </div>
    <div style="overflow:hidden;width:100px;height:100px;">
        <img src="5.jpg"/>
    </div>
    <div style="overflow:hidden;width:100px;height:100px;">
        <img src="5.jpg">
    </div>
    <script type="text/javascript">
        var oldx,oldy;
        window.onload = function(){
            var imgs = document.getElementsByTagName('img');
            var len = imgs.length;
            for(var i=0;i<len;i++){
                imgs[i].onmousemove = function(e){
                    e = e || window.event;
                    if(!oldx){
                        oldx = e.clientX,oldy = e.clientY;
                    }
                    var parent = this.parentNode;
                    var h = this.height,w = this.width;
                    var ph = parent.offsetHeight,pw = parent.offsetWidth;
                    var newx = e.clientX,newy = e.clientY;
                    var mh = h/ph,mw = w/pw;
                    var oldmt = this.style.marginTop ? parseFloat(this.style.marginTop) : 0 ,oldml = this.style.marginLeft ? parseFloat(this.style.marginLeft) : 0;
                    var finalmt = oldmt + mh*(newy-oldy),finalml = oldml + mw*(newx-oldx); 
                    if(finalmt > 0){
                        finalmt = 0
                    }
                    if(finalmt < ph-h){
                        finalmt = ph - h;
                    }
                    if(finalml > 0){
                        finalml = 0;
                    }
                    if(finalml < pw-w){
                        finalml = pw-w;
                    }
                    ph<h && (this.style.marginTop = finalmt + 'px');
                    pw<w && (this.style.marginLeft = finalml + 'px');
                    oldx = newx,oldy = newy;
                }
                imgs[i].onmouseout = function(){
                    oldx = undefined;
                    oldy = undefined;
                }
            }
        }
    </script>随便写了下，不知道能看懂不。

Answer 2

var mh = h/ph,mw = w/pw;
换成
var mh = (h-ph)/ph,mw = (w-pw)/pw;效果更好点。

Answer 3

代码很简单啊，就是给里面的图片绑定一个mousemove事件，先算出图片跟外框高宽差，再用这个差值除以外框的高宽，这样就可以得出，鼠标每移一个像素，图片margin改变的值。然后在mousemove的时候取到鼠标的位置，鼠标移动后再取一次坐标的位置，算出移动了距离乘上上边算出的每移一个像素图片margin改变的值，大于0或者小于图片跟外框差就不改变图片的位置，然后设置下图片的margin就OK了，再将刚才新坐标复制给旧坐标，用来计算下次鼠标移动距离。鼠标移出图片后将保存了的鼠标位置清空，以防移到另外一张图片时位置计算有误。

Answer 4

        var oldx,oldy;//声明2个全局变量，用于保存鼠标在图片上移动时上个位置的坐标
        window.onload = function(){
            var imgs = document.getElementsByTagName('img');//获取到所有img，这里可以根据需要自己写选择器
            var len = imgs.length;//获取到img的个数，用于遍历
            for(var i=0;i<len;i++){
                imgs[i].onmousemove = function(e){
                    e = e || window.event;//获取event兼容代码
                    if(!oldx){
                        oldx = e.clientX,oldy = e.clientY;//oldx,oldy没有值的话赋值，主要是鼠标刚移动到图片上时会执行
                    }
                    var parent = this.parentNode;//获取本张图片的父节点，即外框
                    var h = this.height,w = this.width;//获取图片本身的尺寸
                    var ph = parent.offsetHeight,pw = parent.offsetWidth;//获取外框的尺寸
                    var newx = e.clientX,newy = e.clientY;//获取鼠标移动时当前位置的坐标
                    var mh = h/ph,mw = w/pw;//计算出图片跟外框的比例，可以得出鼠标每移动一个像素，图片应该产生的位移
                    var oldmt = this.style.marginTop ? parseFloat(this.style.marginTop) : 0 ,oldml = this.style.marginLeft ? parseFloat(this.style.marginLeft) : 0;//获取图片当前的margin信息
                    var finalmt = oldmt + mh*(newy-oldy),finalml = oldml + mw*(newx-oldx); //根据新坐标跟旧坐标计算出鼠标移动结束后图片最终位置
                    if(finalmt > 0){
                        finalmt = 0;//如果最终位置marginTop大于0，直接赋值0
                    }
                    if(finalmt < ph-h){
                        finalmt = ph - h;//如果最终位置marginTop小于外框与图片差值，则直接赋值为差值
                    }
                    if(finalml > 0){
                        finalml = 0;//同margonTop，限制marginLeft
                    }
                    if(finalml < pw-w){
                        finalml = pw-w;//同margonTop，限制marginLeft
                    }
                    ph<h && (this.style.marginTop = finalmt + 'px');//如果外框高度小于图片高度，则改变图片margin
                    pw<w && (this.style.marginLeft = finalml + 'px');//这两行主要是为了防止有图片比外框小，那就没有必要移动了。
                    oldx = newx,oldy = newy;//将新鼠标坐标赋值给旧鼠标坐标，用于计算下一次鼠标移动后，下一次鼠标位置与这一次鼠标位置的差值
                }
                imgs[i].onmouseout = function(){
                    oldx = undefined;//鼠标移出图片后，将鼠标位置信息清除
                    oldy = undefined;
                }
            }
        }注释一下，还有很多地方可以优化，自己研究吧。