jQuery柯樂義選美大賽
編輯：JQuery常見問題
學習jQuery，練習一些例子也是很有幫助的。
下面給出一個練習的例子：jQuery選美大賽。
本示例使用排除法選美。在頁面上列出參賽選手的圖片，要先排除哪位選手，就雙擊她的圖片，圖片會消失，最後剩下的參賽者就是冠軍。
效果請看：http:///keleyi/phtml/topic/
以下是HTML文件代碼：
<!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>
<title>jquery選美大賽-</title>
<link rel="Stylesheet" href="http:///keleyi/phtml/topic/index/keleyixuanmei.css" />
<link rel="stylesheet" href="http:///keleyi/pmedia/jquery/ui/1.10.3/css/eggplant/jquery-ui.min.css" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script src="http:///keleyi/phtml/jqplug/3/keleyijs.js" type="text/javascript"></script>
<script src="http:///keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
</head>
<body>
<div style="width:860px;margin:0px auto;text-align:center;">
<h1>·選美大賽</h1>
<div>使用排除法選美。要先排除哪位選手，就雙擊她的圖片，最後剩下的就是冠軍。<a href ="http:///a/bjac/xkqqoac2.htm" target="_blank">原文</a></div>
<div id="select-keleyi-com">
<ul>
<li><img src="http:///image/a/mdvii14p.jpg" keleyichoice="http:///image/a/5tgcl2rf.jpg" alt="" /></li>
<li><img src="http:///image/a/968oqhtf.jpg" keleyichoice="http:///image/a/ib7jhc5g.jpg" alt="" /></li>
<li><img src="http:///image/a/pv247yqk.jpg" keleyichoice="http:///image/a/iqoe02d1.jpg" alt="" /></li>
<li><img src="http:///image/a/crgi0c5y.jpg" keleyichoice="http:///image/a/fsw6bvki.jpg" alt="" /></li>
</ul>
</div>
</div>
<div id="dialog-keleyi-com" title="選美大賽冠軍">
<p><img id="champion-keleyi-com" src="" alt="選美大賽冠軍" /></p>
<p>謝謝選擇我為選美大賽冠軍，祝您幸運！</p>
</div>
<script type="text/javascript" src="http:///keleyi/phtml/topic/index/keleyixuanmei.js"></script>
</body>
</html>
本示例使用了jquery ui dialog，請參考：http:///a/bjac/5939d3b2c920ff6d.htm
以及jQuery刪除元素往外飛，請參考：http:///a/bjac/fds76xqw.htm
下面給出一個練習的例子：jQuery選美大賽。
本示例使用排除法選美。在頁面上列出參賽選手的圖片，要先排除哪位選手，就雙擊她的圖片，圖片會消失，最後剩下的參賽者就是冠軍。
效果請看：http:///keleyi/phtml/topic/
以下是HTML文件代碼：
<!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>
<title>jquery選美大賽-</title>
<link rel="Stylesheet" href="http:///keleyi/phtml/topic/index/keleyixuanmei.css" />
<link rel="stylesheet" href="http:///keleyi/pmedia/jquery/ui/1.10.3/css/eggplant/jquery-ui.min.css" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script src="http:///keleyi/phtml/jqplug/3/keleyijs.js" type="text/javascript"></script>
<script src="http:///keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
</head>
<body>
<div style="width:860px;margin:0px auto;text-align:center;">
<h1>·選美大賽</h1>
<div>使用排除法選美。要先排除哪位選手，就雙擊她的圖片，最後剩下的就是冠軍。<a href ="http:///a/bjac/xkqqoac2.htm" target="_blank">原文</a></div>
<div id="select-keleyi-com">
<ul>
<li><img src="http:///image/a/mdvii14p.jpg" keleyichoice="http:///image/a/5tgcl2rf.jpg" alt="" /></li>
<li><img src="http:///image/a/968oqhtf.jpg" keleyichoice="http:///image/a/ib7jhc5g.jpg" alt="" /></li>
<li><img src="http:///image/a/pv247yqk.jpg" keleyichoice="http:///image/a/iqoe02d1.jpg" alt="" /></li>
<li><img src="http:///image/a/crgi0c5y.jpg" keleyichoice="http:///image/a/fsw6bvki.jpg" alt="" /></li>
</ul>
</div>
</div>
<div id="dialog-keleyi-com" title="選美大賽冠軍">
<p><img id="champion-keleyi-com" src="" alt="選美大賽冠軍" /></p>
<p>謝謝選擇我為選美大賽冠軍，祝您幸運！</p>
</div>
<script type="text/javascript" src="http:///keleyi/phtml/topic/index/keleyixuanmei.js"></script>
</body>
</html>
本示例使用了jquery ui dialog，請參考：http:///a/bjac/5939d3b2c920ff6d.htm
以及jQuery刪除元素往外飛，請參考：http:///a/bjac/fds76xqw.htm
小編推薦
熱門推薦