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 相关文章推荐
js输出列表实现代码
Sep 12 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
ES6基础之默认参数值
Feb 21 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
微信小程序实现拖拽功能
Sep 26 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python中对_init_的理解及实例解析
2019/10/11 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
行政部岗位职责范本
2014/03/13 职场文书
仓库管理计划书
2014/05/04 职场文书
小学端午节活动总结
2015/02/11 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS