本人结合之前所学一起写了，多个特效，只是新手自己瞎鼓捣的，思路清晰，具体实现的货物放大镜等，替换当中的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. java实现——008旋转数组的最小数字

    public class T008 { public static void main(String[] args) { int[] num = { 3, 4, 5, 1, 2 }; System.o ...

  2. time.setToNow() 取当前时间，月份有误

      [java] view plaincopy Time time = new Time("GMT+8"); time.setToNow(); int year = time.ye ...

  3. Zookeeper的基本概念

    Reference:  http://mp.weixin.qq.com/s?src=3&timestamp=1477979201&ver=1&signature=bBZqNrN ...

  4. ASP.NET常用的控件怎么添加

    http://jingyan.baidu.com/article/d8072ac4224747ec95cefda2.html

  5. Win10 的虛擬桌面

    Win10 的虛擬桌面我覺得蠻多餘的,平常很少用,除非是像以前的 "切換老闆鍵" ,老闆來了,你不想讓他知道你在幹嘛,趕快切換另外一個桌面. 切換工作視窗:Alt + Tab 叫出 ...

  6. 解開32位元Win 7記憶體4GB限制

    解開32位元Win 7記憶體4GB限制: ReadyFor4GB 檔案下載:ReadyFor4GB https://sites.google.com/a/joytown.tw/bai-jia-zhi/ ...

  7. C++中vector 容器的基本操作

    vector是一种简单高效的容器,具有自动内存管理功能.对于大小为n的vector容器,它的元素下标是0~n-1. vector有二个重要方法:     begin(): 返回首元素位置的迭代器.   ...

  8. PHP常用函数（收集）

    <?php //===============================时间日期=============================== //y返回年最后两位,Y年四位数,m月份数字 ...

  9. iOS 开源库 之 AFNetWorking 2.x

    1. 网络请求的基本知识 2. Get/Post 请求的使用 3. 文件(图片)上传 4. 断点下载 5. 其它使用细节 6. 设计优良的地方

  10. 论MySQL数据库中两种数据引擎的差别

    InnoDB和MyISAM是在使用MySQL最常用的两个表类型,各有优缺点,视具体应用而定. 基本的差别为: MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持. MyISAM类型的表强 ...