JQ模块库09.12.08

设置字体: 小中大

本文章收藏综合各种流行的JQ特效，以标准化，模块化，语义化为基础达到结构，表现，行为完美分离。

<!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>HeMin JQ模块库 09.12.8 （www.hemin.cn/blog）</title> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/main.css" type="text/css" /> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/skin/skin_3.css" type="text/css" id="cssfile" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>  <script src="http://www.hemin.cn/jq/scripts/jquery.cookie.js" type="text/javascript">//cookie插件</script> <script src="http://www.hemin.cn/jq/scripts/jcarousellite.js" type="text/javascript">//jcarousellite插件实现图片无缝滚动</script> <script src="http://www.hemin.cn/jq/scripts/jquery.jqzoom.js" type="text/javascript">//jqzoom插件实现放大图片</script> <script src="http://www.hemin.cn/jq/scripts/jquery.thickbox.js" type="text/javascript">//thickbox插件弹出放大图片</script> <script src="http://www.hemin.cn/jq/scripts/jquery.progression.js" type="text/javascript">//progression插件</script> <script src="http://www.hemin.cn/jq/scripts/jquery.pstrength-min.1.2.js" type="text/javascript">//pstrength插件</script> <script src="http://www.hemin.cn/jq/scripts/jquery.soChange.js" type="text/javascript">//soChange插件</script> <script src="http://www.hemin.cn/jq/scripts/tipswindown.js" type="text/javascript">//tipswindown插件</script> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/tipswindown.css" type="text/css" /> <link rel="stylesheet" href="http://www.hemin.cn/jq/styles/thickbox.css" type="text/css" /> <script src="http://www.hemin.cn/jq/scripts/jq-main.js" type="text/javascript"></script> </head> <body> <div id="box">以标准化，模块化，语义化为基础达到结构，表现，行为完美分离。<span class="close">X</span></div> <div id="warp"> <div id="header"> <a href="#" class="logo"title="HeMin JQ模块库">HeMin JQ模块库 09.12.8</a> <ul id="skin"> <li id="skin_0" title="蓝色">蓝色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色" class="selected" >天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</li> </ul> </div> <div id="navigation" class="nav"> <ul> <li><a href="#">HeMin-01</a></li> <li><a href="#">HeMin-02</a> <ul> <li><a href="#">HeMin-02-01</a></li> <li><a href="#">HeMin-02-02</a></li> <li><a href="#">HeMin-02-03</a></li> </ul> </li> <li><a href="#">HeMin-03</a> <ul> <li><a href="#">HeMin-03-01</a></li> <li><a href="#">HeMin-03-02</a></li> </ul> </li> <li><a href="#">HeMin-04</a> <ul> <li><a href="#">HeMin-04-01</a></li> <li><a href="#">HeMin-04-02</a></li> <li><a href="#">HeMin-04-03</a></li> <li><a href="#">HeMin-04-04</a></li> </ul> </li> <li><a href="#">HeMin-05</a></li> </ul> </div> <div id="main"> <div id="notice"> <ul class="scroll-container"> <li><a href="#" class="tooltip" title="HeMin-01">1.HeMin-01111111111111111111111</a></li> <li><a href="#" class="tooltip" title="HeMin-02">2.HeMin-02222222222222222222222</a></li> <li><a href="#" class="tooltip" title="HeMin-03">3.HeMin-03333333333333333333333</a></li> <li><a href="#" class="tooltip" title="HeMin-04">4.HeMin-04444444444444444444444</a></li> <li><a href="#" class="tooltip" title="HeMin-05">5.HeMin-05555555555555555555555</a></li> <li><a href="#" class="tooltip" title="HeMin-06">6.HeMin-06666666666666666666666</a></li> <li><a href="#" class="tooltip" title="HeMin-07">7.HeMin-07777777777777777777777</a></li> <li><a href="#" class="tooltip" title="HeMin-08">8.HeMin-08888888888888888888888</a></li> </ul> </div> <div class="part_l"> <div id="news"> <h3>新闻从上滚动</h3> <div class="scrollNews"> <ul> <li><a href="#" class="tooltip" title="HeMin-01">1.HeMin-01111111111111111111111</a></li> <li><a href="#" class="tooltip" title="HeMin-02">2.HeMin-02222222222222222222222</a></li> <li><a href="#" class="tooltip" title="HeMin-03">3.HeMin-03333333333333333333333</a></li> <li><a href="#" class="tooltip" title="HeMin-04">4.HeMin-04444444444444444444444</a></li> <li><a href="#" class="tooltip" title="HeMin-05">5.HeMin-05555555555555555555555</a></li> <li><a href="#" class="tooltip" title="HeMin-06">6.HeMin-06666666666666666666666</a></li> <li><a href="#" class="tooltip" title="HeMin-07">7.HeMin-07777777777777777777777</a></li> <li><a href="#" class="tooltip" title="HeMin-08">8.HeMin-08888888888888888888888</a></li> </ul> </div> <div class="module_up_down" ><span>动画式收缩展开</span></div> </div> <div id="procatalog"> <h3>分类树展开和关闭</h3> <ul class="m-treeview"> <li class="m-expanded"> <span>父栏目1</span> <ul class="c-treeview"> <li>子栏目1</li> <li>子栏目2</li> </ul> </li> <li class="m-expanded"> <span>父栏目2</span> <ul class="c-treeview"> <li>子栏目1</li> <li>子栏目2</li> </ul> </li> <li class="m-expanded"> <span>父栏目3</span> <ul class="c-treeview"> <li>子栏目1</li> <li>子栏目2</li> </ul> </li> </ul> <div class="module_up_down" ><span>动画式收缩展开</span></div> </div> <div id="tab"> <h3>选项卡</h3> <div class="content"> <div class="tab_menu"> <ul> <li class="selected">HeMin01</li> <li>HeMin02</li> <li>HeMin03</li> </ul> </div> <div class="tab_box"> <div class="tab-content"> 111111111111111111111111111 </div> <div class="tab-content hide"> 222222222222222222222222222 </div> <div class="tab-content hide"> 333333333333333333333333333 </div> </div> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="magnifier"> <h3>放大镜</h3> <div class="jqzoom"><img src="http://www.hemin.cn/jq/images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="http://www.hemin.cn/jq/images/blue_one_big.jpg" id="bigImg"/></div> <span> <a href="http://www.hemin.cn/jq/images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"> <img alt="点击看大图" src="http://www.hemin.cn/jq/images/look.gif" /> </a> </span> </div> <div id="switch_photo"> <h3>小图切换大图</h3> <div class="big_img"> <img src="http://www.hemin.cn/jq/images/pro_img/blue_one_small.jpg" height="300" width="298" alt="" /> </div> <ul class="imgList"> <li class="img01"><img src="http://www.hemin.cn/jq/images/pro_img/blue_one.jpg" alt="" /></li> <li class="img02"><img src="http://www.hemin.cn/jq/images/pro_img/green_one.jpg" alt="" /></li> <li class="img03"><img src="http://www.hemin.cn/jq/images/pro_img/yellow_one.jpg" alt="" /></li> <li class="img04"><img src="http://www.hemin.cn/jq/images/pro_img/green_one.jpg" alt="" /></li> </ul> </div> <div id="MultiSelects"> <h3>MultiSelects(左右选框)</h3> <div class="MultiSelects-content"> <table width="298" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="29"> <input type="button" name="s1up" id="s1up" value="↑" /><br /> <input type="button" name="s1down" id="s1down" value="↓" /></td> <td width="100"><select name="s1" size="10" multiple="multiple" id="s1" style=" width:100px;"> <option value="opt01">option01</option> <option value="opt02">option02</option> <option value="opt03">option03</option> <option value="opt04">option04</option> <option value="opt05">option05</option> <option value="opt06">option06</option> <option value="opt07">option07</option> <option value="opt08">option08</option> <option value="opt09">option09</option> <option value="opt10">option10</option> </select></td> <td width="37" align="center"><input type="button" name="addall" id="addall" value=">|" /><br /><input type="button" name="add" id="add" value=">>" /><br /><input type="button" name="remove" id="remove" value="<<" /><br /><input type="button" name="removeall" id="removeall" value="|<" /></td> <td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:100px;"> </select></td> <td width="119"> <input type="button" name="s2up" id="s2up" value="↑" /><br /> <input type="button" name="s2down" id="s2down" value="↓" /></td> </tr> </table> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="progress-bar"> <h3>进程条</h3> <div class="boxed"> <div class="right"> normal: <div class="progressbar_nojs">50 %</div> </div> <div class="left"> jquery demo:<br/> <span id="rain">50</span> %<div class="progressbar" id="progress-1">50 %</div> Value : <input type="text" id="progress-current" value="50" size="5" /> <input type="button" value="edit" id="progress-button" /> <span>20 %</span><div class="progressbartext" >20 %</div> </div> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="password-length"> <h3>密码长度提示</h3> <div class="password-content"> <strong>密码：</strong><input class="password" type="password" name="Password" size="20"> </div> <div class="module_up_down" ><span>收缩</span></div> </div> <div id="container"> <h3>TipsWindown 1.0弹出层</h3> <div class="content"> <ol> <li> 弹出文本信息提示： <br /> <blockquote>tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")</blockquote> <button id="text1">点击我弹出提示</button> </li> <li> 弹出页面中的某个ID的html： <br /> <blockquote>tipsWindown("标题","id:testID","300","200","true","","true","id")</blockquote> <button id="id1">点击我弹出提示</button> <div id="testID" style="display: none"> <p>我是测试ID里的内容</p> <br /> 我换行了... </div> </li> <li> 弹出图片： <br /> <blockquote>tipsWindown("图片","img:图片路径","250","150","true","","true","img")</blockquote> <button id="img1">点击我弹出提示</button> </li> <li> get加载一个.html文件（也可以是.php/.asp?id=4之类的）： <br /> <blockquote>tipsWindown("标题","url:get?test.html","250","150","true","","true","text"); </blockquote> <button id="url1">点击我弹出提示</button> </li> <li> 加载一个页面到框架显示：<br /> <blockquote>tipsWindown("标题","iframe:http://hemin.cn","900","580","true","","true","leotheme"); </blockquote> <button id="iframe1">点击我弹出提示</button> </li> <li> 弹出一个不能拖动且没有遮罩背景的文本信息层： <br /> <blockquote>tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")</blockquote> <button id="text2">点击我弹出提示</button> </li> <li> 弹出一个不能拖动，三秒钟自动关闭的层： <br /> <blockquote>tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")</blockquote> <button id="text3">点击我弹出提示</button> </li> </ol> </div> <div class="module_up_down" ><span>收缩</span></div> </div> </div> <div class="part_r"> <div id="pro-list"> <h3>新款上市模块横向滚动</h3> <div class="pro-content"> <ul> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img01</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img02</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img03</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img04</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img01</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img02</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img03</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img04</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img01</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img02</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img03</a> </li> <li> <a href="#"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" alt="" height="124" width="124" /></a> <a href="#" class="title">img04</a> </li> </ul> </div> <div class="module_left_right"><span class="goLeft">左移动</span><span class="goRight">右移动</span></div> </div> <div id="change"> <h3>1.默认最简易模式</h3> <div class="changeBox_a1" id="change_1"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> </div> </div> <div id="change"> <h3>2.带前后按钮</h3> <div class="changeBox_a1" id="change_2"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> </div> </div> <div id="change"> <h3>3.数字导航切换及自定义当前数字的class</h3> <div class="changeBox_a1" id="change_3"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <ul class="ul_change_a2"> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> </ul> </div> </div> <div id="change" class="change-ico-title"> <h3>4.切换对象为其他，这里为包含图片和标题的层</h3> <div class="changeBox_a1" id="change_32"> <div class="changeDiv"> <h4><a href="#">图片111111111说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#1"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> </div> <div class="changeDiv"> <h4><a href="#">图片222222222说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#2"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> </div> <div class="changeDiv"> <h4><a href="#">图片333333333说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#3"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> </div> <div class="changeDiv"> <h4><a href="#">图片444444444说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h4> <a href="#4"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> </div> <ul class="ul_change_a2"> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> </ul> </div> </div> <div id="change"> <h3>5.平滑过渡间歇时间为0</h3> <div class="changeBox_a1" id="change_33"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> <ul class="ul_change_a1"> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/1_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/2_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/3_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/4_s.jpg" width="67" height="40" alt="" /></a></li> </ul> </div> </div> <div id="change" class="change-ico-but"> <h3>6.带导航图标及按钮</h3> <div class="changeBox_a1" id="change_4"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> <ul class="ul_change_a1"> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/1_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/2_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/3_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/4_s.jpg" width="67" height="40" alt="" /></a></li> </ul> </div> </div> <div id="change"> <h3>7.不自动切换</h3> <div class="changeBox_a1" id="change_5"> <a href="#1" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/1.jpg" width="672" height="250" alt="" /></a> <a href="#2" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/2.jpg" width="672" height="250" alt="" /></a> <a href="#3" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/3.jpg" width="672" height="250" alt="" /></a> <a href="#4" class="a_bigImg"><img src="http://www.hemin.cn/jq/images/ad/4.jpg" width="672" height="250" alt="" /></a> <a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a> <ul class="ul_change_a1"> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/1_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/2_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/3_s.jpg" width="67" height="40" alt="" /></a></li> <li><a href="#"><img src="http://www.hemin.cn/jq/images/ad/4_s.jpg" width="67" height="40" alt="" /></a></li> </ul> </div> </div> </div> </div> <div id="f_links_box" class="posr"> <a href="#" id="f_left"></a><a href="#" id="f_right"></a> <div id="f_links_list"> <ul> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo"/></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> <li><img src="http://www.hemin.cn/jq/images/nophoto.gif" width="88" height="31" alt="logo" /></li> </ul> </div> </div> <div id="footer"> <p>JQ模块库版权所有提供广大JQ学习爱好者</p> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

（代码都是以模块规划的，有注释说明。大家需要直接拷贝即可,插件不懂的可以谷歌百度搜一下,查看代码用firebug插件）

功能如下：
1.皮肤样式切换
2.二级菜单
3.公告文字渐变
4.新闻从上滚动
5.选项卡
6.动画式收缩展开
7.分类树展开和关闭
8.使用jqzoom图片弹出浏览放大效果
9.使用jqzoom放大镜
10.jquery插件jCarouselLite实现图片无缝滚动
11.新款上市模块横向滚动
12.MultiSelects(左右选框)
13.密码长度提示
14.TipsWindown 1.0弹出层
15.切换对象
等待更新。。。。

如有代码错误或者没有你需要的JQ效果，麻烦大家评价说出来。谢谢！！！！

下载：JQ模块库12.8.rar

十二月 8th, 2009 in JS/JQuery, 原创作品 | tags: JQ, 库, 模块化, 语义化 | 1,886 次浏览

35 Comments

bluefly 说：

2009/12/08于10:16 下午

确实是好东西。。谢谢He Min的整理
有用(1) 没用(0)

[回复]
jiba 说：

2009/12/08于10:20 下午

不错，辛苦了。支持一下
我邮箱 jiba@niu.bi
有用(0) 没用(0)

[回复]
snomy 说：

2009/12/08于11:15 下午

好东西，好东西~
我邮箱：snomystudio@gmail.com
有用(0) 没用(0)

[回复]
chenjunxi 说：

2009/12/09于1:33 上午

支持一下。
chenjunxi520@126.com
有用(0) 没用(0)

[回复]
xiaoran 说：

2009/12/09于8:12 上午

博主太厉害了
hi_ran@foxmail.com
谢谢！
有用(0) 没用(0)

[回复]
付海波说：

2009/12/09于9:17 上午

谢谢了！
有用(0) 没用(0)

[回复]
付海波说：

2009/12/09于9:18 上午

541538356@qq.com
有用(0) 没用(0)

[回复]
绣财说：

2009/12/09于9:33 上午

icssjs(at)gmail.com
有用(0) 没用(0)

[回复]
红枣说：

2009/12/09于9:47 上午

farwong@hotmail.com
有用(0) 没用(0)

[回复]
s_hj 说：

2009/12/09于1:51 下午

蛮有意思的，分享学习一下。
s_hj@21cn.com
有用(0) 没用(0)

[回复]
xiaoran 说：

2009/12/09于5:35 下午

hi_ran@foxmail.com 博主，我没收到你的源码！你发了吗？
有用(0) 没用(0)

[回复]
hemin 回复:
十二月 9th, 2009 at 5:40 下午
@xiaoran, 晚上一起发，白天上班没时间，不好意思。
有用(0) 没用(0)

[回复]
树人说：

2009/12/09于8:14 下午

敏敏偶来看你了~
有用(0) 没用(0)

[回复]
Wilson 说：

2009/12/09于8:37 下午

不错。。。。
有用(0) 没用(0)

[回复]
Chinaree 说：

2009/12/09于8:50 下午

等你发
有用(1) 没用(0)

[回复]
hemin 说：

2009/12/09于10:14 下午

上面的用户已全部发送！
有用(0) 没用(0)

[回复]
lee 说：

2009/12/21于4:53 下午

IE7页面不兼容，请博主查看
有用(0) 没用(0)

[回复]
hemin 回复:
十二月 21st, 2009 at 9:25 下午
@lee, 指的是本博客吗？还是本文章代码哪里呢？
IE7出现很长的水平滚动条，刚已修复，非常感谢啊、
有用(0) 没用(0)

[回复]
tiansiy 说：

2009/12/28于10:51 上午

我也想要一份。。感谢博主

228983177@qq.com
有用(0) 没用(0)

[回复]
vikkang 说：

2009/12/30于5:04 下午

呵呵！很多效果不错哦！可以好好的学习和研究下啦！
谢谢啦！
kang406864868@126.com
有用(0) 没用(0)

[回复]
Pluto 说：

2010/01/05于10:58 上午

383038956@163.com给下源码吧。
有用(0) 没用(0)

[回复]
fzzgo 说：

2010/01/06于2:23 下午

很不错，博主能不能把模块库的文件都发我一份，谢谢。
fzzgo@sina.com
有用(0) 没用(0)

[回复]
globplay 说：

2010/02/01于9:14 上午

不错哦，给我一份源码吧：globplay@163.com
有用(0) 没用(0)

[回复]
lang 说：

2010/02/02于3:50 下午

我来的很迟，但应该还有一份吧？博主？
有用(0) 没用(0)

[回复]
lang 回复:
二月 2nd, 2010 at 3:51 下午
@lang,
我的邮箱： zsworld@126.com
有用(0) 没用(0)

[回复]
susan 说：

2010/02/06于4:25 下午

太佩服你了
有用(0) 没用(0)

[回复]
shensi520 说：

2010/02/23于8:48 上午

博主麻烦给我一份~~~谢谢了~~~
我的邮箱：shensi520@126.com
有用(0) 没用(0)

[回复]
工说：

2010/03/04于9:11 下午

高手我也要一份，谢了
drawi@163.com
有用(0) 没用(0)

[回复]
vivike 说：

2010/03/24于5:36 下午

好东西，楼主谢谢啦
有用(0) 没用(0)

[回复]
半夜吹风说：

2010/03/31于11:32 上午

麻烦作者发下，本人CSS刚入门。。
huangyaohuang@qq.com
有用(0) 没用(0)

[回复]
gxt 说：

2010/04/08于9:38 下午

我也在学css，需要高手指点！谢谢gxt2207@163.com
有用(0) 没用(0)

[回复]
uerser 说：

2010/05/14于12:33 下午

整理的太好了~！牛人
我的邮箱：zuomengcl@sina.com谢谢~~~
有用(0) 没用(0)

[回复]
yzp 说：

2010/07/01于3:08 下午

楼主发一份源码给我吧!yzp531@163.com
多谢啦!
有用(0) 没用(0)

[回复]