使用jQuery编的选美大赛示例,效果请看:http://keleyi.com/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.com/keleyi/phtml/topic/index/keleyixuanmei.css" />
<link rel="stylesheet" href="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/css/eggplant/jquery-ui.min.css" /> 
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script src="http://keleyi.com/keleyi/phtml/jqplug/3/keleyijs.js" type="text/javascript"></script>
<script src="http://keleyi.com/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://keleyi.com/a/bjac/xkqqoac2.htm" target="_blank">原文</a></div>
<div id="select-keleyi-com">
<ul>
<li><img src="http://keleyi.com/image/a/mdvii14p.jpg" keleyichoice="http://keleyi.com/image/a/5tgcl2rf.jpg" alt="" /></li>
<li><img src="http://keleyi.com/image/a/968oqhtf.jpg" keleyichoice="http://keleyi.com/image/a/ib7jhc5g.jpg" alt="" /></li>
<li><img src="http://keleyi.com/image/a/pv247yqk.jpg" keleyichoice="http://keleyi.com/image/a/iqoe02d1.jpg" alt="" /></li>
<li><img src="http://keleyi.com/image/a/crgi0c5y.jpg" keleyichoice="http://keleyi.com/image/a/fsw6bvki.jpg" alt="" /></li>
<li><img src="http://keleyi.com/image/a/30nfiqwo.jpg" keleyichoice="http://keleyi.com/image/a/na2ouhst.jpg" alt="" /></li>
<li><img src="http://keleyi.com/image/a/txqve5vj.jpg" keleyichoice="http://keleyi.com/image/a/01i4pfnm.jpg" alt="" /></li>
<li><img src="http://keleyi.com/image/a/oo0coq69.jpg" keleyichoice="http://keleyi.com/image/a/vnb53fg9.jpg" alt="" /></li>
<li><img src="http://keleyi.com/image/a/iuy95nqp.jpg" keleyichoice="http://keleyi.com/image/a/4mpr7wo9.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.com/keleyi/phtml/topic/index/keleyixuanmei.js"></script>
</body>
</html>

 

本示例使用了jquery ui dialog,请参考:http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm

以及jQuery删除元素往外飞,请参考:http://keleyi.com/a/bjac/fds76xqw.htm

原文:http://keleyi.com/a/bjac/xkqqoac2.htm

Web前端资源:http://www.cnblogs.com/jihua/p/webfront.html

posted on 2013-10-24 16:02  计划  阅读(1350)  评论(0编辑  收藏  举报