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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
vscode自定义vue模板的实现
Jan 27 Vue.js
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下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
基于数据归一化以及Python实现方式
2018/07/11 Python
python组合无重复三位数的实例
2018/11/13 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
党员学习新党章思想汇报
2014/10/25 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers