|
|
引入JQuery库, 获取附件Image包,尽可看到效果
<!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>Image Change Show</title><script src="js/jquery-1.4.2.js" type="text/javascript"></script><script type="text/javascript">$(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;});});</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: 90px; padding: 4px;}.thumbs img:hover{border-color: #FF9900;}</style></head><body><h2>Show Image Name</h2><p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image"></img></p><p class="thumbs"><a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-lg.jpg" /></a><a href="images/img3-lg.jpg" title="Image 2"><img src="images/img3-lg.jpg" /></a><a href="images/img4-lg.jpg" title="Image 2"><img src="images/img4-lg.jpg" /></a><a href="images/img5-lg.jpg" title="Image 2"><img src="images/img5-lg.jpg" /></a><a href="images/img6-lg.jpg" title="Image 2"><img src="images/img6-lg.jpg" /></a></p></body></html> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡