jQuery鼠标悬停查看大图,移入图片将图片放大,解决图片在角落时错位的问题。
使用方法
在页面引入jquery.min.js文件
<script src="js/jquery.min.js"></script>
$(function(){ $(".container .container-item img").hover(function(){ var bigUrl = $(this).attr("bigUrl"); $(this).parents(".container-item").append("<div id='pic'><img src='"+bigUrl+"' id='pic1'></div>"); $(".container .container-item img").mousemove(function(e){ var wH = document.documentElement.clientHeight var wW = document.documentElement.clientWidth var imgW =$("#pic1").width() var imgH =$("#pic1").height() var cssArr = {"top":"","left":"","bottom":"","right":""} if(e.clientX+imgW > wW){ if(wW - e.clientX < imgW){ cssArr.left = (e.clientX-imgW-10)+"px";; }else{ cssArr.right = 0; } }else{ cssArr.left = (e.clientX+10)+"px"; } if(e.clientY+imgH > wH){ cssArr.bottom = 0; }else{ cssArr.top = (e.clientY+10)+"px"; } console.log($("#pic1").height(),wH) console.log(cssArr) $("#pic").css(cssArr).fadeIn("fast"); }); },function(){ $("#pic").remove(); }); });
HTML结构
<div class="container"> <div class="container-item"> <img src="img/1.jpg" bigUrl="img/1.jpg" alt=""> </div> <div class="container-item"> <img src="img/2.jpg" bigUrl="img/2.jpg" alt=""> </div> <div class="container-item"> <img src="img/3.jpg" bigUrl="img/3.jpg" alt=""> </div> <div class="container-item"> <img src="img/4.jpg" bigUrl="img/4.jpg" alt=""> </div> <div class="container-item"> <img src="img/5.jpg" bigUrl="img/5.jpg" alt=""> </div> <div class="container-item"> <img src="img/6.jpg" bigUrl="img/6.jpg" alt=""> </div> </div>