JS实现鼠标移动到缩略图显示大图的图片放大效果

更新时间：2012年12月11日 12:10:24 作者：

一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，就是最棒的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片提示效果</title> <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script> <style type="text/css"> body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;} /*tooltip*/ #tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;} </style> <script type="text/javascript"> $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var imgTitle = this.myTitle?""+ this.myTitle : ""; var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素 document.write(tooltip); $("body").append(tooltip); //把它追加到文档中 $("#tooltip").css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }).fadeIn(600); //设置x坐标和y坐标，并且显示 }).mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove(); //移除 }).mousemove(function(e){ $("#tooltip").css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }); }); }) </script> </head> <body> <h3>效果</h3> <ul> <li><a class="tooltip" title="苹果 iPod" href="//img.jbzj.com/file_images/article/201212/picmove_2/wall1.jpg"><img src="//img.jbzj.com/file_images/article/201212/picmove_2/wall_s1.jpg" alt="苹果 iPod"></a></li> <li><a class="tooltip" title="苹果 iPod nano" href="//img.jbzj.com/file_images/article/201212/picmove_2/wall2.jpg"><img src="//img.jbzj.com/file_images/article/201212/picmove_2/wall_s2.jpg" alt="苹果 iPod nano"></a></li> <li><a class="tooltip" title="苹果 iPone" href="//img.jbzj.com/file_images/article/201212/picmove_2/wall3.jpg"><img src="//img.jbzj.com/file_images/article/201212/picmove_2/wall_s3.jpg" alt="苹果 iPone"></a></li> <li><a class="tooltip" title="苹果 Mac" href="//img.jbzj.com/file_images/article/201212/picmove_2/wall4.jpg"><img src="//img.jbzj.com/file_images/article/201212/picmove_2/wall_s4.jpg" alt="苹果 Mac"></a></li> </ul> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

html+js+highcharts绘制圆饼图表的简单实例
下面小编就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
js 图片轮播(5张图片)
网上比较常见的用jquery实现的图片轮播效果代码。
2008-12-12
一个不错的给图片添加说明文字的动态层的实现代码
一个不错的给图片添加说明文字的动态层的实现代码，需要的朋友可以参考下
2013-04-04
多图幻灯Wipe擦洗效果
多图幻灯Wipe擦洗效果...
2006-12-12
电子商务网站上的常用的js放大镜效果
电子商务网站经常用到简单模仿一下,需要的朋友可以参考下。
2011-12-12
超级简单的图片防盗(HTML),好用
超级简单的图片防盗(HTML),好用...
2007-04-04
javascript 火狐(firefox)不显示本地图片问题解决
在Firefox一直不能用js做出图片预览的效果，下面这个即可解决，用替换的方法实现firefox支持得的路径格式
2008-07-07
javascript实现的三维正方体(兼容ie7,ff)
2008-02-02
javascript 图片滑动切换代码
nVida网站的图片滑动特效，这里为了快速演示效果，去掉了原有的图片用数字来代替，你完全可以插入你想要的图片，本特效使用JS实现，用CSS配合固定图片，以滑动的方式切换相应的多张图片。
2010-03-03
js实现图片显示局部，鼠标经过显示全部的效果
2008-01-01

JS实现鼠标移动到缩略图显示大图的图片放大效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具