js+css鼠标移动图片放大
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js+css鼠标移动图片放大相关的知识，希望对你有一定的参考价值。
网上找到都不太满意。效果像百度图片搜索那样，放在图片上，图片会放大，图片下放还有一些其他信息。哪位写段代码，不甚感激。
是这种鼠标移上去，会放大。
效果见百度的图片，不要点击，鼠标放上去的效果
jquery.hoverpulse这个插件可以实现我想的部分功能，不过我是新手，对JS根本看不懂。不知道要怎么修改，才能达到弹出来的时候，不仅可以显示图片，也需要显示一些图片的介绍之类的信息。哪位大哥可以告诉一下如何修改！
function showImg(event,imgId)
var x = document.body.scrollLeft+event.clientX;
var y = y=document.body.scrollTop+event.clientY;
document.getElementById(imgId).style.display="block";
document.getElementById(imgId).style.left=x;
document.getElementById(imgId).style.top=y;
function hiddenImg(imgId)
document.getElementById(imgId).style.display="none";
</script>
-----------以上放在HEAD里-----------
-----------以下为图片代码-----------
<img src="images/ad-03.jpg" width="140" height="90" border="0" onMouseOver="javascript:showImg(event,'asaiblog')" onMouseOut="javascript:hiddenImg('asaiblog')"/></a>
<div id="asaiblog"><div style="padding-bottom:5px; border-bottom:1px #000000 dashed; font-size:15px; color:#990000; font-weight:bold;">公司名称</div>
<img src="images/ad-04.jpg" />
<div style="font-size:12px; line-height:20px;">相关说明：</div>
</div>追问
不是这种效果，鼠标点上去放大的网上代码好像挺多的， 我已经补充了图片了。效果跟你这种不太一样!先谢谢你的回答！我之前网上找到一种JS封装好的， 不过只有图片的弹出，没有加相关的说明！
参考技术A思路：
鼠标移动事件时，需要计算当前块和放大块的比例。这样就实现看大图了。
下面是代码，仅供参考：
<style>* margin:0; padding:0;
.div1, .div2 position:relative; overflow:hidden; float:left; width:310px; height:310px; margin:10px;
.div1 background:url(images/m1.jpg) no-repeat;
.div1 span display:none; position:absolute; top:0; left:0; width:100px; height:100px; background:yellow; opacity:0.5;
.div2 display:none;
.div2 img position:absolute; top:0; left:0;
</style>
<script src="jquery-1.7.2.js"></script>
<script>
$(function ()
var oDiv1=$('.div1');
var oDiv2=$('.div2');
var oSpan=$('.div1 span');
var oImg=$('.div2 img');
oDiv1.hover(function ()
oDiv2.show();
oSpan.show();
, function ()
oDiv2.hide();
oSpan.hide();
);
var maxLeft=oDiv1.width()-oSpan.width();
var maxTop=oDiv1.height()-oSpan.height();
oDiv1.mousemove(function (ev)
var left=ev.clientX-oSpan.parent().offset().left-oSpan.width()/2;
var top=ev.clientY-oSpan.parent().offset().top-oSpan.height()/2;
if (left < 0)
left=0;
else if (left > maxLeft)
left=maxLeft;
if (top < 0)
top=0;
else if (top > maxTop)
top=maxTop;
oSpan.css('left', left+'px');
oSpan.css('top', top+'px');
// 算比例
var a=left;
var b=maxLeft;
var b2=oImg.width()-oDiv2.width();
var a2=a/b*b2;
oImg.css('left', -a2+'px');
);
);
</script>
</head>
<body>
<div class="div1">
<span></span>
</div>
<div class="div2">
<img src="images/b1.jpg" alt="" />
</div>
</body> 参考技术B D: 朋友， 不管代码咋样，这个效果100%是度娘抄google的。山中无google，百度称霸王。追问
确实是谷歌的东西！朋友知道这种代码的要如何实现吗？
追答js,jq什么的其实不复杂，既然你已经找到效果比较适合的jquery插件了，那么剩下的跟js，jq应该联系不大啦，只要把jq代码里hover时要弹出的html代码修改下就行，把改成，再往里面加 跟 什么什么的。我可以帮你看看js代码 :|
追问我是利用jquery.hoverpulse.js调用，
我改了下hoverpulse,发给你好啦。
追问好的。谢谢！发我邮箱地址吧。26842420@qq.com
追答已发
本回答被提问者采纳js放大镜特效
原理分析：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置。（同时，当鼠标在小图片上移动时，右侧大图片往相反的方向移动。）
放大镜特效设计：
①页面元素：小图片，大图片以及盛放图片的容器
②事件捕获：onmouseover(当鼠标指针移动到指定对象上时发生)、onmouseout(当鼠标指针移除指定对象时发生)、onmousemove（当鼠标指针移动时发生）
③技术难点：offsetLeft（相对于父元素的左位移）、offsetTop (相对于父元素的顶部位移)
注：offsetLeft和style.left的区别：a. 后者返回字符串（10px），前者返回数值（10）；
b. 后者是可读写的，前者是只读的。所以要改变元素的位置要用style.left；
c. style.left需要提前定义，否则取到的是空值；
d. offestLeft只针对html中设置的值有效，在css中设置的无法识别。
offsetWidth/offsetHeight 元素所展现出的宽高
event.clientX/event.clientY 元素相对于页面的横纵坐标
制作放大镜特效所需的计算
重点：如何让小图片上的放大镜和大图片同时移动。
公式：小img宽/大img宽 = 放大镜宽/大图片可视区域宽 = 小图片左移/大图片右移
其中，小img宽和大img宽已知，放大镜宽和可视区域宽已知，通过鼠标左移可以求得大图片右移，确定大图片位置。
开发放大镜特效：
小图片左位移/(大img宽-小img宽) = ？/（可视区域宽 - 放大镜宽）
兼容性问题：
因为在IE浏览器中，容易中放入图片或者span等的时候，但是当鼠标移入图片时，会被认为是已经移除了容器，而接下来紧接着又触发了onmouseover事件，因此造成了放大镜特效的反复闪烁。
解决： 在原有的图片上覆盖一层背景色透为0的隔离层，之后将所有绑定在原先图片容器上的事件绑定到该隔离层。
以上是关于js+css鼠标移动图片放大的主要内容，如果未能解决你的问题，请参考以下文章