简单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放大镜效果的更多相关文章

  1. 关于jQuery中实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  2. 利用JS实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...

  3. 【JavaScript】放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  5. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  6. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  7. jquery放大镜效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. 【HTML5】Canvas 实现放大镜效果

    图片放大镜 效果 在线演示    源码 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 <canvas id=&qu ...

  9. 照着别人的demo自己试着做了个放大镜效果

    原理: A:放大镜   B:小图片 C:大图片可视区域 D:大图片 鼠标的位置应该在放大镜的中央,所以鼠标位置为:clientX=A.offsetLeft()+B.offsetLeft+1/2*A.o ...

随机推荐

  1. 根据路径获得文件名以及Aspose.Cells.dll操作excel 以及使用iTextSharp.text.pdf.PdfReader.dll对PDF的操作

    string result = Regex.Match(str,@"[^\\]+$").Value;//正则表达式 this.listBox1.Items.Add(Path.Get ...

  2. JS制作的简单的三级及联

    前台: <form id="form1" runat="server"> <div> 省 <select id="Pro ...

  3. Cocos2d-x 关于在iOS平台真机测试的一些注意

    下面简单记录一下在最近cocos2d-x项目在iOS平台真机测试和模拟器测试中遇到的一些要注意的地方(使用ipod): 1.图片大小 游戏中基本上都是会用到图片,那么在使用图片的时候要特别注意图片的s ...

  4. HDU3635Dragon Balls（并查集）

    http://acm.hdu.edu.cn/showproblem.php?pid=3635 题目意思是说n个球在n个城市. 每次操作把编号i的球所在的城市的所有的求全部一道另一城市B 每次询问访问编 ...

  5. C#： 方法的默认参数

    大家都知道在C++中,我们可以为方法的参数指定一个默认值,像这样: void foo(int i = 100); 当我们以这种形式调用方法的时候: foo(); 实际上参数i被赋于了默认值,所以相当于 ...

  6. C#下利用高精度计时器进行计时操作

    简介 精确的时间计量方法在某些应用程序中是非常重要的.常用的 Windows API 方法 GetTickCount() 返回系统启动后经过的毫秒数.另一方面,GetTickCount() 函数仅有 ...

  7. iOS版本检测与版本升级

    14年苹果官方要求所有的APP不能出现 “当前版本”字样,是因为从iOS8系统开始,你可以在设置里面设置在WiFi情况下,自动更新安装的APP.此功能大大方便了用户,但是一些用户没有开 启此项功能,因 ...

  8. 选择一本C++教材

    从上周开始写如何使用C++编程以后,我发现这不是一个容易的题目.因此,我认真的看了一下C++相关的材料,发现现在为止,比较好的材料还是这些: 初学者: Accelerated C++,这是一本学习起来 ...

  9. EF小节

    EF学习笔记——生成自定义实体类 http://blog.csdn.net/leftfist/article/details/24889819 --工具: 1.entity developer 2.D ...

  10. TExternalThread TThread -- Delphi -- Cannot terminate an externally created thread ?

    Cannot terminate an externally created thread ? The VCL has a new TExternalThread class which derive ...