本人结合之前所学一起写了，多个特效，只是新手自己瞎鼓捣的，思路清晰，具体实现的货物放大镜等，替换当中的img地址就可以查看特效

　　

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>卖娃娃</title>
  6.      <style>
  7.          #big{width:420px;height:300px;border: 1px solid #999;}
  8.          #fdj{width:100px;height: 100px;border:1px solid red;position: absolute;background:blue;opacity:0.2;display: none;}
  9.          #big img{display:none;}
  10.          #small{width:420px;height:40px;}
  11.          .bt{float:left;width:80px;height:40px;border:1px solid red;margin-left:2px;text-align:center;line-height:40px;font-size: 20px;}
  12.          #bbig{width:400px;height:400px;position:absolute;top:8px;left:440px;overflow: hidden;display: none;}
  13.          #bbig img{display:none;}
  14.      </style>
  15.  </head>
  16.  <body>
  17.      <div id="big">
  18.          <div id="fdj"></div>
  19.          <img src="./img/1.jpg" width='420px' height="300px" style="display:block;">
  20.          <img src="./img/2.jpg" width='420px' height="300px">
  21.          <img src="./img/3.jpg" width='420px' height="300px">
  22.          <img src="./img/4.jpg" width='420px' height="300px">
  23.          <img src="./img/5.jpg" width='420px' height="300px">
  24.      </div>
  25.      <div id="small">
  26.          <div class="bt" style="background:lightgreen;">性感</div>
  27.          <div class="bt" >诱惑</div>
  28.          <div class="bt" >纯洁</div>
  29.          <div class="bt" >妖艳</div>
  30.          <div class="bt" >可爱</div>
  31.      </div>
  32.      <div id="bbig">
  33.          <img src="./img/1.jpg" style="display:block;" width="1260" height="900">
  34.          <img src="./img/2.jpg" width="1220" height="900">
  35.          <img src="./img/3.jpg" width="1220" height="900">
  36.          <img src="./img/4.jpg" width="1220" height="900">
  37.          <img src="./img/5.jpg" width="1220" height="900">
  38.      </div>
  39.  </body>
  40.  <script>
  41.      //获取图片
  42.      var imgs = document.getElementById('big').getElementsByTagName('img');
  43.      //获取图片下的div
  44.      var divs = document.getElementById('small').getElementsByTagName('div');
  45.      //获取放大的图片
  46.      var bimgs = document.getElementById('bbig').getElementsByTagName('img');
  47.      //获取放大镜的图片
  48.      var bbig = document.getElementById('bbig');
  49.      //定义初始值
  50.      var m = 1;
  51.      //鼠标放进下面的标题停止，离开开始
  52.      for(var i=0;i<divs.length;i++){
  53.          (function(i){
  54.              divs[i].onmouseover=function(){
  55.                  cImg(i);
  56.                  cDiv(i);
  57.                  cBbig(i);
  58.                  clearInterval(timer);
  59.                  m=i+1;
  60.              }
  61.              divs[i].onmouseout=function(){
  62.              timer = setInterval(run,2000);
  63.              }
  64.          })(i);
  65.      }
  66.      //定时播放
  67.      var timer = setInterval(run,2000);
  68.      //定义播放的函数
  69.      function run(){
  70.          if(m>4){
  71.              m = 0;
  72.          }
  73.          cImg(m);
  74.          cDiv(m);
  75.          cBbig(m);
  76.          m++;
  77.      }
  78.      //图片轮放
  79.      function cImg(n){
  80.          for(var i=0;i<imgs.length;i++){
  81.              imgs[i].style.display = "none";
  82.          }
  83.          imgs[n].style.display = "block";
  84.      }
  85.      //标题轮放
  86.      function cDiv(n){
  87.          for(var i=0;i<divs.length;i++){
  88.              divs[i].style.background = "none";
  89.          }
  90.          divs[n].style.background = "lightgreen";
  91.      }
  92.      //放大的图轮放
  93.      function cBbig(n){
  94.          for(var i=0;i<bimgs.length;i++){
  95.              bimgs[i].style.display = "none";
  96.          }
  97.          bimgs[n].style.display = "block";
  98.      }
  99.      //鼠标移进去停止,出来继续轮放
  100.      big.onmouseover = function(){
  101.          fdj.style.display = "block";
  102.          bbig.style.display = "block";
  103.          clearInterval(timer);
  104.      }
  105.      big.onmouseout = function(){
  106.          fdj.style.display = "none";
  107.          bbig.style.display = "none";
  108.          timer = setInterval(run,2000);
  109.      }
  110.      /*         放大镜      */
  111.      big.onmousemove=function(e){
  112.          var e = e || window.event;
  113.          this.style.cursor="move";
  114.          var fx = e.clientX - big.offsetLeft;
  115.          var fy = e.clientY - big.offsetTop;
  116.  
  117.          document.title = fx+":"+fy;
  118.  
  119.          fdj.style.left = (fx-42)+"px";
  120.          fdj.style.top = (fy-42)+"px";
  121.          //判断光标位置决定放大镜的位置,不出边框
  122.          if(fx<50){
  123.              fdj.style.left = 8+"px";
  124.          }
  125.          if(fx>370){
  126.              fdj.style.left = 328+"px";
  127.          }
  128.          if(fy<50){
  129.              fdj.style.top = 8+"px";
  130.          }
  131.          if(fy>250){
  132.              fdj.style.top = 208+"px";
  133.          }
  134.          var bigfx = parseInt(fdj.style.left);
  135.          var bigfy = parseInt(fdj.style.top);
  136.          console.log(bigfy);
  137.          console.log(bigfx);
  138.          //放大镜里显示的东西按倍数
  139.          bbig.scrollTop = (bigfy-8)*3;
  140.          bbig.scrollLeft = (bigfx-8)*3;
  141.          // bbig.style.display = 'block';
  142.          console.log('--------');
  143.          console.log(bbig.scrollTop);
  144.          console.log(bbig.scrollLeft);
  145.          // console.log(fdj.style.top);
  146.      }
  147.  
  148.  </script>
  149.  </html>

新手学js的效果图1---（ 淘宝等商城货物查看特效）的更多相关文章

  1. js实现百度，淘宝搜索功能

        Common.js //封装类名 function byClassName(sClassName){ if(document.getElementsBYClassName){ return d ...

  2. js之选项卡效果(淘宝侧边栏)

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  3. JavaScript（Node.js）+ Selenium 实现淘宝抢单

    JavaScript(Node.js)+ Selenium 淘宝抢单 为了买买买我也是拼了,看了一点selenium的资料,随便写的. 程序写的比较烂,但是够我自己用了,望各路大牛指教. 使用说明: ...

  4. javascript实现 京东淘宝等商城的商品图片大图预览功能

    在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出现一 ...

  5. javascript实现 京东淘宝等商城的商品图片大图预览功能（图片放大器）

      在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出 ...

  6. nginx css,js合并插件，淘宝nginx合并js，css插件

    先下载Nginx_concat_module,下载后把它放在/usr/local/src/文件夹中,新建文件夹nginx-http-concat把下载的config  ngx_http_concat_ ...

  7. 模仿 "淘宝彩票" 的随机选球投注效果！

    我个人比较喜欢看网页的效果,前几天看了淘宝的“淘宝彩票”,今天仿造做了一个,我觉得比淘宝的体验要好. 查看 “淘宝彩票” 的网页源码发现,主要是用到了Css3 transform 的 Matrix 来 ...

  8. 淘宝WAP版小BUG分析

    前几天发现的一个淘宝WAP版的小BUG,就是用桌面版chrome看的时候产品评价中的图片显示不出来,都是图裂了. 这是什么原因呢?图片为什么会显示不出来呢?淘宝的技术人员.测试人员不可能没发现啊.开启 ...

  9. selenium 淘宝登入反爬虫解决方案（亲测有效）

    前言 目前在对淘宝进行数据爬取的时候都会碰到,登入时的滑块问题,无论是手动还是脚本都不成功.这里的很重要一个原因是很多的网站都对selenium做了反爬虫机制.接下来是笔者参考网上的网友们的方法亲自测 ...

随机推荐

  1. Test 17

    BZ OI 队测 T1: 题目大意: 喵星系有n个星球,标号为1到n,星球以及星球间的航线形成一棵树. 所有星球间的双向航线的长度都为1.小昕要在若干个星球建矿石仓库,设立每个仓库的费用为K.对于未设 ...

  2. Struts2动态方法调用

    动态方法就是一个Action对应多个请求,减少Action的数量 1.指定method属性 <action name="addAction" method="add ...

  3. Spring 之 示例(Java之负基础实战)

    接 Spring 之 配置 里面的代码. 现在要进行Controller的开发. 1.引用类 import org.springframework.web.servlet.mvc.Controller ...

  4. jQuery 获取和设置type为hidden的input的值

    HTML代码 <input type="hidden" name="type" id="type" value="1&quo ...

  5. jquery动态加载 去除js

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  6. 使用SimpleAdapter创建ListView

    通过ArrayAdapter实现Adapter虽然简单.易用,但ArrayAdapter的功能比较有限.它的每个列表只能是TextView.如果开发者需呀实现更复杂的列表项,则可以考虑使用Simple ...

  7. Raphael的set使用

    Raphael的set使用 $(function() { initRaphael(); }); function initRaphael(e) { var paper = Raphael(0, 0, ...

  8. 细数JDK里的设计模式

    原文出处: javacodegeeks   译文出处:deepinmind 这也是篇老文了,相信很多人也看过.前面那些废话就不翻译了,直接切入正题吧~ 结构型模式: 适配器模式: 用来把一个接口转化成 ...

  9. Java学习之旅开篇：运行机制及环境搭建

    在写这篇博客之前,我想对自己进行简单概括:我从事软件开发工作已经三年多了,并且一直在从事.NET相关项目的开发.为什么突然间想学习Java呢?有以下几个原因: 1. 开发程序三年多来,已经对.NET相 ...

  10. SSH系统介绍

    SSH的系统中,对象的调用流程是:JSP->Action->Service->DAO->Hibernate,数据的流向是ActionFormBean接受用户的数据,Action ...