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 相关文章推荐
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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
PHP新手上路(十一)
2006/10/09 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
python实现的简单RPG游戏流程实例
2015/06/28 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Python错误处理操作示例
2018/07/18 Python
Django实现表单验证
2018/09/08 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
高考自主招生自荐信
2013/10/20 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
《故乡》教学反思
2014/04/10 职场文书
二手车转让协议书
2015/01/29 职场文书
单位介绍信格式范文
2015/05/04 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js