求爱逛街网站一个热图滑动特效代码 案例是在http://love.taobao.com/shop/index.htm?spm=1001.1000502.202005.6.Dy3S5H#navigation网站的,一些图片的margin-top和margin-left可以随着鼠标的移动而滚动。求高人指点? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <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>随便写了下,不知道能看懂不。 var mh = h/ph,mw = w/pw;换成var mh = (h-ph)/ph,mw = (w-pw)/pw;效果更好点。 代码很简单啊,就是给里面的图片绑定一个mousemove事件,先算出图片跟外框高宽差,再用这个差值除以外框的高宽,这样就可以得出,鼠标每移一个像素,图片margin改变的值。然后在mousemove的时候取到鼠标的位置,鼠标移动后再取一次坐标的位置,算出移动了距离乘上上边算出的每移一个像素图片margin改变的值,大于0或者小于图片跟外框差就不改变图片的位置,然后设置下图片的margin就OK了,再将刚才新坐标复制给旧坐标,用来计算下次鼠标移动距离。鼠标移出图片后将保存了的鼠标位置清空,以防移到另外一张图片时位置计算有误。 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; } } }注释一下,还有很多地方可以优化,自己研究吧。 环境:在模板也中使用Jquery出现小问题大虾们,看看这问题出在哪? firebug+F8 当for .. in遇到Prototype 请问怎样可以在文本框输入式子,然后出现得数? 向iframe里添加style标签 并动态写入Html代码 这样做为什么不行啊 (源创)最近我研究搜索引擎 七 (长长中国人的志气篇) 如何创造搜索引擎的新时代 请教:提交等待的问题!!急~~~~ 一个奇怪的JS错误 怎么用JavaScript获得本机的IP[老大哥们快来帮帮忙~~~~~急] radio非要放在form里才行吗 正则表达式匹配的问题 求教加载更多的效果着呢么做啊
<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>随便写了下,不知道能看懂不。
换成
var mh = (h-ph)/ph,mw = (w-pw)/pw;效果更好点。
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;
}
}
}注释一下,还有很多地方可以优化,自己研究吧。