jQuery实现图片放大预览实现原理及代码


Posted in Javascript onSeptember 12, 2013

对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览。以下是代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery图片预览</title> 
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
<style type="text/css"> 
body{font-size:12px; padding:50px;} 
.clsImg{padding-top:300px;} 
.imgAttr{position:absolute; height:225px; width:300px; border:1px solid #ccc; margin-left:135px; display:none;} 
</style> 
<script type="text/javascript"> 
$(function () { 
var x = 0; 
var y = 0; 
$("img").mouseover(function (e) { //鼠标移动到图片上添加事件,显示放大图片 
$("#imgShow").attr("src", this.src).show(); 
}); 
$("img").mouseout(function () { //鼠标从图片移开图片隐藏 
$("#imgShow").hide(); 
}); 
}) 
</script> 
</head> 
<body> 
<img class="imgAttr" id="imgShow" src="" alt=""/> 
<img class="clsImg" src="img1.jpg" alt=""/> 
<img class="clsImg" src="img2.jpg" alt=""/> 
<img class="clsImg" src="img3.jpg" alt=""/> 
<img class="clsImg" src="img4.jpg" alt=""/> 
</body> 
</html>

初始页面:
jQuery实现图片放大预览实现原理及代码 
鼠标放到第三个图片的效果:
jQuery实现图片放大预览实现原理及代码
Javascript 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
详解vue-router基本使用
Apr 18 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
jquery foreach使用示例
Sep 12 #Javascript
jquery 追加tr和删除tr示例代码
Sep 12 #Javascript
实现只能输入数字的input不用replace方法
Sep 12 #Javascript
jQuery 三击事件实现代码
Sep 11 #Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 #Javascript
查找iframe里元素的方法可传参
Sep 11 #Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 #Javascript
You might like
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
详解JS函数防抖
2020/06/05 Javascript
Python基础学习之常见的内建函数整理
2017/09/06 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
餐厅采购员岗位职责
2014/03/06 职场文书
小学生作文评语
2014/04/18 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
社区务虚会发言材料
2014/10/20 职场文书
销售开票员岗位职责
2015/04/15 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
图书馆义工感想
2015/08/07 职场文书