jQuery实现鼠标悬停查看大图特效

jQuery实现鼠标悬停查看大图特效

jQuery鼠标悬停查看大图,移入图片将图片放大,解决图片在角落时错位的问题。

使用方法
在页面引入jquery.min.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

文件信息:

    1

    发表评论