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

    Singleton模式 var User = (function() { var instance; function _User(){} _User.prototype.say = function ...

  2. pyv8安装

    http://www.thinksaas.cn/topics/0/400/400915.html

  3. iOS 自动布局过程

    自动布局将视图显示在屏幕上的步骤: 更新约束,它会从子视图传递到父视图,设置布局信息:约束更新时自动触发setNeedsUpdateConstraints:updateConstraints可以增加本 ...

  4. iOS 编程小知识 之 本地化

    1. 使用本地化多语言 有时候,在网上下载的Demo,有本地化的处理,默认的本地化都是英文,这时候,可以考虑这么处理: info.plist->Infomation Property List ...

  5. JS的组成部分、引入页面的方法以及命名规范

    JS的组成部分.引入页面的方法以及命名规范   一.页面是由三部分组成 1)html标签(超文本标记语言) 2)css样式(层叠样式表) 3)javascript脚本编程语言(动态脚本语言) 二.将c ...

  6. C++第四天学习

    回顾: 1.初始化表 2.this指针 3.拷贝构造 Test(const Test& rt) { //1.分配新空间 //2.给新空间赋值 } 4.static成员 类::函数(): 类型 ...

  7. Visual Studio 2015的安装与基本使用

    为什么要使用Visual Studio 2015? 它是中文的.界面友好.自动补全.实时语法错误提示(上图中波浪线部分).单步调试……最重要的社区版是免费的!所以你不必再使用破解的.老旧的的不兼容现代 ...

  8. myeclipse 2014破解

    开始安装的时候已经进行了破解,不知道为什么还是会出现问题,按照下面说的才可以了: http://blog.sina.com.cn/s/blog_7f5862570101oxyv.html

  9. MyBatis浅尝笔记

    MyBatis应属于一种轻量级的java持久层技术,它通过简单的SQL xml或注解,将数据库数据映射到接口与POJO.最近项目要用到mybatis,所以学习之后在这里做个总结,文中的示例以xml配置 ...

  10. CodeForces757A

    A. Gotta Catch Em' All! time limit per test 1 second memory limit per test 256 megabytes input stand ...