jQery放大鏡效果

時間 2019-11-22
標籤 jqery 放大鏡效果简体版
原文原文鏈接
簡單2:1的放大javascript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>放大鏡效果</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
        }
            #pic{
                width: 200px;
                height: 160px;
                border: 3px solid #ccc;
                position: relative;
                float: left;
            }
            #pic img{
                width: 200px;
                height: 160px;
            }
            .mirror{
                width: 100px;
                height: 80px;
                background: gold;
                opacity: .5;
                position: absolute;
                left: 0;
                top: 0;
                display: none;
            }
            #bigbox{
                width: 200px;
                height: 160px;
                float: left;
                border: 3px solid #ccc;
                overflow: hidden;
                position: relative;
            }
            #bigbox img{
                position: absolute;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                    $('#pic').on({
                        mousemove:function(e){
                            $('.mirror').css('display','block')
                            //獲取當前鼠標按下的位置相對於box的偏移值
                            var _left = e.clientX - $('#pic').offset().left - $('.mirror').width()/2;
                            var _top = e.clientY - $('#pic').offset().top - $('.mirror').height()/2;
                            //判斷不能超出邊界
                            if(_left<0){
                                _left = 0
                            }
                            if(_left>=$('#pic').width() - $('.mirror').width()){
                                _left=$('#pic').width() - $('.mirror').width()
                            }
                            if(_top<0){
                                _top = 0
                            }
                            if(_top>=$('#pic').height() - $('.mirror').height()){
                                _top = $('#pic').height() - $('.mirror').height()
                            }
                            //在box中移動鼠標，改變放大鏡的位置
                            ($('.mirror')).css({'left':_left,'top':_top})
                            //根據放大鏡的位置，算出右側大圖應該顯示的部分
                            $('#img1').css({'left':-$('.mirror').position().left * 2,'top':-$('.mirror').position().top * 2})
                        },
                        //鼠標移出後，放大鏡隱藏
                        mouseleave:function(){
                            $('.mirror').css('display','none')
                            
                        }
                    })    
            })
        </script>
    </head>
    <body>
        <div id="box">
            <div id="pic">
                <img src="img/6.jpg"/>
                <p class="mirror"></p>
            </div>
            <div id="bigbox">
                <img id="img1" src="img/6.jpg"/>
            </div>
        </div>
    </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。