鼠标放在图片上显示大图

发表于2013-04-10 20:11:31来源于创想网页设计工作室

次点击[] [] [] [打印] [关闭窗口] [评论]

欢迎大家加入创想工作室QQ群 网络瘫痪上不了网?电脑出故障?找破解软件?加入创想工作室QQ群,向大神求助,一步解决问题!QQ群号码:326338868[点此获取更多QQ群]
我们先看一下效果:



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

代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片提示效果</title>
<script type="text/javascript" src="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?"<br>"+ this.myTitle : "";
 var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素
$("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="/jscss/demoimg/wall1.jpg"><img src="/jscss/demoimg/wall_s1.jpg" alt="苹果 iPod"></a></li>
<li><a class="tooltip" title="苹果 iPod nano" href="/jscss/demoimg/wall2.jpg"><img src="/jscss/demoimg/wall_s2.jpg" alt="苹果 iPod nano"></a></li>
<li><a class="tooltip" title="苹果 iPone" href="/jscss/demoimg/wall3.jpg"><img src="/jscss/demoimg/wall_s3.jpg" alt="苹果 iPone"></a></li>
<li><a class="tooltip" title="苹果 Mac" href="/jscss/demoimg/wall4.jpg"><img src="/jscss/demoimg/wall_s4.jpg" alt="苹果 Mac"></a></li>
</ul>     
</body>
</html>

相关热词搜索:鼠标图片大图jquery

© copyright 2002-2024, 22BA.COM All Rights Reserved

网站备案号:粤ICP备19114910号

ChuangXiang Design Studio - WebDesign & Internet Marketing

关于我们业务范围联系我们开心一刻网站地图

QQ群一:326338868QQ群二:78712271

QQ群三:193078177

邮箱:news@22ba.com

地址:深圳市福田区金田路现代国际大厦2606