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实现的论坛常用的运行代码的效果
Jul 15 Javascript
模拟select的代码
Oct 19 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
使用JS动态显示文本
Sep 09 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
js生成word中图片处理方法
Jan 06 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
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
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
深入理解javascript prototype的相关知识
2019/09/19 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
python用户管理系统的实例讲解
2017/12/23 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python ubplot使用方法解析
2020/01/10 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
中国网上药店领导者:1药网
2017/02/16 全球购物
普通大学毕业生自荐信范文
2014/02/23 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
个性发展自我评价2015
2015/03/09 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
MySQL查询日期时间
2022/05/15 MySQL
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python