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 相关文章推荐
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
vue实现div单选多选功能
Jul 16 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+JS实现的实时搜索提示功能
2018/03/13 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
javascript中的面向对象
2017/03/30 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
python生成器表达式和列表解析
2016/03/10 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python3中列表list合并的四种方法
2019/04/19 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
python实现3D地图可视化
2020/03/25 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
详解Python中import机制
2020/09/11 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
写出一个方法实现冒泡排序
2016/07/08 面试题
法律六进活动方案
2014/03/13 职场文书
租房协议书范文
2014/08/20 职场文书
乐山大佛导游词
2015/02/02 职场文书
小型婚礼主持词
2015/06/30 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL