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 相关文章推荐
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Echarts如何重新渲染实例详解
May 30 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
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
js中的闭包学习心得
2018/02/06 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
js实现随机点名
2021/01/19 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python实现控制台进度条功能
2016/01/04 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
销售内勤岗位职责
2014/04/15 职场文书
中药学自荐信
2014/06/15 职场文书
公务员考察材料范文
2014/12/23 职场文书
环卫处个人工作总结
2015/03/04 职场文书
民事诉讼代理词
2015/05/25 职场文书
学历证明范文
2015/06/16 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技