‹‹ 上一主题 | 下一主题 ››
发新话题
打印

关于图片切换的问题

eastgreat [楼主]

新手上路

帖子
202 
体力
16  
威望
0  
离线
25 天
1# 大 中 小 发表于 2008-6-29 12:59 
效果如下:
http://www.zcool.com.cn/preview/code/css/34/08/

想请问一下,当点击小图时,顶上出现大图,有没有办法,当点击大图时再弹出一张大图呢?
请哪位帮忙解答一下,谢谢!



代码如下:
引用:
<!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=gbk" />
<title>Image Replacement_站酷（ZCOOL）_www.zcool.com.cn</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
<!--
$(document).ready(function(){

       $("h2").append('<em></em>')

       $(".thumbs a").click(function(){
       
              var largePath = $(this).attr("href");
              var largeAlt = $(this).attr("title");
              
              $("#largeImg").attr({ src: largePath, alt: largeAlt });
              
              $("h2 em").html(" (" + largeAlt + ")"); return false;
       });
       
});

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>

<style type="text/css">
body {
       margin: 20px auto;
       padding: 0;
       width: 580px;
       font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
       font: bold 190%/100% Arial, Helvetica, sans-serif;
       margin: 0 0 .2em;
}
h2 em {
       font: normal 80%/100% Arial, Helvetica, sans-serif;
       color: #999999;
}
#largeImg {
       border: solid 1px #ccc;
       width: 550px;
       height: 400px;
       padding: 5px;
}
.thumbs img {
       border: solid 1px #ccc;
       width: 100px;
       height: 100px;
       padding: 4px;
}
.thumbs img:hover {
       border-color: #FF9900;
}
</style>
</head>

<body>

<h2>Illustrations</h2>

<p><img src="images/img1-lg.jpg" alt="Large image" id="largeImg" /></p>

<p class="thumbs">
       <a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a>
       <a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" onclick="MM_goToURL('parent','../images/canvas/classicality/01/art_pic_big_01.jpg');return document.MM_returnValue" /></a></p>
<br />
</body>
</html>

TOP

caiying2007

版主

帖子
2653 
体力
5062  
威望
10  
2# 大 中 小 发表于 2008-7-1 15:56 
(套用 )

 提示：您可以先修改部分代码再运行
[ 本帖最后由 caiying2007 于 2008-7-1 15:59 编辑 ]

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题