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实现文章图片弹出放大效果
Apr 06 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery 时间戳转日期过程详解
Oct 12 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
15种PHP Encoder的比较
2007/03/06 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
php单链表实现代码分享
2016/07/04 PHP
php的4种常用运行方式详解
2016/12/22 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
详解python的数字类型变量与其方法
2016/11/20 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python如何读取bin文件并下发串口
2019/07/05 Python
python SOCKET编程基础入门
2021/02/27 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
物流专业毕业生推荐信范文
2013/11/18 职场文书
精彩的推荐信范文
2013/11/26 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
入党积极分子评语
2014/05/04 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
民主生活会剖析材料
2014/09/30 职场文书
文员岗位职责范本
2015/04/16 职场文书
2019军训心得体会
2019/06/27 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python