商品移上放大效果

原创 2019-02-26 15:46:52 235
摘要:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>仿天猫商城图片放大镜效果</title>         <link rel=&qu

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>仿天猫商城图片放大镜效果</title> 

        <link rel="shortcut icon"  href="static/images/logo.png" type="image/x-icon" />

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

        <script type="text/javascript" src="static/js/jquery.js"></script> 

        <script type="text/javascript">

        $(function() {

        $('#big').hide()

        $('#normal').mouseover(function(){

        $('#show').show()

        $('#big').show()

        $(this).mousemove(function(yd){

                   $('#show').css({

                    'left':yd.pageX-$('#show').width()/2,

                    'top':yd.pageY-$('#show').height()/2


                   })

                   })

        $('#normal').mousemove(function(e){

        var x=e.clientx

        var y=e.clienty

        var dx=$('#normal').offset().left;

        var dy=$('#normal').offset().top;

        var sx=x-dx

        var sy=y-dy

        var mw=$('#show').width()/2

        var mh=$('#show').height()/2

        $('#show').css({left:sx-mw+'px',top:sy-mh+'px'})

        var lw=$('#show').position().left;

        var lh=$('#show').position().top;


        var maxW=$('#normal').width()-$('#show').width()

        var maxH=$('#normal').height()-$('#show').height()

        if(lw<=0){$('#show').css('left','0px')}

        if(lw>=maxW){$('#show').css('left',maxW+'px')}

        if(lh<=0){$('#show').css('top','0px')}

        if(lh>=maxH){$('#show').css('top',maxH+'px')}

        var lw=$('#show').position().left;

        var lh=$('#show').position().top;



        var newX=lw*3

            var newY=lh*3

            $('#big').find('img').css({

            'left':-newX+'px',

            'top':-newY+'px'

            })




        })

        })

            $('#normal').mouseleave(function(){

            $('#show').hide()

            $('#big').hide()


            })


        })

        </script>

    </head>

    <body>

    <div id="normal">

    <img src="static/images/7.jpg">

    <div id="show"></div>

    </div>

    <div id="big">

    <img src="static/images/7.jpg">   

    </div>


    </body>

</html>

RCV(A6]1TIKVO3`FE)AGX(8.png

批改老师:查无此人批改时间:2019-02-26 16:08:55
老师总结:写的不错,以后写代码要多加点注释,方便解读,养成好习惯。继续加油

发布手记

热门词条