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

    http://acm.timus.ru/problem.aspx?space=1&num=1297 (题目链接) 题意 求最长回文子串 Solution 后缀数组论文题 穷举每一位,然后计算以 ...

  2. struts配置文件和国际化

    一.加载包struts2-core-2.3.24.1.jar struts-default.xml :各种栈 org.apache.struts2 -->> default.propert ...

  3. 九 Android基本知识介绍

    1.Package Package,中文翻译过来是包的意思.安卓系统的程序是以apk作为扩展名的,.apk就是android package的简写,package也就是这个app的唯一标识,其实这里的 ...

  4. samba.conf 范例

    # Sample configuration file for the Samba suite for Debian GNU/Linux. # # This is the main Samba con ...

  5. iOS 错误 之 Potential leak of an object stored into 'cs'

    存储到 “cs”的对象存在潜在的泄露

  6. ES6 - 变量的解构赋值学习笔记

    变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...

  7. php绘图-报表

    1.PHP报表的创建,通过绘图,过程 要先开启gb库, 可以使用jpgraph(绘图框架)快速制作一些图形 报表的作用:可以制作一些统计图,地形图,分布图等,还可以做验证码图片(通过在画布上加字和干扰 ...

  8. centos 安装mysql 5.5.12

    1.安装gcc-c++  gcc make cmake编译器 2.安装ncurses 3.添加用户组 groupadd mysql useradd -r -g mysql mysql 4.安装 tar ...

  9. Angular - - $resource 更高端的数据交互

    $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...

  10. localToLocal坐标变换

    localToLocal坐标变换 $(function() { init(); }); // localtoLocal var stage, arm, handler; function init(e ...