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

　　

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>卖娃娃</title>
     <style>
         #big{width:420px;height:300px;border: 1px solid #999;}
         #fdj{width:100px;height: 100px;border:1px solid red;position: absolute;background:blue;opacity:0.2;display: none;}
         #big img{display:none;}
         #small{width:420px;height:40px;}
         .bt{float:left;width:80px;height:40px;border:1px solid red;margin-left:2px;text-align:center;line-height:40px;font-size: 20px;}
         #bbig{width:400px;height:400px;position:absolute;top:8px;left:440px;overflow: hidden;display: none;}
         #bbig img{display:none;}
     </style>
 </head>
 <body>
     <div id="big">
         <div id="fdj"></div>
         <img src="./img/1.jpg" width='420px' height="300px" style="display:block;">
         <img src="./img/2.jpg" width='420px' height="300px">
         <img src="./img/3.jpg" width='420px' height="300px">
         <img src="./img/4.jpg" width='420px' height="300px">
         <img src="./img/5.jpg" width='420px' height="300px">
     </div>
     <div id="small">
         <div class="bt" style="background:lightgreen;">性感</div>
         <div class="bt" >诱惑</div>
         <div class="bt" >纯洁</div>
         <div class="bt" >妖艳</div>
         <div class="bt" >可爱</div>
     </div>
     <div id="bbig">
         <img src="./img/1.jpg" style="display:block;" width="1260" height="900">
         <img src="./img/2.jpg" width="1220" height="900">
         <img src="./img/3.jpg" width="1220" height="900">
         <img src="./img/4.jpg" width="1220" height="900">
         <img src="./img/5.jpg" width="1220" height="900">
     </div>
 </body>
 <script>
     //获取图片
     var imgs = document.getElementById('big').getElementsByTagName('img');
     //获取图片下的div
     var divs = document.getElementById('small').getElementsByTagName('div');
     //获取放大的图片
     var bimgs = document.getElementById('bbig').getElementsByTagName('img');
     //获取放大镜的图片
     var bbig = document.getElementById('bbig');
     //定义初始值
     var m = 1;
     //鼠标放进下面的标题停止，离开开始
     for(var i=0;i<divs.length;i++){
         (function(i){
             divs[i].onmouseover=function(){
                 cImg(i);
                 cDiv(i);
                 cBbig(i);
                 clearInterval(timer);
                 m=i+1;
             }
             divs[i].onmouseout=function(){
             timer = setInterval(run,2000);
             }
         })(i);
     }
     //定时播放
     var timer = setInterval(run,2000);
     //定义播放的函数
     function run(){
         if(m>4){
             m = 0;
         }
         cImg(m);
         cDiv(m);
         cBbig(m);
         m++;
     }
     //图片轮放
     function cImg(n){
         for(var i=0;i<imgs.length;i++){
             imgs[i].style.display = "none";
         }
         imgs[n].style.display = "block";
     }
     //标题轮放
     function cDiv(n){
         for(var i=0;i<divs.length;i++){
             divs[i].style.background = "none";
         }
         divs[n].style.background = "lightgreen";
     }
     //放大的图轮放
     function cBbig(n){
         for(var i=0;i<bimgs.length;i++){
             bimgs[i].style.display = "none";
         }
         bimgs[n].style.display = "block";
     }
     //鼠标移进去停止,出来继续轮放
     big.onmouseover = function(){
         fdj.style.display = "block";
         bbig.style.display = "block";
         clearInterval(timer);
     }
     big.onmouseout = function(){
         fdj.style.display = "none";
         bbig.style.display = "none";
         timer = setInterval(run,2000);
     }
     /*         放大镜      */
     big.onmousemove=function(e){
         var e = e || window.event;
         this.style.cursor="move";
         var fx = e.clientX - big.offsetLeft;
         var fy = e.clientY - big.offsetTop;

         document.title = fx+":"+fy;

         fdj.style.left = (fx-42)+"px";
         fdj.style.top = (fy-42)+"px";
         //判断光标位置决定放大镜的位置,不出边框
         if(fx<50){
             fdj.style.left = 8+"px";
         }
         if(fx>370){
             fdj.style.left = 328+"px";
         }
         if(fy<50){
             fdj.style.top = 8+"px";
         }
         if(fy>250){
             fdj.style.top = 208+"px";
         }
         var bigfx = parseInt(fdj.style.left);
         var bigfy = parseInt(fdj.style.top);
         console.log(bigfy);
         console.log(bigfx);
         //放大镜里显示的东西按倍数
         bbig.scrollTop = (bigfy-8)*3;
         bbig.scrollLeft = (bigfx-8)*3;
         // bbig.style.display = 'block';
         console.log('--------');
         console.log(bbig.scrollTop);
         console.log(bbig.scrollLeft);
         // console.log(fdj.style.top);
     }

 </script>
 </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. UVa 900 - Brick Wall Patterns

    题目大意:用1*2的砖头建n*2的墙,问有多少种不同的砖头排列方式?与斐波那契序列相似. #include <cstdio> #define MAXN 60 #define N 50 un ...

  2. JQuery的 jQuery.fn.extend() 和jQuery.extend();

    原文链接:http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html jQuery.fn.extend(); jQuery.extend ...

  3. JS 弹出层 定位至屏幕居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. UVa 10551 - Basic Remains

    题目大意:关于大数的mod和进制转换,直接使用Java的BigInteger类,正在copy式学习中... import java.io.*; import java.util.*; import j ...

  5. 如何获取DOM中当前获取焦点的元素

    <script type="text/javascript"> function msg(e) // e = event { var target; //initial ...

  6. 谈谈字符集编码及gb2312、utf-8编码原理

    一.基础中的基础比特位即bit,是计算机最小的存储单位.以0或1来表示比特位的值.Byte是字节数,bit是位数,在计算机中每八位为一字节,也就是1Byte＝8bit:Byte和bit都翻译成比特,俗 ...

  7. java 遍历List 和 Map的几种方法

    java遍历List 1.(性能最差) for(String tmp:list) { //System.out.println(tmp); } 2.(性能最好) for(int i = 0; i &l ...

  8. 开始Java学习（Java之负基础实战）

    开发平台: JavaSE:java标准平台,一般用于桌面程序开发 JavaEE:开发web(如网站+Sping) JavaME:开发移动应用 开发环境: JVM:跨平台核心. JRE:java运行时, ...

  9. Selenium2（java）框架设计 九

    设计框架原则: 数据分离,业务层和逻辑层不要混杂在一起. 设计图: 框架结构初始化: com.wymall.test:这是存放这个框架源代码的根目录 base:里面有个基类(BaseParpaare. ...

  10. BZOJ2733 永无乡【splay启发式合并】

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...