jquery实现放大镜简洁代码(推荐)


Posted in jQuery onJune 08, 2017

简介

网上有许多放大镜的jquery的插件,但是用着不是那么得心应手,现在一页代码实现一个放大镜功能,如果需要附加的功能可以手动修改,原理都在注释里

jquery实现放大镜简洁代码(推荐)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>放大镜效果</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .small {
      margin-left:40px;
      margin-top:50px;
      width: 150px;
      height: 150px;
      /*border: 2px solid yellow;*/
    }
     .small>img {
      width: 150px;
      height: 150px;
    } 
    .slider {
      width: 50px;
      height: 50px;
      background: rgba(180,180,135,0.3);
      position: absolute;
      display: none;
    }
    #big {
      //设置为固定大小;
      width: 200px;
      height: 200px;
      position: absolute;
      /* border: 2px solid red;*/
      overflow: hidden;
      display: none;
    }
  </style>
</head>
<body>
<!--缩略图-->
<div class="small">
  <img src="thumb.jpg" />
  <!--放大镜,在原图不上的小块-->
  <div class="slider"></div>
</div>
<!--放大镜区域,大图,设置为none隐藏-->
<div id="big">
  <img id="bigImg" src="big.jpg" />
</div>
even.clientX<input type="text" value="0" id="test" /><br/>
even.clientY<input type="text" value="0" id="test1" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  var small = $(".small")[0];
  var slider = $(".slider")[0];
  var big = document.getElementById("big");//试一试js获取
  var bigImg = document.getElementById("bigImg");
//让slider跟随鼠标移动.给小的方块绑定事件
  $(".small").mousemove(function(e) {
    var even = e || event; //兼容火狐浏览器
    var x = even.clientX - small.offsetLeft - slider.offsetWidth/2;
    var y = even.clientY - small.offsetTop - slider.offsetHeight/2;
//测试even.clientX和even.clientY
    $("#test").val(even.clientX);
    $("#test1").val(even.clientY);
//水平方向的最大值
    var maxX = small.clientWidth - slider.clientWidth;
//竖直方向的最大值
    var maxY = small.clientHeight - slider.clientHeight;
    if(x<0){
//相当于超出左侧,超出左侧时,拉回
      x=0;
    }
//超出右侧时拉回
    if(x>maxX){
      x = maxX;
    }
//顶部超出
    if(y<0){
      y=0;
    }
//底部超出
    if(y>maxY){
      y = maxY;
    }
    slider.style.top = (y+small.offsetTop) + "px";
    slider.style.left = (x+small.offsetLeft) + "px";
//放大的图片的主要实现代码:比例计算, big.scrollLeft是id=big的div中下方滚轴的位置
//由于id=big的div设置成固定大小,而图片又非常大,所以这个div就像个放大镜一样在大图上晃
//比例计算很简单,鼠标在缩略图的位置与缩略图宽高比=鼠标在大图位置与大图宽高比,现在未知数是大图鼠标的位置
    big.scrollLeft = x/maxX * (bigImg.clientWidth - big.clientWidth) ;
    big.scrollTop = y/maxY * (bigImg.clientHeight -big.clientHeight) ;
  });
//鼠标移入事件
  $(".small").mouseenter(function(){
//鼠标移入到缩略图时候实现,上面出现的小的方块
    $(".slider").css("display","block");
    $("#big").css("top",small.offsetTop+"px");
//隐藏的大图=获取左图的左边位置+宽度+10(隔开点缝隙与缩略图)+px
    big.style.left = small.offsetLeft + small.offsetWidth + 10 + "px";
//右侧的大图区域显示出来图片
    $("#big").css("display","block");
  });
//移除事件
//添加鼠标移出事件,鼠标移出缩略图的时候
  $(".small").mouseleave(function(){
    $(".slider").css("display","none");
    $("#big").css("display","none");
  }); 
</script>
</body>
</html>

下载demo

https://github.com/mytheshow/...

链接: http://pan.baidu.com/s/1nvMBgb3

以上所述是小编给大家介绍的jquery实现放大镜简洁代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery中的deferred使用方法
Mar 27 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 #jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 #jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 #jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 #jQuery
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
jquery实现图片放大点击切换
Jun 06 #jQuery
You might like
一贴学会PHP 新手入门教程
2009/08/03 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
大学生学习生活的自我评价
2013/11/01 职场文书
公司市场部岗位职责
2013/12/02 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
初中数学教学反思
2014/01/16 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
英语专业求职信
2014/07/08 职场文书
暑假学习心得体会
2014/09/02 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
运动会加油稿
2015/07/22 职场文书
话题作文之成长
2019/12/09 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python