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 判断脚本加载完毕的代码
Jul 13 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
js保留两位小数方法总结
Jan 31 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
初探PHP5
2006/10/09 PHP
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
用php解析html的实现代码
2011/08/08 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python读写Excel文件方法介绍
2014/11/22 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
Flask框架配置与调试操作示例
2018/07/23 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
int在python中的含义以及用法
2019/06/27 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
尊师重教演讲稿
2014/09/04 职场文书
开会通知
2015/04/20 职场文书
旅游投诉信范文
2015/07/02 职场文书
高中政治教学反思
2016/02/23 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书