1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>放大镜</title>
  6.     <style>
  7.         *{margin:;padding:;list-style: none}
  8.         #div1{width:200px;height:200px;position:absolute;left:100px;border:1px solid #;top:100px;border:1px solid #;}
  9.         #span1{width:80px;height:80px;background:green;position:absolute;left:;top:;z-index:;opacity:0.4;filter:alpha(opacity:);cursor: all-scroll;display:none;}
  10.         #div1 img{width:200px;height:200px;}
  11.         #div2{width:400px;height:400px;overflow: hidden;position:absolute;left:302px;top:100px;border:1px solid #;display:none;}
  12.         #div2 img{width:600px;hgeight:600px;position:absolute;}
  13.     </style>
  14.     <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
  15. </head>
  16. <body>
  17.     <div id="div1">
  18.         <span id="span1"></span>
  19.         <img src="http://img5.imgtn.bdimg.com/it/u=96369774,1200533339&fm=206&gp=0.jpg" alt="">
  20.     </div>
  21.     <div id="div2">
  22.         <img src="http://img5.imgtn.bdimg.com/it/u=96369774,1200533339&fm=206&gp=0.jpg" alt="" id="img1">
  23.     </div>
  24. </body>
  25. <script>
  26.     $(function(){
  27.         var oDiv1=$('#div1');
  28.         var oDiv2=$('#div2');
  29.         var oSpan=$('#span1');
  30.         var oImg=$('#img1');
  31.         oDiv1.mouseover(function(){
  32.             oSpan.css({display:'block'});
  33.             oDiv2.css({display:'block'});
  34.         });
  35.         oDiv1.mouseout(function(){
  36.             oSpan.css({display:'none'});
  37.             oDiv2.css({display:'none'});
  38.         });
  39.         oDiv1.mousemove(function(ev){
  40.             var l=ev.clientX-oDiv1.offset().left-oSpan.outerWidth()/;
  41.             var t=ev.clientY-oDiv1.offset().top-oSpan.outerHeight()/;
  42.             if(l<)l=;
  43.             if(t<)t=;
  44.             if(l>oDiv1.outerWidth()-oSpan.outerWidth())l=oDiv1.outerWidth()-oSpan.outerWidth();
  45.             if(t>oDiv1.outerHeight()-oSpan.outerHeight())t=oDiv1.outerHeight()-oSpan.outerHeight();
  46.             oSpan.css({
  47.                 left:l,
  48.                 top:t
  49.             });
  50.             var scaleX=l/(oDiv1.outerWidth()-oSpan.outerWidth());
  51.             var scaleY=t/(oDiv1.outerHeight()-oSpan.outerHeight());
  52.             var kL=oImg.outerWidth()-oDiv2.outerWidth();
  53.             var kT=oImg.outerHeight()-oDiv2.outerHeight();
  54.  
  55.             oImg.css({
  56.                 left:-kL*scaleX,
  57.                 top:-kT*scaleY
  58.             })
  59.         })
  60.     })
  61. </script>
  62. </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. 【BZOJ1562】[NOI2009] 变换序列（匈牙利算法）

    点此看题面 大致题意: 给你一个长度为\(n\)的序列\(D\),让你找到一个字典序最小的\(n\)的排列\(T\),满足\(D_i=min(|T_i-i|,n-|T_i-i|)\). 建图 我想建图 ...

  2. python_17_数据运算

    #//取整除,返回商的整数部分 print(9//2) print(10/3.3) print(10//3.0) #<>与!=都为不等于 #and 与 例(a and b) #or 或 # ...

  3. 在C++类中使用dllimport和dllexport导出,

    在Windows平台下: 您可以使用dllimport或dllexport属性声明C ++类.这些形式意味着导入或导出整个类.以这种方式导出的类称为可导出类. 以下示例定义可导出的类.导出其所有成员函 ...

  4. kubernetes-服务发现service（九）

    service •防止Pod失联    •定义一组Pod的访问策略    •支持ClusterIP,NodePort以及LoadBalancer三种类型    •Service的底层实现主要有ipta ...

  5. vue切换路由时动画

    安装个包 npm i nprogress 直接导入使用 最终的效果就是

  6. 【前端_React】React小书

    参考书籍:React.js 小书

  7. ls显示前几行或后几行数据

    显示前3行数据 ls -l|head -n 3 显示后3行数据 ls -l|tail -n 3

  8. python笔记-list列表的方法

    #!usr/bin/python # -*- coding: utf-8 -*- # 存储5个人的年龄,求他们的平均年龄 age1 = 18 age2 = 15 age3 = 38 age4 = 20 ...

  9. Ajax基础知识梳理

    Ajax用一句话来说就是无须刷新页面即可从服务器取得数据.注意,虽然Ajax翻译过来叫异步JavaScript与XML,但是获得的数据不一定是XML数据,现在服务器端返回的都是JSON格式的文件. 完 ...

  10. 跨域问题和django中实现跨域

    跨域问题 1.同源策略(浏览器的安全功能): 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同 2.CORS跨域资源共享 实现CORS通信的关键是服务器,只要服务器实 ...