JS实现放大镜效果


Posted in Javascript onSeptember 21, 2020

JS实现放大镜效果,供大家参考,具体内容如下

鼠标移到图片上就可以放大一块区域

代码:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   #small{
    width: 700px;
    height: 340px;
    position: absolute;
    left: 70px;
    top: 100px;
   }
   #small img{
    width: 100%;
    height: 100%;
   }
   #mark{
    width: 200px;
    height: 200px;
    background-color:white;
    position: absolute;
    opacity: 0.5;
    filter: alpha(opacity=50);
    left: 0px;
    top: 0px;
    display: none;
   }
   #big{
    width: 400px;
    height: 400px;
    border: 1px solid black;
    left: 800px;
    top: 100px;
    position: absolute;
    overflow: hidden;
    display: none;
   }
   #big img{
    width: 1400px;
    height: 680px;
    position: absolute;
    left: 0px;
    top: 0px;
   }
  </style>
  <script>
   window.onload = function(){
    var oSmall = document.getElementById("small");
    var oBig = document.getElementById("big");
    var oMark = document.getElementById("mark");
    var oBigImg = oBig.getElementsByTagName("img")[0];

    oSmall.onmouseover = function(){
     oMark.style.display = "block";
     oBig.style.display = "block";
    }
    oSmall.onmouseout = function(){
     oMark.style.display = "none";
     oBig.style.display = "none";
    }
    oSmall.onmousemove = function(ev){
     var e = ev || window.event;
     var l = e.clientX - oSmall.offsetLeft - 100;
     if(l <= 0){
      l = 0;
     }
     if(l >= (700-200)){
      l = 500;
     }
     var t = e.clientY - oSmall.offsetTop - 100;
     if(t <= 0){
      t = 0;
     }
     if(t >= (340-200)){
      t = 140;
     }
     oMark.style.left = l + 'px';
     oMark.style.top = t + 'px';

     /* 右边图片移动方向与左边图片方向相反且成倍数移动 */
     oBigImg.style.left = l * -2 + 'px';
     oBigImg.style.top = t * -2 + 'px';

    }
   }
  </script>
 </head>
 <body>
  <div id="small">
   <img src="地狱之门卫士 加里奥.jpg" alt="怎么回事">
   <div id="mark"></div>
  </div>
  <div id="big">
   <img src="地狱之门卫士 加里奥.jpg" alt="怎么回事">
  </div>
 </body>
</html>

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

Javascript 相关文章推荐
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 #Javascript
Vue Element校验validate的实例
Sep 21 #Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 #Javascript
vue3.0 上手体验
Sep 21 #Javascript
微信小程序实现点击页面出现文字
Sep 21 #Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 #Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 #Javascript
You might like
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
js更优雅的兼容
2010/08/12 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
angularJS 入门基础
2015/02/09 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python2和Python3中print的用法示例总结
2017/10/25 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python给图像添加噪声具体操作
2019/03/03 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
介绍一下Python中webbrowser的用法
2013/05/07 面试题
搞笑婚礼主持词
2014/03/13 职场文书
治超工作实施方案
2014/05/04 职场文书
运动会演讲稿
2014/05/07 职场文书
物业管理工作方案
2014/05/10 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
七年级作文之下雨天
2019/12/23 职场文书