jquery预览图片实现鼠标放上去显示实际大小
2014-01-16 00:00
821 查看
<!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>
相关文章推荐
- jquery预览图片实现鼠标放上去显示实际大小
- jquery 预览图片,鼠标放上去显示实际大小的预览图片
- 分享一个jquery插件:实现类似淘宝上鼠标经过图片右侧显示大图的效果
- JS实现鼠标移上去显示图片或微信二维码
- 【简单】H5 jQuery鼠标移入移出改变图片大小动画的实现
- 利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码
- jquery实现简单鼠标经过图片预览效果
- jQuery实现鼠标经过图片预览大图效果
- Jquery实现鼠标放在图片上面显示大图效果
- jQuery动态改变图片显示大小(修改版)的实现思路及代码
- 图片上传生成缩略图,并使用JQuery实现鼠标移动到缩略图显示相应的大图的例子
- 基于JQuery的图片上传预览插件(图片预览、过滤文件类型、限制图片大小、图片显示后回调)
- Jquery鼠标放上去显示全名的实现方法
- JQuery实现鼠标移动图片显示描述层的方法
- jQuery实现鼠标经过图片预览大图效果
- jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
- jQuery 实现全选全不选,删除选中复选框所在行,鼠标悬停在图片上显示大图
- jQuery实现鼠标滑过预览图片大图效果的方法
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
- jQuery实现图片轮播且鼠标可控制显示,使用animate函数