jQuery产品图片放大镜特效代码下载


jQuery产品图片放大镜特效代码下载
jQuery产品图片放大镜特效代码下载以及产品图片、放大镜等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代码

<div class="box">
    <div> &nbsp&nbsp放大<span class="multiple">1</span>倍</div>
    <button style="width: 50px;height: 30px;background: skyblue;outline: none;" class="btn1">+</button>
    <button style="width: 50px;height: 30px;background: skyblue;outline: none;" class="btn2">-</button>
</div>
<div id="outBox">
    <div class="leftBox">
        <div class="normalBox w">
            <div class="w" id="n"><img src="img/normal1.jpg"></div>
            <div class="w"><img src="img/normal2.jpg"></div>
            <div class="w"><img src="img/normal3.jpg"></div>
            <div class="w"><img src="img/normal4.jpg"></div>
            <div class="w"><img src="img/normal5.jpg"></div>
            <div class="moveBox"></div>
        </div>
        <div class="botBox">
            <ul>
                <li class="bord"><img src="img/small1.jpg"></li>
                <li><img src="img/small2.jpg"></li>
                <li><img src="img/small3.jpg"></li>
                <li><img src="img/small4.jpg"></li>
                <li><img src="img/small5.jpg"></li>
            </ul>
        </div>
    </div>
    <div class="magBox">
        <ul>
            <li class="m"><img src="img/normal1.jpg"></li>
            <li><img src="img/normal2.jpg"></li>
            <li><img src="img/normal3.jpg"></li>
            <li><img src="img/normal4.jpg"></li>
            <li><img src="img/normal5.jpg"></li>
        </ul>
    </div>
</div>
<script>
    $(function () {
        var sdBoxW = $('.moveBox').css('width');
        sdBoxW = parseInt(sdBoxW);//移动层的宽度
        var magBoxW = $('.magBox').css('width');
        magBoxW = parseInt(magBoxW);//图片放大层的宽度
        var normalBoxW = $('.normalBox').css('width');
        normalBoxW = parseInt(normalBoxW);//事件绑定层的宽度
        var num = 0;//存放下标
        //找出放大图片的比例(核心)
        var scale = magBoxW/sdBoxW;
        //移入normalBox盒子
        $('.normalBox').hover(function () {
            $('.moveBox').css('display','block');
            $('.magBox').css('display','block');
        },function () {
            $('.moveBox').css('display','none');
            $('.magBox').css('display','none');
        });
        //3、移入leftBox层
        $('.leftBox').mouseover(function () {
            //给放大的图片和图片层设置宽度;
            $('.magBox ul li img').css('width',scale*normalBoxW+'px');
            $('.magBox ul li').css({'width':scale*normalBoxW+'px','height':scale*normalBoxW+'px'})
        });
        //4、设置放大倍数
        var n = 1;
        function sty() {
            $('.moveBox').css({'width':200/n+'px','height':200/n+'px'});
            $('.multiple').html(n);
            scale = magBoxW/(sdBoxW/n);
        }
        $('.btn1').click(function () {
            n ++;
           sty()
        });
        $('.btn2').click(function () {
            if (n==1){
                return;
            } else {
                n --;
                sty()
            }
        }) ;
        //1、移入缩小图关联
        $('.botBox ul li').attr('index',function (i,e) {
            return i;
        });
        $('.botBox ul li').mouseover(function () {
            if ($(this).attr('class')=='bord'){
                return;//跳过第一个
            }else{
                $(this).attr('class','bord').siblings().removeAttr('class');
                var index = $(this).attr('index');
                //联动normal和magBox中的图片
                $('.normalBox .w').eq(index).attr('id','n').siblings().removeAttr('id');
                $('.magBox ul li').eq(index).attr('class','m').siblings().removeAttr('class');
                num = index;
            }
        });
        //2、鼠标在移动层移动
        $('.normalBox').mousemove(function (e) {
             var offset = $(this).offset();
            var X = e.pageX-offset.left-$('.moveBox').width()/2;
            var Y = e.pageY-offset.top-$('.moveBox').height()/2;
            if (X<=0){
                X=0;
            }else if(X>$(this).width()-$('.moveBox').width()){
                X = $(this).width()-$('.moveBox').width();
            }
            if (Y<=0){
                Y=0;
            }else if(Y>$(this).height()-$('.moveBox').height()){
                Y = $(this).height()-$('.moveBox').height();
            }
            $('.moveBox').css('left',X+'px');
            $('.moveBox').css('top',Y+'px');
            $('.magBox ul li').eq(num).css('left',-X*scale+'px');
            $('.magBox ul li').eq(num).css('top',-Y*scale+'px');
        });
    })
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章