jquery预览图片实现鼠标放上去显示实际大小


Posted in Javascript onJanuary 16, 2014
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>jQuery图片预览-jQuery在线演示-jQuery学习</title> 
<link href="http://www.jquery001.com/css/Stylesheet_min.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<style type="text/css"> 
img 
{ 
border: none; 
} 
ul, li 
{ 
margin: 0; 
padding: 0; 
} 

li 
{ 
list-style: none; 
float: left; 
display: inline; 
margin-right: 10px; 
} 

#imglist img 
{ 
width: 150px; 
height: 120px; 
} 

#imgshow 
{ 
position: absolute; 
border: 1px solid #ccc; 
background: #333; 
padding: 5px; 
color: #fff; 
display: none; 
} 
</style> 
<script type="text/javascript"> 
var ShowImage = function () { 
xOffset = 10; 
yOffset = 30; 
$("#imglist").find("img").hover(function (e) { 
$("<img id='imgshow' src='" + this.src + "' />").appendTo("body"); 
//下面是两种样式赋值方法 
//$("#imgshow").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("slow"); 
$("#imgshow").css({"top":(e.pageY - xOffset) + "px","left":(e.pageX + yOffset) + "px"}).fadeIn("slow"); 
}, function () { 
$("#imgshow").remove(); 
}); 
}; 

jQuery(document).ready(function () { 
ShowImage(); 
}); 
</script> 

</head> 
<body> 
<div id="page-wrap"> 
<div id="content-wrap"> 
<div id="content-left" class="demo"> 
<ul id="imglist"> 
<li><a> 
<img src="http://g.hiphotos.baidu.com/image/w%3D2048/sign=0a53d9eca1cc7cd9fa2d33d90d39203f/35a85edf8db1cb13efa8fe12df54564e93584bea.jpg" alt="图片" /></a></li> 
<li><a> 
<img src="http://a0.att.hudong.com/70/44/14300000029584127555444098375.jpg" alt="图片" /></a></li> 
</ul> 
</div> 
</div> 

</div> 
</body> 
</html>
Javascript 相关文章推荐
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
jquery对元素拖动排序示例
Jan 16 #Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 #Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 #Javascript
js获取某元素的class里面的css属性值代码
Jan 16 #Javascript
JS可以控制样式的名称写法一览
Jan 16 #Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 #Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 #Javascript
You might like
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
Python正则表达式使用范例分享
2016/12/04 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python实现求数列和的方法示例
2018/01/12 Python
python实现AES加密与解密
2019/03/28 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python中比较两个列表的实例方法
2019/07/04 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
小学生元旦感言
2014/02/26 职场文书
个人工作主要事迹
2014/05/08 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
保送生自荐信
2015/03/06 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书