js实现放大镜特效


Posted in Javascript onMay 18, 2017

本文实例为大家分享了js放大镜特效的实现代码,供大家参考,具体内容如下

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  .imgBox{
   width: 1000px;
   margin: auto;
   text-align: center;
  }
  .small,.large{
   font-size: 0;
   outline: 1px solid burlywood;
   margin: auto;
  }
  .small{
   margin: 20px auto;
  }
  .large{
   /*display: none;*/
  }
  .small,.small img,.large{
   width: 300px;
   height: 200px;
   overflow: hidden;
  }
  .large img{
   width: 900px;
   height: 600px;
  }
  .small,.large{
   position: relative;
  }
  .mark{
   opacity: 0.5;
   background-color: #DEB887;
   z-index: 55;
   width: 100px;
   height: 66.666666666px;
   display: none;
  }
  .mark,.large img{
   position: absolute;
   left: 0;
   top: 0;
  }
 </style>
</head>
<body>
 <div class="imgBox">
  <div class="small">
   <img src="img/img_14.jpg"/>
   <div class="mark"></div>
  </div>
  <div class="large">
   <img src="img/img_14.jpg"/>
  </div>
 </div>
 
 <script type="text/javascript">
  $(function(){
   var $small = $(".small"),
    $mark = $(".mark"),
    $large = $(".large");
   $small.on("mousemove",function(e){
// 在鼠标移到小图片中显示出mark
    $mark.css("display","block");
//    $large.css("display","block");
// 获取mark的一半宽度高度
    var hw = $mark.width()/2,
     hh = $mark.height()/2;
// 获取鼠标在当前图片中的位置
    var lf = e.pageX-$small.offset().left-hw,
     tt = e.pageY-$small.offset().top-hh;
// 获取mark的想x,y轴偏移率
    var ix = lf/$small.width(),
     iy = tt/$small.height();
// 获取边缘线
    var lb = 1-hw/$small.width()*2,
     tb = 1-hh/$small.height()*2;
// 计算和边缘的关系
    var ix = ix<lb?ix>0?ix:0:lb,
     iy = iy<tb?iy>0?iy:0:tb;
// 进行大图和小图百分比计算
    $mark.css("left",ix*100+"%").css("top",iy*100+"%");
    $large.children().css("left",-ix*300+"%").css("top",-iy*300+"%");
   }).on("mouseout",function(){
// 鼠标移出后mark隐藏
    $mark.css("display","none");
//    $large.css("display","none");
   })
  })
 </script>
</body>
</html>

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

Javascript 相关文章推荐
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
JS前端笔试题分析
Dec 19 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
layui的table中显示图片方法
Aug 17 Javascript
js实现每日签到功能
Nov 29 Javascript
js中的数组对象排序分析
Dec 11 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
vue v-on监听事件详解
May 17 #Javascript
vue v-model表单控件绑定详解
May 17 #Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 #Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 #Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 #Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 #Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 #Javascript
You might like
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
php实现等比例压缩图片
2018/07/26 PHP
js 目录列举函数
2008/11/06 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
使用Python下载Bing图片(代码)
2013/11/07 Python
Python环境变量设置方法
2016/08/28 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
python字典的常用方法总结
2019/07/31 Python
基于Python解密仿射密码
2019/10/21 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
交通事故检查书范文
2014/01/30 职场文书
交通事故协议书
2014/04/15 职场文书
《画家乡》教学反思
2014/04/22 职场文书
机电系毕业生求职信
2014/07/11 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
千与千寻观后感
2015/06/04 职场文书
青年联谊会致辞
2015/07/31 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis