JS实现电商放大镜效果


Posted in Javascript onAugust 24, 2017

前端JS电商放大镜效果,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>26-电商放大镜</title>
  <style type="text/css">
    
  *{
    padding: 0;
    margin: 0;
  }
  #left{
   padding: 0;
  margin: 0;
    width: 400px;
    height: 400px;
    border: 2px solid blue;
    background: url(http://chuantu.biz/t6/17/1503469475x2063891122.jpg) no-repeat;
    float: left;
    cursor: crosshair;
    position: relative;
  box-sizing: border-box;
  }
  #box{
    width: 200px;
    height: 200px;
    background: white;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  box-sizing: border-box;
  }
  #cover{
    width: 400px;
    height: 400px;
    background: red;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  box-sizing: border-box;
  }
  #right{
    width: 400px;
    height: 400px;
    border: 2px solid black;
    overflow: hidden;
    position: relative;
    display: none;
  box-sizing: border-box;
  }
  #rpic{
    position: absolute;
  }
  </style>

  <script type="text/javascript">
    
  window.onload = function(){
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var rpic = document.getElementById("rpic");
    var box = document.getElementById("box");
    var cover = document.getElementById("cover");

    // 给左侧加鼠标移动事件
    cover.onmousemove = function(){

      //获得事件对象
      var ev = window.event;
      var mouse_left = ev.offsetX || ev.layerX;
      var mouse_top = ev.offsetY || ev.layerY;
      // document.title = mouse_left + '|' + mouse_top;

      //计算色块的位置
      var box_left = mouse_left - 100;
      var box_top = mouse_top - 100;

      // 判断是否超出
      if (box_left < 0) {
        box_left = 0;
      }
      if (box_left > 200) {
        box_left = 200;
      }
      if (box_top < 0) {
        box_top = 0;
      }
      if (box_top > 200) {
        box_top = 200;
      }

      // 让色块移动
      box.style.left = box_left + 'px';
      box.style.top = box_top + 'px';

      //计算右侧图片位置
      var rpic_left = box_left*-2;
      var rpic_top = box_top*-2;

      // 让右侧移动
      rpic.style.left = rpic_left + 'px';
      rpic.style.top = rpic_top + 'px';

    }

      //给左侧加鼠标移入事件
      cover.onmouseover = function(){
        // 让左侧色块和右侧隐藏
        box.style.display = 'block';
        right.style.display = 'block';
      }

      // 给左侧加鼠标移出事件
      cover.onmouseout = function(){
        // 让左侧色块和右侧隐藏
        box.style.display = 'none';
        right.style.display = 'none';
      }
  }

  </script>
</head>
<body>
  <div id="left">
    <div id="box"></div>
    <div id="cover"></div>
  </div>
  <div id="right">
    <img src="http://chuantu.biz/t6/17/1503469419x2063891122.jpg" id="rpic">
  </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
weui框架实现上传、预览和删除图片功能代码
Aug 24 #Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 #jQuery
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 #Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 #Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 #Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 #Javascript
angular2路由切换改变页面title的示例代码
Aug 23 #Javascript
You might like
PHP删除非空目录的函数代码小结
2013/02/28 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
javaScript语法总结
2016/11/25 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
Python文件去除注释的方法
2015/05/25 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
医德考评自我评价
2014/09/14 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
酒店开业主持词
2015/07/02 职场文书
如何做好工作总结!
2019/04/10 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL