js+css鼠标移动图片放大
网上找到都不太满意。效果像百度图片搜索那样，放在图片上，图片会放大，图片下放还有一些其他信息。哪位写段代码，不甚感激。是这种鼠标移上去，会放大。效果见百度的图片，不要点击...
网上找到都不太满意。效果像百度图片搜索那样，放在图片上，图片会放大，图片下放还有一些其他信息。哪位写段代码，不甚感激。
是这种鼠标移上去，会放大。
效果见百度的图片，不要点击，鼠标放上去的效果
jquery.hoverpulse这个插件可以实现我想的部分功能，不过我是新手，对JS根本看不懂。不知道要怎么修改，才能达到弹出来的时候，不仅可以显示图片，也需要显示一些图片的介绍之类的信息。哪位大哥可以告诉一下如何修改！ 展开
是这种鼠标移上去，会放大。
效果见百度的图片，不要点击，鼠标放上去的效果
jquery.hoverpulse这个插件可以实现我想的部分功能，不过我是新手，对JS根本看不懂。不知道要怎么修改，才能达到弹出来的时候，不仅可以显示图片，也需要显示一些图片的介绍之类的信息。哪位大哥可以告诉一下如何修改！ 展开
3个回答
展开全部
<script>
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>
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封装好的， 不过只有图片的弹出，没有加相关的说明！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
思路：
鼠标移动事件时，需要计算当前块和放大块的比例。这样就实现看大图了。
下面是代码，仅供参考：
<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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
D: 朋友， 不管代码咋样，这个效果100%是度娘抄google的。山中无google，百度称霸王。
更多追问追答
追问
确实是谷歌的东西！朋友知道这种代码的要如何实现吗？
追答
js,jq什么的其实不复杂，既然你已经找到效果比较适合的jquery插件了，那么剩下的跟js，jq应该联系不大啦，只要把jq代码里hover时要弹出的html代码修改下就行，把改成，再往里面加 跟 什么什么的。我可以帮你看看js代码 :|
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
