jquery 实现鼠标划过图片出现放大镜效果详解编程语言

/*滑过图片出现放大镜效果*/ 
$(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">'; 
        $(spanHtml).hover(function () { 
            $(this).addClass("imageOver"); 
        }, function () { 
            $(this).removeClass("imageOver"); 
        }).appendTo($(this).find("a")); 
    }) 
})

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8648.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论