封装jquery放大镜

最新推荐文章于 2022-04-24 08:59:01 发布

document_ljt

最新推荐文章于 2022-04-24 08:59:01 发布

阅读量404

点赞数

CC 4.0 BY-SA版权

文章标签： jquery封装放大镜

本文链接：https://blog.youkuaiyun.com/document_ljt/article/details/78983664

/**
 * Created by Administrator on 2018/1/4 0004.
 */
/**
 * Created by Administrator on 2018/1/4.
 */
/*  放大镜*/

一个大盒子id= Box 中放一个小盒子id= smallBox （放一张图片） 一个大盒子id=bigBox（放一张图片）

ul 用来小图片切换


(function($){
    $.fn.fangdajing =function() {
        var smallBox = this.find('#smallBox');
        var bigBox = this.find('#bigBox');
        var smImg = this.find('#smImg');
        var Li = this.find('#smImg').find('li');
        /*var Height=*/
        var img = Li.find('img');
        /*划过切换图片*/
        Li.hover(function () {
            $(this).addClass('on').siblings().removeClass('on');
            var a = $(this).find('img').attr('src');
            smallBox.find('img').attr('src',a);
            bigBox.find('img').attr('src',a);
        });
        /*放大镜
         小盒子*/
        smallBox.append('<div></div>');
        var Width=smallBox.find('div').width()+2;
        var Height=smallBox.find('div').height()+2;
        smallBox.mousemove(function (e) {
            bigBox.css('display','block');
            var top = smallBox.get(0).getBoundingClientRect().top;
            var left = smallBox.get(0).getBoundingClientRect().left;
           /* 绝对值*/
            var smallx = e.clientX-left;
            var smally = e.clientY-top;
            var x = smallx-Width/2;
            var y = smally-Height/2;
            console.log(x);
            console.log(y);
            var x1=x*2;
            var y1=y*2;
            /*框位移不出去*/
            if (x<0){
                x=0;
                x1=0
            }else if (x>smallBox.width()-Width){
                x=smallBox.width()-Width;
                x1=smallBox.width();
            }
            if (y<0){
                y=0;
                y1=0
            }else if (y>smallBox.height()-Height){
                y=smallBox.height()-Height;
                y1=smallBox.height();
            }
            /*框移除消失*/
            smallBox.find('div').css({left:x+ 'px',top:y+'px'});
            bigBox.find('img').css({left:-x1 +'px',top:-y1+'px'})
        }).mouseout(function(){
            bigBox.css('display','none');
        });
    }
})(jQuery);
$("#Box").fangdajing();