-------------------------------------

一,布局

一个大的div,包括下面:

左边是小图div,小图中有可移动的面板.右边是大图div,

学到的内容:fiter 滤镜 这里;  overflow 这里

offsetLeft(HTML DOM 元素对象) 这里

  1. <style type="text/css">
  2.     #div1{
  3.         width: 200px;
  4.         height: 200px;
  5.         padding: 5px;
  6.         border: 1px solid #ccc;
  7.         position: relative;
  8.     }
  9.     #div1 .small_pic{
  10.         width: 200px;
  11.         height: 200px;
  12.         background: #eee;
  13.         position: relative;
  14.     }
  15.     #div1 .float_layer{
  16.         width: 50px;
  17.         height: 50px;
  18.         border:1px solid #;
  19.         background: #fff;
  20.         filter: alpha(opacity:);  //滤镜
  21.         opacity: 0.3;
  22.         position: absolute;
  23.         top: 0px;
  24.         left: 0px;
  25.         display: none;
  26.     }
  27.     #div1 .mark{
  28.         width: %;
  29.         height:%;
  30.         position: absolute;
  31.         z-index: ;
  32.         left: 0px;
  33.         top: 0px;
  34.         background: red;
  35.         filter: alpha(opacity:);
  36.         opacity: ;
  37.     }
  38.     #div1 .big_pic{
  39.         position: absolute;
  40.         top: -1px;
  41.         left: 215px;
  42.         width: 250px;
  43.         height: 250px;
  44.         overflow: hidden;
  45.         border: 2px solid #ccc;
  46.         display: none;
  47.  
  48.     }
  49.     #div1 .big_pic img{
  50.         position: absolute;
  51.         top: 0px;
  52.         left: 0px;
  53.  
  54.     }
  55. </style>
  56. <body>
  57.     <div id="div1">
  58.         <div class="small_pic">
  59.         <span class="mark"></span>
  60.             <span class="float_layer"></span>
  61.             <img src="data:images/small.png" alt="放大图片1">
  62.         </div>
  63.         <div class="big_pic">
  64.             <img src="data:images/big.png" alt="放大图片2">
  65.         </div>
  66.     </div>
  67. </body>

-------------------------------------

二,JS操作-获得元素

写获得class函数

  1. function getByClass(oParent, sClass)
  2. {
  3.     var aEle=oParent.getElementsByTagName('*');
  4.     var aTmp=[];
  5.     var i=0;
  6.  
  7.     for(i=0;i<aEle.length;i++)
  8.     {
  9.         if(aEle[i].className==sClass)
  10.         {
  11.             aTmp.push(aEle[i]);
  12.         }
  13.     }
  14.  
  15.     return aTmp;
  16. }

-------------------------------------

三,控制大图及面板的出现和隐藏.

mouseover mouseout

  1.     oMark.onmouseover=function()
  2.     {
  3.         oFloat.style.display='block';
  4.         oBig.style.display='block';
  5.  
  6.     };
  7.     oMark.onmouseout=function(){
  8.         oFloat.style.display='none';
  9.         oBig.style.display='none';
  10.     };

-------------------------------------

四,让面板随着鼠标移动

mousemove

鼠标位置

下面是确定面板的left

  1. var oEvent=ev||event;
  2.         var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
  3.         var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
  4. oFloat.style.left=l+'px';
  5. oFloat.style.top=t+'px';

-------------------------------------

五,控制面板的可移动范围

判断 超出时强制为某值

  1. if(l<-5)
  2.         {
  3.             l=-5;
  4.         }
  5.         else if (l>oMark.offsetWidth-oFloat.offsetWidth+5){l=oMark.offsetWidth-oFloat.offsetWidth+5;}//参考面板left的确定 这里if(t<-5)
  6.         {
  7.             t=-5;
  8.         }

-------------------------------------

六,大图动起来

按照一个比例

面板在小图里可以移动范围除以小图的宽度,

  1. var tempX=l/(oMark.offsetWidth-oFloat.offsetWidth);
  2.         var tempY=t/(oMark.offsetHeight-oFloat.offsetHeight);
  3.  
  4.         document.title=tempX;
  5.         oImg.style.left=-tempX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
  6.         oImg.style.top=-tempY*(oImg.offsetHeight-oBig.offsetHeight)+'px';

下面是效果图.请把鼠标放在图片上

 -------------------------------------

七,代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>放大镜效果</title>
  6. <style type="text/css">
  7.     #div1{
  8.         width: 200px;
  9.         height: 200px;
  10.         padding: 5px;
  11.         border: 1px solid #ccc;
  12.         position: relative;
  13.     }
  14.     #div1 .small_pic{
  15.         width: 200px;
  16.         height: 200px;
  17.         background: #eee;
  18.         position: relative;
  19.     }
  20.     #div1 .float_layer{
  21.         width: 50px;
  22.         height: 50px;
  23.         border:1px solid #000;
  24.         background: #fff;
  25.         filter: alpha(opacity:30);
  26.         opacity: 0.3;
  27.         position: absolute;
  28.         top: 0px;
  29.         left: 0px;
  30.         display: none;
  31.     }
  32.     #div1 .mark{
  33.         width: 100%;
  34.         height:100%;
  35.         position: absolute;
  36.         z-index: 2;
  37.         left: 0px;
  38.         top: 0px;
  39.         background: red;
  40.         filter: alpha(opacity:0);
  41.         opacity: 0;
  42.     }
  43.     #div1 .big_pic{
  44.         position: absolute;
  45.         top: -1px;
  46.         left: 215px;
  47.         width: 250px;
  48.         height: 250px;
  49.         overflow: hidden;
  50.         border: 2px solid #ccc;
  51.         display: none;
  52.  
  53.     }
  54.     #div1 .big_pic img{
  55.         position: absolute;
  56.         top: 0px;
  57.         left: 0px;
  58.  
  59.     }
  60. </style>
  61. <script type="text/javascript">
  62. function getByClass(oParent, sClass)
  63. {
  64.     var aEle=oParent.getElementsByTagName('*');
  65.     var aTmp=[];
  66.     var i=0;
  67.  
  68.     for(i=0;i<aEle.length;i++)
  69.     {
  70.         if(aEle[i].className==sClass)
  71.         {
  72.             aTmp.push(aEle[i]);
  73.         }
  74.     }
  75.  
  76.     return aTmp;
  77. }
  78.  
  79. window.onload=function ()
  80. {
  81.     var oDiv=document.getElementById('div1');
  82.     var oMark=getByClass(oDiv, 'mark')[0];
  83.     var oFloat=getByClass(oDiv,'float_layer')[0];
  84.     var oBig=getByClass(oDiv,'big_pic')[0];
  85.     var oSmall=getByClass(oDiv,'small_pic')[0];
  86.     var oImg=oBig.getElementsByTagName('img')[0];
  87.     oMark.onmouseover=function()
  88.     {
  89.         oFloat.style.display='block';
  90.         oBig.style.display='block';
  91.  
  92.     };
  93.     oMark.onmouseout=function(){
  94.         oFloat.style.display='none';
  95.         oBig.style.display='none';
  96.     };
  97.     oMark.onmousemove=function(ev){
  98.         var oEvent=ev||event;
  99.         var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
  100.         var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
  101.  
  102.         if(l<-5)
  103.         {
  104.             l=-5;
  105.         }
  106.         else if (l>oMark.offsetWidth-oFloat.offsetWidth+5){l=oMark.offsetWidth-oFloat.offsetWidth+5;}
  107.  
  108.         if(t<-5)
  109.         {
  110.             t=-5;
  111.         }
  112.                 else if (t>oMark.offsetHeight-oFloat.offsetHeight+5){t=oMark.offsetHeight-oFloat.offsetHeight+5;}
  113.  
  114.         oFloat.style.left=l+'px';
  115.         oFloat.style.top=t+'px';
  116.         var tempX=l/(oMark.offsetWidth-oFloat.offsetWidth);
  117.         var tempY=t/(oMark.offsetHeight-oFloat.offsetHeight);
  118.  
  119.         document.title=tempX;
  120.         oImg.style.left=-tempX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
  121.         oImg.style.top=-tempY*(oImg.offsetHeight-oBig.offsetHeight)+'px';
  122.  
  123.     }
  124.  
  125. };
  126.  
  127. </script>
  128. </head>
  129. <body>
  130.     <div id="div1">
  131.         <div class="small_pic">
  132.         <span class="mark"></span>
  133.             <span class="float_layer"></span>
  134.             <img src="data:images/small.png" alt="放大图片1">
  135.         </div>
  136.         <div class="big_pic">
  137.             <img src="data:images/big.png" alt="放大图片2">
  138.         </div>
  139.     </div>
  140. </body>
  141. </html>

图片放大镜(像淘宝浏览商品一样)JS操作的更多相关文章

  1. JS淘宝浏览商品

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

  2. ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能

    如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...

  3. 简单的抓取淘宝关键字信息、图片的Python爬虫|Python3中级玩家：淘宝天猫商品搜索爬虫自动化工具（第一篇）

    Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇) 淘宝改字段,Bugfix,查看https://github.com/hunterhug/taobaoscrapy.git 由于Gith ...

  4. 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...

  5. iOS 集成阿里百川最新版（3.1.1.96） 实现淘宝授权登录以及调用淘宝客户端商品详情页

      公司最近要做第三方登录,由于是做导购项目,必不可少的有淘宝的授权登录.本来就是一个授权登录,没什么大不了的.但淘宝的无线开放业务——阿里百川更新的最新版本3.1.1.96,开发文档不是不详细,是很 ...

  6. selenium+PhantomJS 抓取淘宝搜索商品

    最近项目有些需求,抓取淘宝的搜索商品,抓取的品类还多.直接用selenium+PhantomJS 抓取淘宝搜索商品,快速完成. #-*- coding:utf-8 -*-__author__ =''i ...

  7. python推荐淘宝物美价廉商品

    完成的目标: 输入搜索的商品 以及 淘宝的已评价数目.店铺的商品描述(包括如实描述.服务态度.快递的5.0打分): 按要求,晒选出要求数量的结果,并按"物美价廉算法"排序后输出 思 ...

  8. python推荐淘宝物美价廉商品 2.0

    改动: 新增功能 :可选择只看天猫或淘宝 代码模块化封装,参数配置或输入单独在一个py文件管理,主函数功能只留出参数传入在setting配置的py文件里. main.py代码: # -*- codin ...

  9. android 数据重构(仿淘宝浏览记录,足迹)

    数据结构 ->数据重构 原因 处理这个数据的主要原因是,后台服务器返回的数据格式在ios那边因为其控件可以对数据进行分区显示,可以直接处理,而在android上我们显示控件就是listview, ...

随机推荐

  1. centos下 Apache、php、mysql默认安装路径

    centos下 Apache.php.mysql默认安装路径 http://blog.sina.com.cn/s/blog_4b8481f70100ujtp.html apache: 如果采用RPM包 ...

  2. Failed to load resource: net::ERR_CACHE_MISS

    Failed to load resource: net::ERR_CACHE_MISS 译为开发人员工具载入缓存的时候,说找不到资源. 原因是你先打开页面,然后打开chrome的开发人员工具.而页面 ...

  3. C# DataGridView中合并单元格

    /// 合并GridView列中相同的行 /// /// GridView对象 /// 需要合并的列 public static void GroupRows(GridView GridView1, ...

  4. Android 获取控件相对于屏幕位置

    // View宽,高 public int[] getLocation(View v) { int[] loc = new int[4]; int[] location = new int[2]; v ...

  5. IOS 7 Study - UIActivityViewController(Presenting Sharing Options)

    You want to be able to allow your users to share content inside your apps with theirfriends, through ...

  6. MySQL 5.7.13解压版安装记录 mysql无法启动教程

    1 解压缩 2 添加环境变量,这个不细说了 我的电脑->属性->高级->环境变量 选择PATH,在其后面添加: 你的mysql bin文件夹的路径 (如:C:\Program Fil ...

  7. FluorineFx对于现有站点的配置

    step 1:新建一个FluorineFX网站,作为参考 step 2:在现有网站添加FluorineFX网站的相关dll引用,并拷贝console.aspx和gateway.aspx至网站根目录(最 ...

  8. 提高HTML5 canvas性能的几种方法

    简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...

  9. HTML目录

    1. 表格标记 2. HTML常用标记 3. 博客园添加访问人数统计 4. 如何快速掌握CSS(各种CSS工具) 5. HTTP协议状态码详解(HTTP Status Code)(转)

  10. RSA非对称算法(转)

    RSA加密算法是最常用的非对称加密算法,CFCA在证书服务中离不了它.但是有不少新来的同事对它不太了解,恰好看到一本书中作者用实例对它进行了简化而生动的描述,使得高深的数学理论能够被容易地理解.我们经 ...