亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

圖片放大鏡效果

原創(chuàng) 2018-11-27 09:40:03 248
摘要:<!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     <title>仿天貓商城圖片放大鏡效果</t
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>仿天貓商城圖片放大鏡效果</title> 
        <link rel="shortcut icon"  href="static/images/logo.png" type="image/x-icon" />
        <style type="text/css">
            *{ margin:0;padding:0; }
            #normal{width: 450px;height: 450px;border: 1px solid #000;position: fixed;top: 20px;left: 20px;}
            #normal img{width: 100%;height: 100%;}
            #show{width: 150px;height: 150px;background: #754930;opacity: 0.4;position: absolute;display: none;}
            #big{width: 450px;height: 450px;border: 1px solid #000;position: relative;left: 520px;top: 20px;overflow: hidden;}
            #big>img{position: absolute;width: 1350px;height: 1350px;}
        </style>
        <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/5.jpg">
            <div id="show"></div>
        </div>
        <div id="big">
            <img src="static/images/5.jpg">
        </div>

    </body>
</html>

```javascript

//跟隨鼠標(biāo)移動(dòng)
$(this).mousemove(function(yd){
                       $('#show').css({
                        'left':yd.pageX-$('#show').width()/2,
                        'top':yd.pageY-$('#show').height()/2
                       })
                       })
$('#normal').mousemove(function(e){
//鼠標(biāo)位置
                        var x=e.clientx
                        var y=e.clienty
//偏移位置
                        var dx=$('#normal').offset().left;
                        var dy=$('#normal').offset().top;
//相對(duì)位置
                        var sx=x-dx
                        var sy=y-dy
//寬高
                        var mw=$('#show').width()/2
                        var mh=$('#show').height()/2
//小框跟著移動(dòng)的距離
                        $('#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'
                        })
                        })

```

批改老師:滅絕師太批改時(shí)間:2018-11-27 09:59:30
老師總結(jié):你這個(gè)作業(yè)速度,有點(diǎn)快的離譜啊,快是好事情,知識(shí)點(diǎn)掌握了么?

發(fā)布手記

熱門詞條