jquery 實現鼠標劃過圖片出現放大鏡效果

cn55 9年前發布 | 2K 次閱讀 JavaScript 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"></span>';
        $(spanHtml).hover(function () {
            $(this).addClass("imageOver");
        }, function () {
            $(this).removeClass("imageOver");
        }).appendTo($(this).find("a"));
    })
})

 本文由用戶 cn55 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!