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对象是否可用的最正确方法分析
Oct 03 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
laravel 关联关系遍历数组的例子
2019/10/10 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
es6数值的扩展方法
2019/03/11 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
Linux下python制作名片示例
2018/07/20 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
会计应届生的自荐信
2013/12/13 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
关于远足的感想
2015/08/10 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫