jquery 实现鼠标划过图片出现放大镜效果

2018-07-20    来源:open-open

容器云强势上线!快速搭建集群,上万Linux镜像随意使用
/*滑过图片出现放大镜效果*/
$(function () {
    $(".content_right .prolist ul li").each(function (index) {
        var position = $(this).position();
        var li_left = position.left;
        var li_top = position.top;
        var img_width = $(this).find("img").width();
        var img_height = $(this).find("img").height();
        var spanHtml = '<span style="position: absolute; top: ' + li_top + 'px; left: ' + li_left + 'px; width:' + img_width + 'px; height: ' + img_height + 'px; cursor: pointer;" class="imageMask"></span>';
        $(spanHtml).hover(function () {
            $(this).addClass("imageOver");
        }, function () {
            $(this).removeClass("imageOver");
        }).appendTo($(this).find("a"));
    })
})

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:Android获取未安装的APK图标的代码

下一篇:约瑟夫环算法Java实现代码