列表展示图片,鼠标滑动 显示大图 

1.效果图

 

 2.创建显示框

<style>
    img[src=""],img:not([src]){
        opacity:0;
    }
</style>
<body>
<!---创建悬浮框-->
<img id="s" src="" style="width: 300px; height: 300px;">
</body>

3.js代码

<script type="text/javascript">
    function formatImg(val, row) {
        var  img1=row.couponImage;//联网获取图片路径
        if (row.couponImage !== ""  ){

            return "<img  style='width:60px; height:50px;margin-left:3px;' onmouseover=\"on(\'" + img1 + "\')\" onmouseout=\"off()\" src='images/"+row.couponImage+"'/>";
            // return "优惠券预览" ;
        }
    }
    function formatErImg(val, row) {
      var  img2=row.couponErImg;
        if (row.couponErImg !== ""){

            return "<img  style='width:60px; height:50px;margin-left:3px;' onmouseover=\"on(\'" + img2 + "\')\" onmouseout=\"off()\"  src='images/"+row.couponErImg+"'/>";
            // return "优惠券预览" ;
        }
    }
//     function showImg(imgUrl) {
// console.log(imgUrl);
//     }
    /**
     * 显示图片详情，鼠标移入时执行
     */
    function on(productImg) {
        if (productImg == "undefined" || productImg == null || productImg == "") {
            return;
        }
        //给图片容器赋值路径
        $("#s").attr("src",'images/'+productImg);
        $(document).mousemove(function(e) {
            $("#s").css("position", "absolute").css("left", e.pageX+1+"px").css("top", e.pageY+1+"px");
        })
    }

    /**
     * 关闭图片，当鼠标移出时执行
     */
    function off() {
        $("#s").attr("src", "");
        $(document).mousemove(function(e) {
            $("#s").css("position", "absolute").css("left", "-400px").css("top", "-400px");
        })
    }


</script>


 


 






            

            
posted @ 
2021-03-16 15:13 
EugeniaGao 
阅读(131) 
评论(0) 
编辑 
收藏 
举报