京东等电商网站中可以对商品进行放大观察,本文要实现的就是模仿这个放大镜功能,大致效果如下图所示:

简要说明实现思路:

1.原图窗口与放大窗口插入的是同一个图片,不过原图窗口的图片要适当缩小,放大窗口图片保持原大小,超出部分设置隐藏

2.先定下放大比例,例如本文原图大小为1000*1000,可以把原图窗口的图片设为400*400,这样放大窗口就能实现2.5倍的放大效果了(两个窗口的大小是一样的!!都是400*400)

3.首先实现小框框跟着鼠标移动的功能(本文设置鼠标总是在小框框的中心位置)

4.再实现放大窗口中的图片随着小框框的移动实现自身移动

5.鼠标(小框框)向右移动,放大窗口中的图片是要向左移动的!他们的方向总是相反

6.小框框大小不是随意设置,与放大倍数有关,本文放大2.5倍,则原图窗口应该也是小框框大小的2.5倍,即小框框大小160*160

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易放大镜的实现</title>
<style>
body,ul,li{padding: 0;margin: 0;list-style: none;}
.orig,.fd{
width: 400px;
height: 400px;
border:1px solid red;
position: absolute;
}
.fd{ left:410px;
top:0;
overflow: hidden;
display: none;
} .blocks{
/*小图的宽高比例
窗口的宽度 / 大图的宽度 * 窗口的宽度
*/
width:160px;
height:160px;
background:rgba(254,238,167,.4);
position: absolute;
left: 0;
top:0;
display: none;
}
</style>
</head>
<body>
<!-- 建立显示原图窗口 --> <div class="orig"> <!-- 插入要放大的图片 -->
<img src="./images/3.jpg" alt="" width="400"> <!-- 加入用于锁定放大区域的小框框 -->
<div class="blocks"></div>
</div> <!-- 建立显示放大图片的窗口 -->
<div class="fd"><img src="./images/3.jpg" alt="" style="position: absolute;">
</div> <script src="./jquery-1.8.3.min.js"></script>
<script>
// 绑定鼠标移入原图窗口事件
$('.orig').mouseover(function(e){
$('.fd').css('display','block');
$('.blocks').css('display','block'); })
//绑定鼠标在原图窗口移动的事件
$('.orig').mousemove(function(e){ // 获取鼠标当前的位置
var x=e.clientX;
var y=e.clientY;
// 获取原图窗口距离文档的偏移位置
var sX=$('.orig').offset().left;
var sY=$('.orig').offset().top; // 计算鼠标的相对位置(相对于原图窗口的偏移距离)
var mx=x-sX;
var my=y-sY; // 获取小框框的宽高
var mw=$('.blocks').width()/2;
var mh=$('.blocks').height()/2; // 鼠标移动后小框框的移动距离
$('.blocks').css({left:mx-mw+'px',top:my-mh+'px'}); // 获取小框框的偏移位置
var lw=$('.blocks').position().left;
var lh=$('.blocks').position().top; // 判断边界(小框框只能在原图窗口范围内移动)
var maxW=$('.orig').width()-$('.blocks').width()
var maxH=$('.orig').height()-$('.blocks').height()
// 左边界
if(lw<=0){$('.blocks').css('left','0px');}
// 右边界
if(lw>=maxW){
$('.blocks').css('left',maxW+'px');
}
// 上边界
if(lh<=0){$('.blocks').css('top','0px');}
// 下边界
if(lh>=maxH){
$('.blocks').css('top',maxH+'px');
} // 获取小框框的偏移位置
var lw=$('.blocks').position().left;
var lh=$('.blocks').position().top;
// 计算鼠标在小图里的位置 *2.5计算大图移动的比例
var newX=lw*2.5;
var newY=lh*2.5; $('.fd img').css({left:-newX+'px',top:-newY+'px'});
})
//绑定鼠标离开原图窗口事件
$('.orig').mouseout(function(){
$('.fd').css('display','none');
$('.blocks').css('display','none');
})
</script>
</body>
</html>

jQuery实现网页放大镜功能的更多相关文章

  1. jQuery实现网页放大镜功能 转载

    京东等电商网站中可以对商品进行放大观察,本文要实现的就是模仿这个放大镜功能,大致效果如下图所示: 简要说明实现思路: 1.原图窗口与放大窗口插入的是同一个图片,不过原图窗口的图片要适当缩小,放大窗口图 ...

  2. jQuery插件:图片放大镜--jQuery Zoom

    本文转载于http://blog.csdn.net/xinhaozheng/article/details/4085644, 这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,m ...

  3. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  4. nodeJS实现简单网页爬虫功能

    前面的话 本文将使用nodeJS实现一个简单的网页爬虫功能 网页源码 使用http.get()方法获取网页源码,以hao123网站的头条页面为例 http://tuijian.hao123.com/h ...

  5. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

  6. 8款极具表现力的jQuery/CSS3网页菜单

    上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...

  7. Jquery对网页高度、宽度的操作

    Jquery获取网页的宽度.高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: doc ...

  8. 手动实现jQuery Tools里面tab功能

    平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...

  9. CentOS下Apache开启Gzip网页压缩功能

    1.进入/etc/httpd/conf下打开httpd.conf文件 开启Gzip压缩功能,即去掉LoadModule deflate_module modules/mod_deflate.so这行前 ...

随机推荐

  1. golang-练习3

    题目:将输入的字母变成其下一个字母,并且元音字母大写 package main import "fmt" func LetterChanges(str string) string ...

  2. CF 49E Common ancestor

    传送门 模拟赛T1就自闭了( 才不会说我是去刚T2了来着 感觉非常暴力的一个题? 出题人良心开大数据范围 n=100 还是原来的n^4*26算法我也是自闭了 不过貌似跑不到n^4? 真·大力出奇迹 一 ...

  3. Java EE模式和MVC

    Java EE模式 什么是模式? 开发过程中总结出来的约定俗成的"套路". Java EE经历的模式 model1模式 技术组成:JSP+JavaBean model1的弊端:随着 ...

  4. 1.xml简单介绍

    1.xml(eXtensible Markup Language)的简介 (1)xml: 可扩展标记型语言 - 标记型语言:例如html也是标记型语言,也是使用标签来操作的 - 可扩展:html里面的 ...

  5. freertos优秀博客收藏

    https://blog.csdn.net/zhzht19861011 朱工的专栏 专注/深入/分享 https://blog.csdn.net/xukai871105 xukai871105 专注于 ...

  6. springboot redis操作

    redis五大类型用法 Redis五大类型:字符串(String).哈希/散列/字典(Hash).列表(List).集合(Set).有序集合(sorted set)五种Controller:@Reso ...

  7. CGContextRef 使用小记

    . 用CGContextRef 画文字 在 UIView的 - (void)drawRect:(CGRect)rect {} 方法中进行 CGContextRef context = UIGraphi ...

  8. [CSP-S模拟测试]:旅行(数学+线段树)

    题目传送门(内部题12) 输入格式 第一行,一个整数$n$,代表树的点数.第二行,$n$个整数,第$i$个整数是$B_i$,描述排列$B$.接下来$n−1$行,每行两个整数$u,v$,描述一条树边$( ...

  9. phpredis报错信息:protocol error, got 'o' as reply type byte解决方案

    今天在前端调用PHP的接口时,有报错信息为:protocol error, got 'o' as reply type byte另外此错误有几率会重现,并不是必现的.十分疑惑,遂百度一下,发现是red ...

  10. mysql 查询结果增加自动递增的一列,排名,排序

      mysql中有时候需要对查询的结果排序,比如根据成绩获取排名信息等,需要增加一个自增的列,也就是排名信息 ; as sortid FROM a; 如果不支持写两条sql,可以用以下写法合成一条sq ...