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 相关文章推荐
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
原生javascript实现分页效果
Apr 21 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
JS实现瀑布流效果
Mar 07 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大文件分块上传功能实例详解
2019/07/22 PHP
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
最短的IE判断代码
2011/03/13 Javascript
js获取class的所有元素
2013/03/28 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
javascript 动态创建表格
2015/01/08 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
在vue中获取dom元素内容的方法
2017/07/10 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Python中实现参数类型检查的简单方法
2015/04/21 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
django fernet fields字段加密实践详解
2019/08/12 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
如何利用find命令查找文件
2016/11/18 面试题
总经理秘书工作职责
2013/12/26 职场文书
学校大课间活动方案
2014/01/30 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
房产分割协议书范文
2014/11/21 职场文书
苏州园林导游词
2015/02/03 职场文书