<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="jquery网站建设常用到的效果插件" />
<meta name="keywords" content="jquery网站建设常用到的效果插件" />>
<title>jquery网站建设常用到的效果插件 - 代码笔记 www.198zone.com</title>
<link href="css/Style.css" rel="stylesheet" />
<script src="Js/jquery-1.7.min.js"></script>
<script src="Js/Custom.plug-in.dsh.js"></script>
</head>
<body>
<div class="Sub">
<div class="main w">
<div class="limit">
<div class="title">页面meta设置</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
是否启用Ie6提示：<meta name="ie6Prompts" content="true" /><br>
是否禁用鼠标右键：<meta name="rightMouseButton" content="true" /><br>
是否启用返回顶部按钮：<meta name="toTop" content="true" /><br>
是否启用版权信息：<meta name="Copyright" content="true" /><br>
是否启用双击滚屏：<meta name="DClickScrolling" content="true" /><br>
是否启用网站变灰：<meta name="GrayPage" content="true" /><br>
是否开启网站维护中提示灰：<meta name="Egis" content="true" /><br>
</p>
</div>
</div>
<div class="limit">
<div class="title">截取字符串</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<img dsh="limit" num="10" ></li>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).limit(‘8‘);
</p>
</div>
<div class="preview">
<li dsh="limit" num="10" >演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li>
</div>
</div>
<div class="imgAuto">
<div class="title">等比例缩放图片</div>
<div class="content">
<p>HTML使用方法:</p>
<p dsh="imgAuto" width="80" height="100" >
<img src="..."></li>
</p>
<p>JS使用方法</p>
<p>
$(‘img,div img,p img,li img,span img...‘).imgAuto(80,100);
</p>
</div>
<div class="preview" dsh="imgAuto" style="width:200px;height:350px;border:1px solid #ccc; text-align:center;" width="200" height="350">
<img src="Images/test.jpg" />
</div>
</div>
<div class="GetTime">
<div class="title">获取系统时间</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="time" wel="欢迎光临，今天是：">正在加载...</div><br>
<input type="text" dsh="time" value="正在加载...">
</p>
<p>JS使用方法</p>
<p>
div等元素：setInterval(function(){$(‘div]‘).eq(i).GetTime(‘欢迎光临，今天是：‘,‘1‘);},1000);<br>
文本框：setInterval(function(){$(‘input‘).GetTime(‘‘,‘1‘,‘input‘)},1000);
</p>
</div>
<div class="preview">
<div dsh="time" wel="欢迎光临，今天是：">正在加载...</div>
<div><input type="text" dsh="time" value="正在加载..."></div>
</div>
</div>
<div class="tab">
<div class="title">Tab菜单切换</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="tab" event="click"><br>
<div switchtab><br>
<a tab>a</a><br>
<a tab>b</a><br>
<a tab>c</a><br>
</div><br>
<div switchblock><br>
<p block>a</p><br>
<p block>b</p><br>
<p block>c</p><br>
</div><br>
</div><br>
</p>
<p>JS使用方法</p>
<p>
$(‘div‘).tab(‘切换菜单标签‘,‘菜单选中样式‘,‘被切换标签容器‘,‘被切换标签‘,‘事件：click/hover‘);
</p>
</div>
<div class="preview">
<div dsh="tab" event="click">
<div switchtab>
<a tab>a</a>
<a tab>b</a>
<a tab>c</a>
</div>
<div switchblock>
<p block>a</p>
<p block>b</p>
<p block>c</p>
</div>
</div>
</div>
</div>
<div class="tool">
<div class="title">设为首页加入收藏</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="sc"></div>
</p>
<p>JS使用方法</p>
<p>
$(‘img,div img,p img,li img,span img...‘).tool(‘设为首页‘,‘间隔内容‘,‘加入收藏‘);
</p>
</div>
<div class="preview">
<div dsh="sc"></div>
</div>
</div>
<div class="icc">
<div class="title">文章列表格行换色</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<ul dsh="icc"><br>
<li listtag>演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li><br>
<li listtag>演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li><br>
<li listtag>演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li><br>
<li listtag>演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li><br>
<li listtag>演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li><br>
</ul><br>
<style><br>
.icc li.focusstyle{ background:#0CF;}<br>
.icc li.basestyle{ background:#FF9;}<br>
.icc li.evenstyle{ background:#CF9;}<br>
</style><br>
</p>
<p>JS使用方法</p>
<p>
$(‘img,div img,p img,li img,span img...‘).arlist(‘列表项标记‘,‘焦点行样式‘,‘偶数行样式‘,‘基数行样式‘);
</p>
</div>
<div class="preview">
<ul dsh="icc">
<li listtag>演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li>
<li listtag>演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li>
<li listtag>演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li>
<li listtag>演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li>
<li listtag>演示文字：从前有坐山，山有有坐庙，庙里有个插件。</li>
</ul>
</div>
</div>
<div class="qq">
<div class="title">创建在线QQ</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<em dsh="qq" qq="1594125370111,1"></em><br>
<em dsh="qq" qq="1594125370111,2"></em><br>
<em dsh="qq" qq="1594125370111,3"></em><br>
<em dsh="qq" qq="1594125370111,4"></em><br>
<em dsh="qq" qq="1594125370111,5"></em><br>
<em dsh="qq" qq="1594125370111,6"></em><br>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).qq(‘QQ号‘,‘样式编号（1-17，41-50）‘);
</p>
</div>
<div class="preview">
<em dsh="qq" qq="1594125370111,1"></em>
</div>
</div>
<div class="colsewindow">
<div class="title">关闭浏览器窗口</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<a dsh="closewindow">关闭窗口</a>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).click(function(){$.colsewindow()});
</p>
</div>
<div class="preview">
<a dsh="closewindow">关闭窗口</a>
</div>
</div>
<div class="RequestQueryString">
<div class="title">获取URL中的参数值</div>
<div class="content">
<p>JS使用方法</p>
<p>
RequestQueryString[‘i‘];
</p>
</div>
</div>
<div class="roll">
<div class="title">左右无缝滚动</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="roll"><br>
<img src="Images/test.jpg" width="60" /><br>
<img src="Images/test.jpg" width="60" /><br>
<img src="Images/test.jpg" width="60" /><br>
<img src="Images/test.jpg" width="60" /><br>
</div><br>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).roll();
</p>
</div>
<div class="preview">
<div dsh="roll">
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
<img src="Images/test.jpg" width="60" />
</div>
</div>
</div>
<div class="rollTop">
<div class="title">滚屏效果上下（带控制）</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="rollTop" line="4" speed="200" timer="3000"><br>
<div btnt>上上上</div><br>
<div roll style="height:100px; overflow:hidden;"><br>
<ul><br>
<li>从前有坐山，山有有坐庙，庙里有个插件。</li><br>
...<br>
</ul><br>
</div><br>
<div btnb>下下下</div><br>
</div><br>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).rollTop({line:滚动行数,speed:速度,timer:时间间隔,up:"上按钮",down:"下按钮"});<br>
$(‘div,p,li,span...‘).rollTop({line:滚动行数,speed:速度,timer:时间间隔});
</p>
</div>
<div class="preview">
<div dsh="rollTop" line="1" speed="500" timer="3000">
<div btnt>上上上</div>
<div roll style="height:100px; overflow:hidden;">
<ul>
<li>从前有坐山，山有有坐庙，庙里有个插件。</li>
<li>初中的时候迷武侠小说，上课的时候都在看一次上课看金庸《天龙八部》的时候被老师发现了，没收，然后大吼：把其它七本给我交出来。</li>
<li>某男逛妓院,问女价钱,女答:50元.男见便宜,干了.女说:请付100元,男问其因.女答进出各50元.男怒道:你他妈是中国移动啊,还双向收费！</li>
<li>双胞胎在母亲肚子里聊天.老大说:老爸不错，经常伸头来看我们.就是不爱卫生,吐口痰就走.老二说:还是隔壁的叔叔好.他吐完痰还用袋子把痰装走. </li>
<li>某男久不行房,妻很难受.一日他要妻脱光倒立镜前,妻大喜照办.他将妻双腿分开,将自己下巴放于妻阴部后，问妻:我留胡子好看吗?</li>
<li>同学生病，去医院看他，你家伙看我来了，悠悠的吐出一句，你来了，也没啥好招待你的，要不医院里的氧气你吸一点吧，还挺新鲜的，说完就把氧气管往我鼻子里塞。</li>
<li>天太热晚上和兄弟们吃串串喝啤酒。一兄弟迟到了，这货喜欢吃白菜和海带，大老远的很豪迈的喊了句:"老板娘，先来一盘白带。"一口啤酒没憋住从鼻子里喷了出去。</li>
<li>他带女友回家，路上轻轻跟她咬着耳朵："待会儿，我要让你尝尝我的看家本领……""讨厌~人家不来啦~"女友娇羞地说。到了家门口，他立刻张开双臂挡在门前，大声说："就不让你进去！ "</li>
<li>今天和女友聊天，可能太激动，女友口水喷我脸上了，我就擦了一下，女友问，怎么嫌弃啊，我回了句，抹匀，女友又一口口水就吐我脸上了，说了句再抹一次，刚刚那点量糊不住你的大脸，尼玛啊，不按套路出牌啊。</li>
<li>一家伙特喜欢刘德华，手机里都是他的歌，铃声也是。一日去参加葬礼，铃声想起来了，全部的人都投来鄙夷的目光，"等了好久终于等到今天……</li>
<li>今天在地铁上，有个暴露狂太嚣张了，旁边却没有一个人敢去开口说他，当时真觉得这个民族正义感已经死了。。。后来我实在受不了了，愤怒的冲了上去，拔下他的奶嘴厉声呵斥道："下次不许穿开裆裤！ "</li>
<li>舍友理完发回来对我说："理完发就是不一样，感觉整个脑袋都比以前轻了不少呢。"我看了看他，说："你耳朵被剪掉一半了哥，现在去医院还来得及"。</li>
</ul>
</div>
<div btnb>下下下</div>
</div>
</div>
</div>
<div class="rollLeft">
<div class="title">滚屏效果（滚屏效果左右（带控制））</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="rollLeft" RollRow="滚动列数" DisplayRow="显示列数" SwitchBigImg="大图切换（*[bigImgObj]）不需要（false）" Title="大图切换标题（*[bigtitle]）不需要（false）" Time="自动滚动间隔时间为0则不自动滚动"><br>
<!--注意：SwitchBigImg和Title属性为大图元素和大图标题元素，如果不需要大图切换将其值写为false--><br>
<div class="bigimg"><br>
<img bigImgObj width="300" height="200">//不需要时直接去掉即可<br>
<p bigtitle>标题</p>//不需要时直接去掉即可<br>
</div><br>
<div class="list"><br>
<div class="bn bnl" btnl>左</div><br>
<div class="bn bnr" btnr>右</div><br>
<div class="roll" roll><br>
<ul><br>
<li title="标题一"><img src="Images/TestImg/01.jpg" bigSrc="Images/TestImg/01.jpg">标题一</li><br>
<li title="标题二"><img src="Images/TestImg/02.jpg" bigSrc="Images/TestImg/02.jpg">标题二</li><br>
<li title="标题三"><img src="Images/TestImg/03.jpg" bigSrc="Images/TestImg/03.jpg">标题三</li><br>
<li title="标题四"><img src="Images/TestImg/04.jpg" bigSrc="Images/TestImg/04.jpg">标题四</li><br>
<li title="标题五"><img src="Images/TestImg/05.jpg" bigSrc="Images/TestImg/05.jpg">标题五</li><br>
<li title="标题六"><img src="Images/TestImg/06.jpg" bigSrc="Images/TestImg/06.jpg">标题六</li><br>
</ul><br>
</div><br>
</div><br>
</div><br>
</p>
<p>JS使用方法</p>
<p>
$(‘滚动层‘).rollLeft({RollRow:滚动列数,DisplayRow:显示列数,Left:‘左按钮‘,Right:‘右按钮‘,Time:自动滚动间隔时间为0则不自动滚动,SwitchBigImg:‘切换的大图对象‘,Title:‘切换的标题对象‘});
</p>
</div>
<div class="preview">
<div dsh="rollLeft" RollRow="1" DisplayRow="3" Time="0" SwitchBigImg="*[bigImgObj]" Title="*[bigtitle]">
<div class="bigimg">
<img bigImgObj width="300" height="200">
<p bigtitle>标题</p>
</div>
<div class="list">
<div class="bn bnl" btnl>左</div>
<div class="bn bnr" btnr>右</div>
<div class="roll" roll>
<ul>
<li title="标题一"><img src="Images/TestImg/01.jpg" bigSrc="Images/TestImg/01.jpg">标题一</li>
<li title="标题二"><img src="Images/TestImg/02.jpg" bigSrc="Images/TestImg/02.jpg">标题二</li>
<li title="标题三"><img src="Images/TestImg/03.jpg" bigSrc="Images/TestImg/03.jpg">标题三</li>
<li title="标题四"><img src="Images/TestImg/04.jpg" bigSrc="Images/TestImg/04.jpg">标题四</li>
<li title="标题五"><img src="Images/TestImg/05.jpg" bigSrc="Images/TestImg/05.jpg">标题五</li>
<li title="标题六"><img src="Images/TestImg/06.jpg" bigSrc="Images/TestImg/06.jpg">标题六</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="topPrompt">
<div class="title">简易提示层</div>
<div class="content">
<p>JS使用方法</p>
<p>
$.topPrompt(宽,高,‘提示内容‘);
</p>
</div>
</div>
<div class="flash">
<div class="title">插入flash</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<img src="..." dsh="imgAuto" maxWidth="80" ></li>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).flash({src:‘路径‘,width:‘宽度‘,height:‘高度‘,wmode:‘显示模式（transparent）‘,mask:是否开启遮罩（true/flase）});
</p>
</div>
<div class="preview">
<div dsh="flash" src="Flash/flash2354.swf" width="500" height="200"></div>
</div>
</div>
<div class="cookie">
<div class="title">操作Cookie</div>
<div class="content">
<p>JS使用方法</p>
<p>
写入：$.cookie(‘name‘,‘content‘);<br>
读取：$.cookie(‘name‘);
</p>
</div>
</div>
<div class="smartFloat">
<div class="title">智能浮动层</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="smartFloat">往上滚动，看我会怎样。</div>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).smartFloat();
</p>
</div>
<div class="preview">
<div dsh="smartFloat">往上滚动，看看我会怎样。</div>
</div>
</div>
<div class="scrollLoading">
<div class="title">页面滚动图片等元素动态加载</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<img class="scrollLoading" data-url="图片真实地址" src="1*1gif图片" />
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).scrollLoading();
</p>
</div>
<div class="preview">
<img data-url="Images/test.jpg" src="Images/Png/blank.gif" />
</div>
</div>
<div class="ccc">
<div class="title">事件的延时处理</div>
<div class="content">
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).hoverDelay({<br>
hoverDuring:500,//鼠标移上延时设置<br>
outDuring: 500,//鼠标移出延时设置<br>
hoverEvent: function(){<br>
alert("鼠标移上时执行的事件！");<br>
}<br>
outEvent: function(){<br>
alert("鼠标移出时执行的事件！");<br>
}<br>
});<br>
</p>
</div>
</div>
<div class="CasSelect">
<div class="title">联级选择</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
内容格式：<br>
<div dsh="CasSelect"><br>
<a class="p0" id="13" pid="0"><input type="checkbox" name="sel" value="13" />一级</a><br>
<a class="p1" id="14" pid="13"><input type="checkbox" name="sel" value="14" />二级</a><br>
<a class="p2" id="32" pid="14"><input type="checkbox" name="sel" value="32" />三级</a><br>
<a class="p3" id="33" pid="32"><input type="checkbox" name="sel" value="33" />四级</a><br>
<a class="p4" id="34" pid="33"><input type="checkbox" name="sel" value="34" />五级</a><br>
<a class="p5" id="35" pid="34"><input type="checkbox" name="sel" value="35" />六级</a><br>
<a class="p1" id="27" pid="13"><input type="checkbox" name="sel" value="27" />二级</a><br>
<a class="p2" id="36" pid="27"><input type="checkbox" name="sel" value="36" />三级</a><br>
<a class="p1" id="28" pid="13"><input type="checkbox" name="sel" value="28" />二级</a><br>
</div>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).CasSelect();
</p>
</div>
<div class="preview">
<div dsh="CasSelect">
<a class="p0" id="13" pid="0"><input type="checkbox" name="sel" value="13" />一级</a>
<a class="p1" id="14" pid="13"><input type="checkbox" name="sel" value="14" />二级</a>
<a class="p2" id="32" pid="14"><input type="checkbox" name="sel" value="32" />三级</a>
<a class="p3" id="33" pid="32"><input type="checkbox" name="sel" value="33" />四级</a>
<a class="p4" id="34" pid="33"><input type="checkbox" name="sel" value="34" />五级</a>
<a class="p5" id="35" pid="34"><input type="checkbox" name="sel" value="35" />六级</a>
<a class="p1" id="27" pid="13"><input type="checkbox" name="sel" value="27" />二级</a>
<a class="p2" id="36" pid="27"><input type="checkbox" name="sel" value="36" />三级</a>
<a class="p1" id="28" pid="13"><input type="checkbox" name="sel" value="28" />二级</a>
</div>
</div>
</div>
<div class="input">
<div class="title">input提示输入内容</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<input type="text" default="这里写下些什么好呢！">
</p>
</div>
<div class="preview">
<input type="text" default="这里写下些什么好呢！">
</div>
</div>
<div class="fs">
<div class="title">焦点图</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div class="preview"><br>
<div dsh="fs" style="width:300px;height:150px;"><br>
<ul><br>
<li><img src="Images/TestImg/01.jpg"></li><br>
<li><img src="Images/TestImg/02.jpg"></li><br>
<li><img src="Images/TestImg/03.jpg"></li><br>
<li><img src="Images/TestImg/04.jpg"></li><br>
<li><img src="Images/TestImg/05.jpg"></li><br>
<li><img src="Images/TestImg/06.jpg"></li><br>
</ul><br>
</div><br>
</div><br>
<style><br>
/*焦点图*/<br>
.btn span{width:18px; height:18px; line-height:18px; text-align:center; font-size:12px; font-family:"Microsoft YaHei",SimHei; margin-right:5px;color:#fff;background:#30302f;}<br>
.btn span.on {background:#ce0609; color:#fcc;}<br>
</style><br>
</p>
<p>JS使用方法</p>
<p>
$(‘#focus‘).fs({<br>
bg:‘#fff‘, //按钮区域的背景颜色 <br>
btnH:‘60px‘, //按钮区域的高<br>
btnBgbottom:‘0px‘, //按钮区域位置底部的高度<br>
btnbottom:‘30px‘, //按钮位置底部的高度<br>
textAlign:‘right‘ //按钮区域的水平对齐方式<br>
});<br>
默认： $(‘div,p,li,span...‘).fs();<br>
</p>
</div>
<div class="preview">
<div dsh="fs" style="width:300px;height:150px;">
<ul>
<li><img src="Images/TestImg/01.jpg"></li>
<li><img src="Images/TestImg/02.jpg"></li>
<li><img src="Images/TestImg/03.jpg"></li>
<li><img src="Images/TestImg/04.jpg"></li>
<li><img src="Images/TestImg/05.jpg"></li>
<li><img src="Images/TestImg/06.jpg"></li>
</ul>
</div>
</div>
</div>
<div class="syncHigh">
<div class="title">同步高</div>
<div class="content">
<p>JS使用方法</p>
<p>
$.syncHigh(obj1,obj2);
</p>
</div>
</div>
<div class="pager">
<div class="title">静态分页</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="pager" tag="li"><br>
<ul><br>
<li>从前有坐山，山有有坐庙，庙里有个插件。</li><br>
...<br>
</ul><br>
</div><br>
</p>
<p>JS使用方法</p>
<p>
$(‘div‘).pager(‘分页标记‘,{<br>
navId: ‘nav‘,//分页层Id<br>
navClass: ‘Page‘,//分页层Class<br>
navAttach: ‘append‘,//添加分页方式<br>
highlightClass: ‘focus‘,//选中页样式<br>
prevText: ‘pre‘,//上一页文本<br>
nextText: ‘next‘,//下一页文本<br>
height: null//分页层高度 <br>
});<br>
</p>
</div>
<div class="preview">
<div dsh="pager" tag="li">
<ul>
<li>从前有坐山，山有有坐庙，庙里有个插件。</li>
<li>初中的时候迷武侠小说，上课的时候都在看一次上课看金庸《天龙八部》的时候被老师发现了，没收，然后大吼：把其它七本给我交出来。</li>
<li>某男逛妓院,问女价钱,女答:50元.男见便宜,干了.女说:请付100元,男问其因.女答进出各50元.男怒道:你他妈是中国移动啊,还双向收费！</li>
<li>双胞胎在母亲肚子里聊天.老大说:老爸不错，经常伸头来看我们.就是不爱卫生,吐口痰就走.老二说:还是隔壁的叔叔好.他吐完痰还用袋子把痰装走. </li>
<li>某男久不行房,妻很难受.一日他要妻脱光倒立镜前,妻大喜照办.他将妻双腿分开,将自己下巴放于妻阴部后，问妻:我留胡子好看吗?</li>
<li>同学生病，去医院看他，你家伙看我来了，悠悠的吐出一句，你来了，也没啥好招待你的，要不医院里的氧气你吸一点吧，还挺新鲜的，说完就把氧气管往我鼻子里塞。</li>
<li>天太热晚上和兄弟们吃串串喝啤酒。一兄弟迟到了，这货喜欢吃白菜和海带，大老远的很豪迈的喊了句:"老板娘，先来一盘白带。"一口啤酒没憋住从鼻子里喷了出去。</li>
<li>他带女友回家，路上轻轻跟她咬着耳朵："待会儿，我要让你尝尝我的看家本领……""讨厌~人家不来啦~"女友娇羞地说。到了家门口，他立刻张开双臂挡在门前，大声说："就不让你进去！ "</li>
<li>今天和女友聊天，可能太激动，女友口水喷我脸上了，我就擦了一下，女友问，怎么嫌弃啊，我回了句，抹匀，女友又一口口水就吐我脸上了，说了句再抹一次，刚刚那点量糊不住你的大脸，尼玛啊，不按套路出牌啊。</li>
<li>一家伙特喜欢刘德华，手机里都是他的歌，铃声也是。一日去参加葬礼，铃声想起来了，全部的人都投来鄙夷的目光，"等了好久终于等到今天……</li>
<li>今天在地铁上，有个暴露狂太嚣张了，旁边却没有一个人敢去开口说他，当时真觉得这个民族正义感已经死了。。。后来我实在受不了了，愤怒的冲了上去，拔下他的奶嘴厉声呵斥道："下次不许穿开裆裤！ "</li>
<li>舍友理完发回来对我说："理完发就是不一样，感觉整个脑袋都比以前轻了不少呢。"我看了看他，说："你耳朵被剪掉一半了哥，现在去医院还来得及"。</li>
</ul>
</div>
</div>
</div>
<div class="downpages">
<div class="title">向下翻页滚屏</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="downpage"><br>
<ul><br>
<li>从前有坐山，山有有坐庙，庙里有个插件。</li><br>
...<br>
</ul><br>
</div><br>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).downpage({<br>
ButtonHtml:‘‘,//设置翻页按钮内容<br>
left:‘‘,//按钮左定位<br>
top:‘‘,//按钮上定位<br>
right:‘‘,//按钮右定位<br>
bottom:‘‘//按钮下定位<br>
});<br>
</p>
</div>
<div class="preview">
<div dsh="downpage">
<ul>
<li>从前有坐山，山有有坐庙，庙里有个插件。</li>
<li>初中的时候迷武侠小说，上课的时候都在看一次上课看金庸《天龙八部》的时候被老师发现了，没收，然后大吼：把其它七本给我交出来。</li>
<li>双胞胎在母亲肚子里聊天.老大说:老爸不错，经常伸头来看我们.就是不爱卫生,吐口痰就走.老二说:还是隔壁的叔叔好.他吐完痰还用袋子把痰装走. </li>
<li>他带女友回家，路上轻轻跟她咬着耳朵："待会儿，我要让你尝尝我的看家本领……""讨厌~人家不来啦~"女友娇羞地说。到了家门口，他立刻张开双臂挡在门前，大声说："就不让你进去！ "</li>
<li>今天和女友聊天，可能太激动，女友口水喷我脸上了，我就擦了一下，女友问，怎么嫌弃啊，我回了句，抹匀，女友又一口口水就吐我脸上了，说了句再抹一次，刚刚那点量糊不住你的大脸，尼玛啊，不按套路出牌啊。</li>
<li>一家伙特喜欢刘德华，手机里都是他的歌，铃声也是。一日去参加葬礼，铃声想起来了，全部的人都投来鄙夷的目光，"等了好久终于等到今天……</li>
<li>今天在地铁上，有个暴露狂太嚣张了，旁边却没有一个人敢去开口说他，当时真觉得这个民族正义感已经死了。。。后来我实在受不了了，愤怒的冲了上去，拔下他的奶嘴厉声呵斥道："下次不许穿开裆裤！ "</li>
<li>舍友理完发回来对我说："理完发就是不一样，感觉整个脑袋都比以前轻了不少呢。"我看了看他，说："你耳朵被剪掉一半了哥，现在去医院还来得及"。</li>
</ul>
</div>
</div>
</div>
<div class="Code">
<div class="title">创建随机验证码</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="Code"></div>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).Code();
</p>
</div>
<div class="preview">
<div dsh="Code"></div>
</div>
</div>
<div class="Rscroll">
<div class="title">根随滚动</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<div dsh="Rscroll" top="-200" right="0">我不想呆在自己的坐位上。</div>
</p>
<p>JS使用方法</p>
<p>
$(‘div,p,li,span...‘).Rscroll({top:上边距,left:左边距,right:右边距});
</p>
</div>
<div class="preview">
<div dsh="Rscroll" top="-200" right="0">我不想呆在自己的坐位上。</div>
<div>我已经漂过右边去了。</div>
</div>
</div>
<div class="jump">
<div class="title">下拉菜单跳转链接</div>
<div class="content">
<p>HTML使用方法:</p>
<p>
<select dsh="jump"><br>
<option value="http://www.baidu.com">百度</option><br>
<option value="http://www.qq.com">腾讯</option><br>
<option value="http://www.taobao.com">淘宝</option><br>
</select><br>
</p>
</div>
<div class="preview">
<select dsh="jump">
<option value="http://www.baidu.com/">百度</option>
<option value="http://www.qq.com/">腾讯</option>
<option value="http://www.taobao.com/">淘宝</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>