JS学习知我见（常用建站代码）
<!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>
JS学习知我见（常用建站代码）的更多相关文章
- 00-02.PHP 网站假设 之 学习PHP语法 [James建站]
PHP 手册 Stig Sæther Bakken Alexander Aulbach Egon Schmid Jim Winstead Lars Torben Wilson Rasmus Lerdo ...
- 推荐的五款市面上常用的免费CMS建站系统
我做设计也有不少年头了,很多客户或者朋友找我做网站的时候,一般问我的是用什么软件系统给他们做.大部分客户希望用的软件是免费的.所以今天给大家介绍五款我自己用过还不错的,重点是还免费的建站系统. Met ...
- 外贸建站之图片预加载JS代码分享
外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...
- Nodejs学习笔记（三）——一张图看懂Nodejs建站
前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- WordPress 3.8 中文正式版下载 - 建站与学习首选！全球最流行的开源PHP博客网站程序
转载自:http://www.iplaysoft.com/wordpress.html 话说虽然我一直都在网站底部写着本站基于 WordPress 构建,但时常还是有人问我网站是用什么程序建的,还真有 ...
- [web建站] 优课急送《零基础快速学习建站》视频+课件【价值399元】
[课程介绍]你想快速建一个网站出来吗?你想从什么都不懂到一两天出一个漂漂亮亮的站吗?你想完成领导交给你的任务找人建站吗?你想自己建站来创业吗?你想学会建站之后,利用给别人建站来赚钱吗?你想建一个跟某个 ...
- 【从0開始Tornado建站】0.9版本号python站点代码开源--持续更新中
从5月份開始[从0開始Tornado建站]这个专栏,開始一点一点把这个分类兴趣站点弄起来,从无到有的过程也是令人兴奋的:-) 国庆的时候等待备案然后上线,如今站点域名为ustchack ...
- Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递
[TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LE ...
随机推荐
- 路由 - ASP.NET MVC 4 系列
软件开发人员常常对一些细小的细节问题倍加关注,由其在考虑源代码的质量和结构时更是如此.因此,当遇到大部分使用 ASP.NET 技术构建的站点,使用如下的 URL 地址时,可能会有些奇怪: ...
- npm 替换为 cnpm
最近执行npm安装组件时特别慢,网上建议可以换为cnpm,cmd命令:npm install -g cnpm --registry=https://registry.npm.taobao.org 可是 ...
- AngularJS中的Provider们：Service和Factory等的区别
引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别,啥时候该用啥,之前一直傻 ...
- 【linux】linux shell 日期格式化
获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 将当前日期赋值给DATE变量DATE=$(date +%Y%m%d) 有时候我们需要使用今天之前或者往后的日期,这时可以 ...
- php 函数汇总
extract 从数组中将变量导入到当前的符号表 $arr['age'] = 30; $arr['name'] = 'bluesky'; $arr['sex'] = 'male'; var_dump( ...
- sql查询工程结算分包款转出
总一 借工程结算负数 贷工程结算对冲问题 oralce使用聚合函数wmsys.wm_concat字段显示 clob :应该是,10.2.0.4以前,是varchar2,10.2.0.5开始,是CLOB ...
- hive与hbase整合过程
实现目标 Hive可以实时查询Hbase中的数据. hive中的表插入数据会同步更新到hbase对应的表中. 可以将hbase中不同的表中的列通过 left 或 inner join 方式映射到hiv ...
- Spring 事务注解 错误问题
碰到个问题,在一个springmvc项目中,设置好事务,然后在service上添加@Transactional注解,只要一添加这个注解,该service就无法被spring创建成功, error cr ...
- SparkStreaming（源码阅读十二）
要完整去学习spark源码是一件非常不容易的事情,但是咱可以积少成多嘛~那么,Spark Streaming是怎么搞的呢? 本质上,SparkStreaming接收实时输入数据流并将它们按批次划分,然 ...
- Hbase数据导入导出
平时用于从生产环境hbase到导出数据到测试环境. 导入数据: import java.io.BufferedReader; import java.io.File; import java.io.F ...