Jquery实现图片放大镜效果的思路及代码(自写)


Posted in Javascript onOctober 18, 2013

网上一大堆限制多,文档也难看懂,而且麻烦~自己写了个。大笑

算法:

第一步:

放大图片的位置=鼠标所在的容器的宽或者高除以容器自身的高度和宽度,求出鼠标在容器中移动的百分比

第二部:

得到百分比之后

x=-(x百分比*图片的宽度-显示容器的宽度/2);

y=-(y百分比*图片的高度-显示容器的高度/2);

两个参数,x和y,就是大图的位置了,后面加了个显示容器的大小/2 是为了保证图片显示在中间。

效果图:
Jquery实现图片放大镜效果的思路及代码(自写) 
代码:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>商品信息</title> 
</head> 
<style> html,body,img,a,div{ 
margin: 0px; 
padding: 0px; 
border: 0px; 
font: 12px/150% Arial,Verdana,"宋体"; 
color: rgb(102, 102, 102); 
} 
div:after { 
clear: both; 
content: '.'; 
height:0; 
visibility: hidden; 
diplay: block; 
} 
div { 
zoom: 1; 
} 
.main-body{ 
text-align: center; 
padding: 15px; 
} 
.head-box{ 
height: 400px; 
border: #CCC 1px solid; 
} 
.head-box-left{ 
width: 300px; 
height: 390px; 
/*border: #CCC 1px solid;*/ 
float: left; 
padding: 3px; 
position: relative; 
} 
.head-box-right{ 
width: 500px; 
height: 390px; 
border: #CCC 1px solid; 
float: left; 
margin-left: 10px; 
} 
.goods-max-img{ 
width: 300px; 
height: 300px; 
display:block; 
border: #CCC 1px solid; 
position: relative; 
cursor: move; 
} 
.goods-img-list{ 
width: 300px; 
height: 80px; 
margin-top: 10px; 
} 
.goods-change{ 
display: block; 
float: left; 
width: 17px; 
height: 54px; 
background: url("../web/imgs/goods-change-btn.png"); 
} 
.change-prev{ 
margin-right: 5px; 
margin-left: 2px; 
} 
.change-prev:HOVER{ 
background-position: -34px 0px; 
} 
.change-next{ 
margin-left: 5px; 
background-position: -17px 0px; 
} 
.change-next:HOVER{ 
margin-left: 5px; 
background-position: -51px 0px; 
} 
.goods-img-list-box{ 
width: 250px; 
height: 54px; 
/*border:1px #CCC solid;*/ 
border: 0px 1px; 
float: left; 
position: relative; 
overflow: hidden; 
} 
.goods-img-list-box ul{ 
margin: 0px; 
padding: 0px; 
position: absolute; 
top: 1px; 
left: 0px; 
width: 500px; 
} 
.goods-img-list-box ul li{ 
display: block; 
float: left; 
width: 50px; 
height: 50px; 
border: #CCC 1px solid; 
margin-left: 3px; 
} 
.goods-img-list-box ul li a{ 
display: block; 
width: 100%; 
height: 100%; 
text-decoration: none; 
} 
.preview-box{ 
position: absolute; 
top: 0px; 
width: 500px; 
height: 500px; 
background-color: white; 
border: #CCC 1px solid; 
left: 310px; 
display: none; 
overflow: hidden; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
$(".goods-max-img").mousemove(function(event){ 
$(".preview-box").show(); 
//计算百分比 
var x=event.screenX; 
var y=event.screenY; 
x-=$(this).offset().left; 
y=y-$(this).offset().top-65; 
//得出比例 
x=(x/300).toFixed(2); 
y=(y/300).toFixed(2); 
//250 容器的大小/2 
x=-($("#preview-img").width()*x-250); 
y=-($("#preview-img").height()*y-250); 
$("#preview-img").css('top',y+'px'); 
$("#preview-img").css('left',x+'px'); 
document.title=x+","+y; 
}); 
$(".goods-max-img").mouseout(function(){ 
$(".preview-box").hide(); 
}); 
}); 
</script> 
<body> 
<div class="main-body"> 
<!-- 头部信息 --> 
<div class="head-box"> 
<!-- 头部左侧信息 --> 
<div class="head-box-left"> 
<!-- 商品大图 --> 
<a class="goods-max-img"> 
<img width="100%" height="100%" alt="加载中..." src="http://pic.desk.chinaz.com/file/201211/5/shierybizi7.jpg"> 
</a> 
<div class="preview-box"> 
<div style="width: 500px;height: 500px;overflow: hidden;"> 
<img id="preview-img" style="position: absolute;" alt="加载中..." src="http://pic.desk.chinaz.com/file/201211/5/shierybizi7.jpg"> 
</div> 
</div> 
<!-- 大图结束 --> 
<!-- 图片列表 --> 
<div class="goods-img-list"> 
<a href="javascript:void();" class="goods-change change-prev" title="上一张"></a> 
<div class="goods-img-list-box"> 
<ul> 
<li><a href="javascript:void()">8</a></li> 
<li><a href="javascript:void()">7</a></li> 
<li><a href="javascript:void()">6</a></li> 
<li><a href="javascript:void()">5</a></li> 
<li><a href="javascript:void()">3</a></li> 
<li><a href="javascript:void()">3</a></li> 
<li><a href="javascript:void()">2</a></li> 
</ul> 
</div> 
<a href="javascript:void();" class="goods-change change-next" title="下一张"></a> 
</div> 
<!-- 图片列表结束 --> 
</div> 
<!-- 头部左侧信息结束 --> 
<div class="head-box-right"></div> 
</div> 
<!-- 头部信息结束 --> 
<!-- 主体内容 --> 
<div class="body-content"> 
</div> 
<!-- 主体内容结束 --> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
通过length属性判断jquery对象是否存在
Oct 18 #Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 #Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 #Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 #Javascript
js实现的常用的左侧导航效果
Oct 17 #Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 #Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 #Javascript
You might like
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
Python多继承顺序实例分析
2018/05/26 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
跑出一片天观后感
2015/06/08 职场文书
旗帜观后感
2015/06/08 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL