jQery放大镜效果

Posted Q_zhangsan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQery放大镜效果相关的知识，希望对你有一定的参考价值。

简单2:1的放大

<!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>

 

以上是关于jQery放大镜效果的主要内容，如果未能解决你的问题，请参考以下文章

jQery简单Tab选项卡效果

jqery实现一个图标上下滑动效果

jQery的链式操作和商城简易导航栏

表格可拖拉列改变列大小（使用的时候将youElement全部替换称你要添加这个效果的元素，需是jqery的选择器格式，如：$("table th/td")）

前端必学——用JavaScript实现电商图片放大镜效果（附代码）

原生js--实现放大镜效果