Jquery+CSS实现的大气漂亮图片切换效果代码
2012-02-06 10:53
1061 查看
代码简介:
Jquery+CSS实现的图片切换效果,很实用,比如可用于商城的商品详情页面,用来做商品展示等,根据您的需求改造成你最需要的。
代码内容:
View Code
代码来自:http://www.webdm.cn/webcode/a6851709-8e54-4993-a31c-0651c44181e9.html
Jquery+CSS实现的图片切换效果,很实用,比如可用于商城的商品详情页面,用来做商品展示等,根据您的需求改造成你最需要的。
代码内容:
View Code
<!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>Jquery+CSS实现的大气漂亮图片切换效果代码 - www.webdm.cn</title> <script type="text/javascript" src="http://www.webdm.cn/images/20091029/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; }); }); </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 id="largeImg" src="http://www.webdm.cn/images/20091029/img1-lg.jpg" alt="Large image" /></p> <p class="thumbs"> <a href="http://www.webdm.cn/images/20091029/img2-lg.jpg" title="Image 2"><img src="http://www.webdm.cn/images/20091029/img2-thumb.jpg" /></a> <a href="http://www.webdm.cn/images/20091029/img3-lg.jpg" title="Image 3"><img src="http://www.webdm.cn/images/20091029/img3-thumb.jpg" /></a> <a href="http://www.webdm.cn/images/20091029/img4-lg.jpg" title="Image 4"><img src="http://www.webdm.cn/images/20091029/img4-thumb.jpg" /></a> <a href="http://www.webdm.cn/images/20091029/img5-lg.jpg" title="Image 5"><img src="http://www.webdm.cn/images/20091029/img5-thumb.jpg" /></a> <a href="http://www.webdm.cn/images/20091029/img6-lg.jpg" title="Image 6"><img src="http://www.webdm.cn/images/20091029/img6-thumb.jpg" /></a> </p> </body> </html> <br /> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
代码来自:http://www.webdm.cn/webcode/a6851709-8e54-4993-a31c-0651c44181e9.html
相关文章推荐
- jquery+css实现动感的图片切换效果
- Js+css实现的一款漂亮宽屏图片切换代码
- jQuery代码实现图片墙自动+手动淡入淡出切换效果
- 纯CSS实现的漂亮的立体图片边框效果,阴影代码
- jquery实现LED广告牌旋转系统图片切换效果代码分享
- Javascript+CSS实现漂亮带缓冲效果的图片展示代码
- Javascript+CSS实现漂亮带缓冲效果的图片展示代码
- jquery+css实现动感的图片切换效果
- jQuery+css实现的切换图片功能代码
- 利用jquery的attr方法一行代码实现的简单的图片切换效果
- jQuery+css实现的切换图片功能代码
- jquery实现LED广告牌旋转系统图片切换效果代码分享
- 纯CSS实现的漂亮的立体图片边框效果,阴影代码
- 用JS+CSS实现多种图片漂亮效果的代码
- jquery实现初次打开有动画效果的网页TAB切换代码
- jQuery实现图片向左向右切换效果的简单实例
- jQuery实现图片轮播效果代码
- 通过CSS切换图片效果,点击这个图片可以实现连接功能,这里的图片在一张大图片中,每个并要切换的图片没有切换,通过disposition定位的方式做
- jquery实现多行文字图片滚动效果示例代码
- JS+CSS实现大气清新的滑动菜单效果代码