<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>放大镜</title>

    <style>

        *{margin:;padding:;list-style: none}

        #div1{width:200px;height:200px;position:absolute;left:100px;border:1px solid #;top:100px;border:1px solid #;}

        #span1{width:80px;height:80px;background:green;position:absolute;left:;top:;z-index:;opacity:0.4;filter:alpha(opacity:);cursor: all-scroll;display:none;}

        #div1 img{width:200px;height:200px;}

        #div2{width:400px;height:400px;overflow: hidden;position:absolute;left:302px;top:100px;border:1px solid #;display:none;}

        #div2 img{width:600px;hgeight:600px;position:absolute;}

    </style>

    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

</head>

<body>

    <div id="div1">

        <span id="span1"></span>

        <img src="http://img5.imgtn.bdimg.com/it/u=96369774,1200533339&fm=206&gp=0.jpg" alt="">

    </div>

    <div id="div2">

        <img src="http://img5.imgtn.bdimg.com/it/u=96369774,1200533339&fm=206&gp=0.jpg" alt="" id="img1">

    </div>

</body>

<script>

    $(function(){

        var oDiv1=$('#div1');

        var oDiv2=$('#div2');

        var oSpan=$('#span1');

        var oImg=$('#img1');

        oDiv1.mouseover(function(){

            oSpan.css({display:'block'});

            oDiv2.css({display:'block'});

        });

        oDiv1.mouseout(function(){

            oSpan.css({display:'none'});

            oDiv2.css({display:'none'});

        });

        oDiv1.mousemove(function(ev){

            var l=ev.clientX-oDiv1.offset().left-oSpan.outerWidth()/;

            var t=ev.clientY-oDiv1.offset().top-oSpan.outerHeight()/;

            if(l<)l=;

            if(t<)t=;

            if(l>oDiv1.outerWidth()-oSpan.outerWidth())l=oDiv1.outerWidth()-oSpan.outerWidth();

            if(t>oDiv1.outerHeight()-oSpan.outerHeight())t=oDiv1.outerHeight()-oSpan.outerHeight();

            oSpan.css({

                left:l,

                top:t

            });

            var scaleX=l/(oDiv1.outerWidth()-oSpan.outerWidth());

            var scaleY=t/(oDiv1.outerHeight()-oSpan.outerHeight());

            var kL=oImg.outerWidth()-oDiv2.outerWidth();

            var kT=oImg.outerHeight()-oDiv2.outerHeight();

            oImg.css({

                left:-kL*scaleX,

                top:-kT*scaleY

            })

        })

    })

</script>

</html>

Jquery版放大镜效果的更多相关文章

  1. jQuery实现放大镜效果

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

  2. 使用jquery实现放大镜效果

    原文:使用jquery实现放大镜效果 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整 ...

  3. js、jquery实现放大镜效果

    在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...

  4. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  5. 用JavaScript中jQuery编写放大镜效果

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

  6. 用jquery实现放大镜效果

    ----css代码--- *{margin:0;padding:0;} .showimg{position:relative;width:450px;height:420px;border:1px s ...

  7. jquery版手风琴效果

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

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

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

  9. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

随机推荐

  1. POJ 3734 Blocks （线性递推）

    定义ai表示红色和绿色方块中方块数为偶数的颜色有i个,i = 0,1,2. aij表示刷到第j个方块时的方案数,这是一个线性递推关系. 可以构造递推矩阵A,用矩阵快速幂求解. /*********** ...

  2. 【洛谷3275】[SCOI2011] 糖果（差分约束系统入门题）

    点此看题面 大致题意: 有\(N\)个小朋友,要求每个人都得到糖果,且每个人的糖果总数满足一定的关系式,请你求出至少共分给小朋友们多少糖果. 关系式的转换 首先,我们可以将题目中给定的式子进行转换: ...

  3. 五、react中父子组件间如何传值

    1.父组件向子组件传递数据:父组件绑定属性值传给子组件,子组件通过this.props()接受. 2.子组件向父组件传递数据:子组件绑定一个方法,方法中通过this.props.父组件方法名(参数)传 ...

  4. 2017.12.25 Java中面向对象思想的深刻理解

    今日内容介绍 1.面向对象思想 2.类与对象的关系 3.局部变量和成员变量的关系 4.封装思想 5.private,this关键字 6.随机点名器 01面向对象和面向过程的思想 * A: 面向过程与面 ...

  5. macOS如何正确驱动集成显卡HDMI（包括视频和音频）

    聊聊如何正确驱动集成显卡HDMI(包括视频和音频)必备条件:1.必须使用AppleHDA驱动声卡(仿冒.clover.applealc都可以的),使用voodoo驱动声卡应该不行的.2.dsdt或者s ...

  6. Linux Shell 几个特殊符号命令 & 、&& 、 ||

    & 放在启动参数后面表示设置此进程为后台进程 默认情况下,进程是前台进程,这时就把Shell给占据了,我们无法进行其他操作,对于那些没有交互的进程,很多时候,我们希望将其在后台启动,可以在启动 ...

  7. 【Python学习之八】ORM

    ORM 什么是ORM呢? ORM全称是:Object-Relational Mapping.即对象-关系映射,就是把关系数据库的一行映射为一个对象,也就是一个类对应一个表.这样,写代码更简单,不用直接 ...

  8. 与SVN相关的程序的调试问题【转】

    解决eclipse中出现Resource is out of sync with the file system问题. 分析:有时候因为时间紧迫的原因,所以就没去管它,今天再次遇到它,实在看着不爽,所 ...

  9. JZOJ 5809. 【NOIP2008模拟】数羊

    5809. [NOIP2008模拟]数羊 (File IO): input:sheep.in output:sheep.out Time Limits: 1000 ms  Memory Limits: ...

  10. 用scala的actor并发编程写一个单机版的WorldCount

    前言:最近一段时间比较忙,也是比较懒了吧,好长时间没写博客了,新的一年到来,给自己一个小目标,博客坚持写下去,分享一下这历程!废话不多说,开始正题咯(希望大家喜欢!) 首先这算是一个scala程序的入 ...