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

    定义:给数据Array(1,3.14,"aa")给长度(Array(5))使用方括号定义[1,3.14,"aa"] 属性:lenght(数据的长度) 方法:pu ...

  2. java基础面试

    1. String类为什么是final的. 安全性:如果字符串是可变的,那么会引起很严重的安全问题.譬如,数据库的用户名.密码都是以字符串的形式传入来获得数据库的连接,或者在socket编程中,主机名 ...

  3. centos 软件库安装

    ./configure: error: the HTTP rewrite module requires the PCRE library. You can either disable the mo ...

  4. mac 画图

    1.1.XMind 基础功能免费试用 1.2.OmniGraflle 可以跳转之类的,比较方便的,类似于可以制作原型图 Omnigraffle Pro 6 Name: mojadoSerial: JY ...

  5. iOS 架构模式

    参考:http://www.cocoachina.com/ios/20160108/14916.html MVC , MVP , MVVM , VIPER

  6. css3 翻牌效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  7. PHP 合并数组 追加数组例子

    PHP合并数组我们可以使用array_merge()函数,array_merge()函数返回一个联合的数组.所得到的数组以第一个输入数组参数开始,按后面数组参数出现的顺序依次追加.其形式为: arra ...

  8. FB面经 Prepare: Task Schedule

    tasks has cooldown time, give an input task id array, output finish time input: AABCA A--ABCA output ...

  9. PHP文件上传主要代码讲解

    导读:在php开发过程中,文件上传也经常用到,这里简单介绍下. 在php开发过程中,文件上传也经常用到,这里简单介绍下. 代码如下: <?php    if($_FILES['myfile'][ ...

  10. js观察者模式与Model

    目的 观察者模式是常见的设计模式,可以被应用到MV*框架的Model上,来实现对数据变化的监听. 基本概念 观察者模式是一种常见的设计模式.被观察者可以被订阅(subscribe),并在状态发生改变时 ...