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 相关文章推荐
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
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数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
Python 列表list使用介绍
2014/11/30 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
如何用python整理附件
2018/05/13 Python
django框架创建应用操作示例
2019/09/26 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python实现代码块儿折叠
2020/04/15 Python
浅析python 字典嵌套
2020/09/29 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
自我评价范文点评
2013/12/04 职场文书
初级会计求职信范文
2014/02/15 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
环卫工作汇报材料
2014/10/28 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫