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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 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实现的简单日历类
2014/11/29 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Python检测生僻字的实现方法
2016/10/23 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
入党自我鉴定范文
2013/10/04 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
2014最新离职证明范本
2014/09/12 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
死亡证明书样本说明
2014/10/18 职场文书
会议欢迎词范文
2015/01/27 职场文书
工程主管竞聘书
2015/09/15 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
浅谈Vue的computed计算属性
2022/03/21 Vue.js