JQuery實現簡單美觀的圖片切換效果
[color=blue]引入JQuery庫, 獲取附件Image包,儘可看到效果[/color]
<!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>
相關文章
- jquery實現的具有漸變效果的圖片切換jQuery
- jQuery 圖片垂直切換效果詳解jQuery
- 簡單的圖片間隔指定時間切換效果
- javascript實現的圖片簡單切換程式碼例項JavaScript
- 點選按鈕實現圖片切換效果
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- 簡單實現一個全面屏切換效果
- 簡單介紹Vue實現滑鼠懸浮切換圖片srcVue
- JavaScript 圖片切換展示效果JavaScript
- jQuery選項卡切換圖片效果程式碼例項jQuery
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- jQuery手風琴圖片切換jQuery
- jquery實現的圖片預載入簡單介紹jQuery
- jQuery實現圖片尺寸自適應效果jQuery
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- 馬賽克效果的JS圖片切換程式碼JS
- 請問各位大佬,vue如何實現點選按鈕切換圖片的效果?Vue
- CSS滑鼠懸浮圖片模糊切換效果CSS
- activity切換無動畫效果的實現動畫
- android實現多圖片放大縮小的切換Android
- jquery中點選切換的實現jQuery
- 非常簡單的使用jqueryfancybox外掛實現的檢視圖片效果jQuery
- jquery如何用each遍歷實現一個排異切換的效果?jQuery
- 實現簡單的輪播圖(單張圖片、多張圖片)
- 用原生JS實現 圖片輪播切換 功能JS
- switchable圖片切換
- js和css3實現的圖片立體滾動切換效果程式碼例項JSCSSS3
- js點選實現多圖順序切換和迴圈切換效果程式碼JS
- jQuery點選按鈕實現div的隱藏和顯示切換效果jQuery
- 簡單實用的JDK版本切換JDK
- css3實現的美觀的提交按鈕效果CSSS3
- css實現滑鼠滑過切換背景圖片程式碼CSS
- iOS 簡單實現帶圖片的LabeliOS
- 用CSS實現Tab頁切換效果CSS
- jQuery簡單tab效果jQuery
- 圖片模糊效果實現(RenderScript)
- CSS3實現的美觀多級下拉選單效果程式碼例項CSSS3
- 簡單批處理,實現ip地址的自動切換