投稿 搜索

热门文章

当前位置: 站长天下 / 图片相册背景 / jQuery实现鼠标悬停查看大图特效

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-07-05
    阅读:

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

简要教程

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>