PageSourceSearch

https://www.51xuediannao.com/js/

html 51xuediannao.com collected 2026-10-06 22:16:47 UTC 46,741 bytes, 528 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>javascript_javascript经典实例 - 懒人建站</title>
6    <meta name="keywords" content="javascript,javascript教程,javascript经典实例" />
7    <meta name="description" content="懒人建站为您提供-javascript经典实例,javascript教程下载,js插件编写教程与实例,js特效下载等js代码仓库。" />
8    <meta name="viewport"
9      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
10<meta name="applicable-device" content="pc,mobile">
11<meta name="MobileOptimized" content="width"/>
12<meta name="HandheldFriendly" content="true"/>
13<link rel="icon" sizes="32x32" href="/favicon.ico">
14<link rel="icon" href="/favicon.ico"/>
15<link rel="stylesheet" href="https://www.51xuediannao.com/static/css/css.min.css?rev=1584485663448">
16<link rel="stylesheet" href="https://www.51xuediannao.com/static/css/layout.css?rev=1584485662396">
17<style>
18    .nav-list .one{
19        padding-left: 14px;
20        padding-right: 14px;
21    }
22</style>    
23<link rel="stylesheet" type="text/css" href="https://www.51xuediannao.com/static/css/home.css?dev=1584485662384">
24</head>
25<body>
26<div class="site-bar">
27    <div class="inbox">
28        <div class="start">
29            <span class="pc-show">知识 分享 互助</span>
30            <span class="mobile-show"><a href="//www.51xuediannao.com/" rel="nofollow">懒人建站</a></span>
31        </div>
32        <div class="end" style="display:none">
33            <span class="menu-btn js-nav-menu"><i class="iconfont icon-menu"></i></span>
34            <ul class="fn-dib site-bar-user" id="siteBarUser"></ul>
35        </div>
36        <div class="center">
37
38        </div>
39    </div>
40</div>
41<div class="header">
42    <div class="fn-cf inbox">
43        <strong class="fn-fl logo" id="logo">
44            <a href="//www.51xuediannao.com/" class="logo-a" title="懒人建站,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站"><span class="fn-hide">懒人建站、</span>懒人一百</a>
45        </strong>
46        <p class="site-des">懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。</p>
47        <span class="fn-fl lr-xy">懒人建站提供网页素材下载、网站模板<br>知识 分享 互助!</span>
48        <div class="un-site-top" id="unSiteTop"></div>
49        <div class="fn-fr search">
50            <form action="//www.51xuediannao.com/search.php" name="formsearch" method="get" class="search-form">
51                <div class="fn-dib search-input">
52                    <input type="hidden" name="kwtype" value="0">
53                    <input name="kw" type="text" class="search-key" id="searchkey" value="" placeholder="输入搜索关键字">
54                </div><!--<button name="type" value="2" type="submit" class="search-submit">百度搜索</button>-->
55                <button name="type" value="1" type="submit" class="search-submit">站内搜索</button>
56            </form>
57        </div>
58    </div>
59</div><div class="nav" id="nav">
60    <div class="inbox">
61        <ul class="fn-cf nav-list">
62            <li><a href="/" class="one " rel="nofollow">首页</a></li>
63            <li class="" id='25'><a href="https://www.51xuediannao.com/video/" class="one">视频教程</a></li><li class="" id='8'><a href="https://www.51xuediannao.com/muban/" class="one">网站模板</a></li><li class="cur has-sub" id='1'><a href="https://www.51xuediannao.com/js/" class="one">javascript</a></li><li class=" has-sub" id='9'><a href="https://www.51xuediannao.com/sucai/" class="one">网页素材</a></li><li class=" has-sub" id='13'><a href="https://www.51xuediannao.com/html+css/" class="one">div+css</a></li><li class=" has-sub" id='17'><a href="https://www.51xuediannao.com/ui/" class="one">ui设计</a></li><li class="" id='24'><a href="https://www.51xuediannao.com/web/" class="one">网页设计欣赏</a></li><li class="" id='26'><a href="https://www.51xuediannao.com/xiaochengxu/" class="one">微信小程序开发</a></li><li class="" id='28'><a href="https://www.51xuediannao.com/jiqiao/" class="one">建站教程</a></li>        </ul>
64    </div>
65</div>
66<div class="inbox section section-first">
67    <div class="fn-fl h-ad1">
68        <div class="un-01" id="unHome01"></div>
69        <div class="rmb" id="rmb01"></div>
70    </div>
71
72    <div class="fn-ohide ui-box01 headlines">
73        <div class="tit tit02 tit02-skin-1">
74            <strong class="h"><span class="fn-hide">javascript</span>今日头条</strong>
75            <span class="fn-dib t-muted famous" id="famous"></span>
76        </div>
77        <ul class="bl-text-list text-list-01">
78            <li><span class="class">[<a href='https://www.51xuediannao.com/js/jquery/'>jquery插件</a>]</span><a href="https://www.51xuediannao.com/js/jquery/button_countdown.html">jquery倒计时按钮常用于验证码倒计时按钮</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/texiao/'>网页特效</a>]</span><a href="https://www.51xuediannao.com/js/texiao/clipboard.html">js复制内容到剪贴板插件(clipboard.js)</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/jquery/'>jquery插件</a>]</span><a href="https://www.51xuediannao.com/js/jquery/layim.html">webim框架【layim】一个纯前端webim插件</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/texiao/'>网页特效</a>]</span><a href="https://www.51xuediannao.com/js/texiao/qqkefu3.html">悬浮右侧qq在线客服代码</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/texiao/'>网页特效</a>]</span><a href="https://www.51xuediannao.com/js/texiao/currencyFmatter.html">js货币格式化插件(currencyFmatter.js)</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/jquery/'>jquery插件</a>]</span><a href="https://www.51xuediannao.com/js/jquery/dropzone.html">文件拖拽上传插件dropzone.js</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/texiao/'>网页特效</a>]</span><a href="https://www.51xuediannao.com/js/texiao/slideunlock.html">滑动解锁插件slideunlock.js不依赖jquery</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/jquery/'>jquery插件</a>]</span><a href="https://www.51xuediannao.com/js/jquery/radialIndicator.html">jquery圆形进度插件radialIndicator.js(可根据不同进度改变颜色)</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/texiao/'>网页特效</a>]</span><a href="https://www.51xuediannao.com/js/texiao/ymd_select.html">js年月日三级联动</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/jquery/'>jquery插件</a>]</span><a href="https://www.51xuediannao.com/js/jquery/icheck.html">jquery插件icheck api使用(美化checkbox和radio样式)</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/texiao/'>网页特效</a>]</span><a href="https://www.51xuediannao.com/js/texiao/holder.html">html图片占位符插件holder.js</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/jquery/'>jquery插件</a>]</span><a href="https://www.51xuediannao.com/js/jquery/832.html">jquery的自定义事件通过on绑定trigger触发</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/gundong/'>滚动代码</a>]</span><a href="https://www.51xuediannao.com/js/gundong/825.html">标题栏上的滚动字幕代码</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/jquery/'>jquery插件</a>]</span><a href="https://www.51xuediannao.com/js/jquery/jquery_fullPage.html">jquery.fullPage.js全屏滚动插件教程演示</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/jquery/'>jquery插件</a>]</span><a href="https://www.51xuediannao.com/js/jquery/9247fbd0.html">jquery validate强大的jquery表单验证插件</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/texiao/'>网页特效</a>]</span><a href="https://www.51xuediannao.com/js/texiao/dot.html">dot.js教程文档api</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/nav/'>导航菜单</a>]</span><a href="https://www.51xuediannao.com/js/nav/715.html">左边跟随鼠标滑动导航仿淘宝UED</a></li><li><span class="class">[<a href='https://www.51xuediannao.com/js/nav/'>导航菜单</a>]</span><a href="https://www.51xuediannao.com/js/nav/9b0fe52e.html">jquery弹出下拉菜单插件弹出层相对于自身的父层</a></li>        </ul>
79    </div>
80
81    <div id="unMainTop" style="margin-bottom: 0; padding-top: 20px;"></div>
82</div>
83<!--layer01-->
84
85<div class="inbox section js-section-tab">
86                <div class="tit tit02 tit02-skin-1">
87                    <span class="more js-more" data-more="https://www.51xuediannao.com/js/jquery/"></span>
88                    <h2 class="h"><a href="https://www.51xuediannao.com/js/jquery/">jquery插件</a></h2>
89                </div>
90                <div class="tab-show" style="display:block">
91                    <ul class="fn-cf images-text01"><li>
92                        <a href="https://www.51xuediannao.com/js/jquery/button_countdown.html" class="in">
93                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/161224/1-161224093H00-L.png"></span>
94                            <strong class="h">jquery倒计时按钮常用于验证码倒计时按钮</strong>
95                        </a>
96                        <p class="des">jquery倒计时按钮代码,常用于验证码倒计时按钮,代码效果就是点击按钮以后按钮上面会出现倒计时读数,倒计时的时间可以自行指定,按钮倒计时的格式有4中格式可选。</p>
97                    </li><li>
98                        <a href="https://www.51xuediannao.com/js/jquery/lazyload.html" class="in">
99                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/161206/1-161206145IX24.png"></span>
100                            <strong class="h">图片延时加载插件jquery.lazyload.js使用教程</strong>
101                        </a>
102                        <p class="des">图片延时加载插件jquery.lazyload.js使用教程,网站图片过多,就会因加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,此插件可以让我们向下滚动的时候加载图</p>
103                    </li><li>
104                        <a href="https://www.51xuediannao.com/js/jquery/layim.html" class="in">
105                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/161202/1-1612021H15DO-lp.png"></span>
106                            <strong class="h">webim框架【layim】一个纯前端webim插件</strong>
107                        </a>
108                        <p class="des">webim框架【layim】一个纯前端webim插件,说纯前端也是有点扯淡,数据存储还是要服务支持的,layim目前是Web IM应用解决方案,致力于通过丰富的IM交互,及高度开放的接口,让其自由接入</p>
109                    </li><li>
110                        <a href="https://www.51xuediannao.com/js/jquery/dropzone.html" class="in">
111                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/upload/20180320/5ab0b9b2af334.png"></span>
112                            <strong class="h">文件拖拽上传插件dropzone.js</strong>
113                        </a>
114                        <p class="des">文件拖拽上传插件dropzone.js,提供 AJAX 异步文件上传功能,支持拖拽文件上传、支持最大文件大小、支持设置文件类型、支持预览上传结果,不依赖jQuery库。</p>
115                    </li><li>
116                        <a href="https://www.51xuediannao.com/js/jquery/lateralFold.html" class="in">
117                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/161107/1-16110GF923312-lp.png"></span>
118                            <strong class="h">jquery 横向折叠插件</strong>
119                        </a>
120                        <p class="des">jquery 横向折叠插件lateral-fold,点击横向得选项卡,产生横向折叠展开的效果,也可以当做横向切换的选项卡使用。横向折叠插件核心样式</p>
121                    </li><li>
122                        <a href="https://www.51xuediannao.com/js/jquery/radialIndicator.html" class="in">
123                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/160910/1-16091011111S27.png"></span>
124                            <strong class="h">jquery圆形进度插件radialIndicator.js(可根据不同进度改变颜色)</strong>
125                        </a>
126                        <p class="des">radialIndicator是一个轻量级的jquery圆形进度插件。它支持色彩范围,插值,格式,和更多的百分比值,很容易配置和更新,radialIndicator也可以不使用jquery,还有对angularJs的支持angular.radialIndicat</p>
127                    </li><li>
128                        <a href="https://www.51xuediannao.com/js/jquery/jquery_animateNumber.html" class="in">
129                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/160905/1-160Z51623430-L.png"></span>
130                            <strong class="h">jq数字动画插件-jquery.animateNumber.js</strong>
131                        </a>
132                        <p class="des">jq数字动画插件-jquery.animateNumber.js,可以实现数字的动画显示效果,比如从1跑到36500,从1%跑到100%类似这样的效果,数字动画效果控制多样,非常不错。</p>
133                    </li><li>
134                        <a href="https://www.51xuediannao.com/js/jquery/icheck.html" class="in">
135                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/160811/1-160Q11610440-L.png"></span>
136                            <strong class="h">jquery插件icheck api使用(美化checkbox和radio样式)</strong>
137                        </a>
138                        <p class="des">jquery插件icheck.js是一个用来美化checkbox和radio样式的插件,icheck提供了丰富的皮肤和回调事件,本文提供icheck api使用和实战演示</p>
139                    </li></ul>
140                </div>
141            </div><div class="inbox section js-section-tab">
142                <div class="tit tit02 tit02-skin-1">
143                    <span class="more js-more" data-more="https://www.51xuediannao.com/js/nav/"></span>
144                    <h2 class="h"><a href="https://www.51xuediannao.com/js/nav/">导航菜单</a></h2>
145                </div>
146                <div class="tab-show" style="display:block">
147                    <ul class="fn-cf images-text01"><li>
148                        <a href="https://www.51xuediannao.com/js/nav/715.html" class="in">
149                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/140105/1-140105152454Y9.jpg"></span>
150                            <strong class="h">左边跟随鼠标滑动导航仿淘宝UED</strong>
151                        </a>
152                        <p class="des">仿淘宝UED的左边导航,这个导航有跟随鼠标滑动导航效果,鼠标离开导航区域自动回到当前导航状态。
153/*样式表文件来自 懒人css http://lrcss.lrjz100.com */
154下面是懒人css中的竖向导航菜单样</p>
155                    </li><li>
156                        <a href="https://www.51xuediannao.com/js/nav/9b0fe52e.html" class="in">
157                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/nav/jqcaidan/d.jpg"></span>
158                            <strong class="h">jquery弹出下拉菜单插件弹出层相对于自身的父层</strong>
159                        </a>
160                        <p class="des">这个jquery弹出下拉菜单插件弹出层相对于自身的父层jquery特效弹出下拉菜单效果,考虑到不需要改动程序所以就利用原来的JS代码,用aja
160x的方式加载(以后只维护那个ajax加载的文件即可</p>
161                    </li><li>
162                        <a href="https://www.51xuediannao.com/js/nav/59eef1b8.html" class="in">
163                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/nav/jqsxflashnav/demo.jpg"></span>
164                            <strong class="h">jquery上下翻滚效果导航菜单(仿flash特效)</strong>
165                        </a>
166                        <p class="des">jquery上下翻滚效果导航菜单,仿flash翻转效果的实现原理:使用jquery方法再a标签的内部前面插入一对span标签,然后对span标签设置样式。</p>
167                    </li><li>
168                        <a href="https://www.51xuediannao.com/js/nav/navlevel2.html" class="in">
169                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/nav/navlevel2/demo.jpg"></span>
170                            <strong class="h">jquery导航下拉菜单两级平滑导航菜单</strong>
171                        </a>
172                        <p class="des">jquery代码简洁明了,html结构简洁明了,这里只是随便写一下,jquery导航下拉菜单两级平滑下拉。调用代码: $.navlevel2(&quot;li.mainlevel&quot;,300); 只的是主菜单的标签</p>
173                    </li><li>
174                        <a href="https://www.51xuediannao.com/js/nav/655.html" class="in">
175                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/nav/jqsnav/demo.jpg"></span>
176                            <strong class="h">两级导航菜单树jquery插件特效</strong>
177                        </a>
178                        <p class="des">两级导航菜单树jquery插件特效调用方法:$.jq51menu(#menubox,div.submenu); 这里的#menubox 是主菜单的ID,div.submenu是子菜单的ID。两级导航菜单树的样式很丑陋,懒人建站嘛,俺够懒,就懒得写好</p>
179                    </li><li>
180                        <a href="https://www.51xuediannao.com/js/nav/xiehe_lvse.html" class="in">
181                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/nav/xiehe_lvsenav/demo.jpg"></span>
182                            <strong class="h">北京协和医院绿色下拉多级导航条(jquery导航菜单</strong>
183                        </a>
184                        <p class="des">北京协和医院绿色下拉多级导航条,基于jquery导航菜单。有动感效果下拉菜单。</p>
185                    </li><li>
186                        <a href="https://www.51xuediannao.com/js/nav/zhifubao.html" class="in">
187                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/nav/zhifubao_nav/demo.jpg"></span>
188                            <strong class="h">纯HTML+CSS结构链接带说明的黄色导航(仿支付宝)</strong>
189                        </a>
190                        <p class="des">仿支付宝的黄色导航,纯HTML+CSS结构,划过超链接下拉菜单中带说明,利用了a:hover这个属性,代码很简单,很容易读懂。</p>
191                    </li><li>
192                        <a href="https://www.51xuediannao.com/js/nav/360buy_nav.html" class="in">
193                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/nav/360buy_nav/demo.jpg"></span>
194                            <strong class="h">纯CSS版京东商城分类导航菜单代码</strong>
195                        </a>
196                        <p class="des">仿京东商城左边分类导航菜单代码,纯DIV配合CSS实现的导航菜单代码,经调试兼容火狐、IE6、IE8等主流浏览器。</p>
197                    </li></ul>
198                </div>
199            </div><div class="inbox section js-section-tab">
200                <div class="tit tit02 tit02-skin-1">
201                    <span class="more js-more" data-more="https://www.51xuediannao.com/js/slide/"></span>
202                    <h2 class="h"><a href="https://www.51xuediannao.com/js/slide/">幻灯片代码</a></h2>
203                </div>
204                <div class="tab-show" style="display:block">
205                    <ul class="fn-cf images-text01"><li>
206                        <a href="https://www.51xuediannao.com/js/slide/flash_focus1.html" class="in">
207                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/slide/flash_focus1/demo.jpg"></span>
208                            <strong class="h">兼容各浏览器flash焦点幻灯片动画</strong>
209                        </a>
210                        <p class="des">兼容各浏览器flash焦点幻灯片动画,网上有很多这个版本的提供下载,不过多少都有点问题,有的不兼容火狐,有的数据调用麻烦。懒人建站再这里把数据调用的地方做了些改动。</p>
211                    </li><li>
212                        <a href="https://www.51xuediannao.com/js/slide/taobao_Slide2.html" class="in">
213                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/jquery/taobao_Slide/demo.jpg"></span>
214                            <strong class="h">仿淘宝上下翻滚的jquery图片切换特效</strong>
215                        </a>
216                        <p class="des">仿淘宝网首页上下翻滚的jquery图片切换特效,滚动方式为上下翻滚切换的焦点幻灯片特效,jquery.Slide.js已经被压缩不是原始的jquery文件,不过不影响使用和修改,完全可以自己重写部分</p>
217                    </li><li>
218                        <a href="https://www.51xuediannao.com/js/slide/562.html" class="in">
219                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/slide/swf_flv_slide/demo.jpg"></span>
220                            <strong class="h">支持SWF和FLV视频格式的焦点图代码</strong>
221                        </a>
222                        <p class="des">支持SWF和FLV视频格式的焦点图代码</p>
223                    </li><li>
224                        <a href="https://www.51xuediannao.com/js/slide/xunleijiaodian.html" class="in">
225                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/slide/xunlei2010/demo.jpg"></span>
226                            <strong class="h">2010最新迅雷首页轮换焦点图幻灯片</strong>
227                        </a>
228                        <p class="des">2010最新的迅雷首页6屏轮换焦点图幻灯片JS网页特效代码,右边显示小图下面的代码主要是配置参数的。QQ群:4188479 63242849 </p>
229                    </li><li>
230                        <a href="https://www.51xuediannao.com/js/slide/zidonglunhuan.html" class="in">
231                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/slide/zidonglunhuan/demo.jpg"></span>
232                            <strong class="h">韩国服装网站自动轮换焦点图</strong>
233                        </a>
234                        <p class="des">这个来自韩国服装网站上的自动轮换焦点图,这个焦点图网页特效也很好,不是flash焦点图。DD_belatedPNG.js是为了兼容IE6的PNG透明的</p>
235                    </li><li>
236                        <a href="https://www.51xuediannao.com/js/slide/seo_jquery.html" class="in">
237                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/jquery/jquery-SEO/demo.jpg"></span>
238                            <strong class="h">利于SEO的jquery焦点图网页特效代码</strong>
239                        </a>
240                        <p class="des">说他是有利于SEO的基于jquery焦点图网页特效代码,因为搜索引擎蜘蛛是不读JS 中的内容的,而这个jquery焦点图网页特效代码结构与代码绝对分离。</p>
241                    </li><li>
242                        <a href="https://www.51xuediannao.com/js/slide/SEO-jquery.html" class="in">
243                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/jquery/SEO-jquery/demo.jpg"></span>
244                            <strong class="h">有利于SEO的jquery焦点图</strong>
245                        </a>
246                        <p class="des">之所以说这个基于jquery焦点图幻灯片有利SEO,因为这段代码表现与结构完全分离,通常JS焦点图的图片列表都包含在JS中。而搜索爬虫不读JS。</p>
247                    </li><li>
248                        <a href="https://www.51xuediannao.com/js/slide/taobao_slide.html" class="in">
249                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/slide/taobao_slide/demo.jpg"></span>
250                            <strong class="h">仿淘宝商城首页焦点幻灯片</strong>
251                        </a>
252                        <p class="des">仿淘宝商城首页焦点幻灯片,JS代码只有1.12K,超小,图片切换为淘宝商城的上下式切换。这个内容层中可以是任何内容。
253</p>
254                    </li></ul>
255                </div>
256            </div><div class="inbox section js-section-tab">
257                <div class="tit tit02 tit02-skin-1">
258                    <span class="more js-more" data-more="https://www.51xuediannao.com/js/gg/"></span>
259                    <h2 class="h"><a href="https://www.51xuediannao.com/js/gg/">广告代码</a></h2>
260                </div>
261                <div class="tab-show" style="display:block">
262                    <ul class="fn-cf images-text01"><li>
263                        <a href="https://www.51xuediannao.com/js/gg/4fb8b413.html" class="in">
264                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/upload/20181021/5bcb5523621c7.png"></span>
265                            <strong class="h">网站设置点击任何地方弹出新页面广告只弹出一次(可指定时间间隔)</strong>
266                        </a>
267                        <p class="des">网站设置点击任何地方弹出新页面广告只弹出,可指定时间间隔。利用Cookie记忆,超过指定时间刷新页面广告会再次生效。参数说明: href:&#039;http://www.51xuediannao.com/&#039;,    //链接地址,必须配置成你的地址 target:</p>
268                    </li><li>
269                        <a href="https://www.51xuediannao.com/js/gg/bottom_ad.html" class="in">
270                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/gg/bottom_ad/demo.jpg"></span>
271                            <strong class="h">纯CSS兼容IE6固定底部广告层</strong>
272                        </a>
273                        <p class="des">纯CSS的固定底部广告层,兼容IE6,里面有一个JS是为了实现 关闭的,CSS是不具备关闭按钮功能的,这个关闭JS,其实是可以改造下实现点击关闭再次点击展开。</p>
274                    </li><li>
275                        <a href="https://www.51xuediannao.com/js/gg/jquery cookie.html" class="in">
276                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/jquery/jquery_cookie/demo.jpg"></span>
277                            <strong class="h">打开页面弹出DIV广告层只弹一次</strong>
278                        </a>
279                        <p class="des">打开页面可在指定时间内弹出DIV广告层,记忆cookie只弹一次,清理cookie可再次弹出,可以自己指定自动关闭时间,有关闭按钮。</p>
280                    </li><li>
281                        <a href="https://www.51xuediannao.com/js/gg/baidu_video.html" class="in">
282                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/gg/baidu_video/demo.jpg"></span>
283                            <strong class="h">右下角视频代码可记忆cookie</strong>
284                        </a>
285                        <p class="des">可记忆cookie的右下角弹出视频广告代码,来自百度视窗代码。使用flv格式的视频,此百度视窗可最小化、关闭,可自定义标志/å
285…¬å‘Šç­‰ã€‚</p>
286                    </li><li>
287                        <a href="https://www.51xuediannao.com/js/gg/shijian_ad.html" class="in">
288                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/gg/shijian_ad/demo.jpg"></span>
289                            <strong class="h">可指定广告投放时间的顶部展开广告</strong>
290                        </a>
291                        <p class="des">此广告代码可指定广告投放时间,从网页顶部展开。可指定显示几秒,然后消失。</p>
292                    </li><li>
293                        <a href="https://www.51xuediannao.com/js/gg/jquery_youxiajiao.html" class="in">
294                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/jquery/jquery_youxiajiao/demo.jpg"></span>
295                            <strong class="h">jquery兼容火狐右下角可最小化浮动层</strong>
296                        </a>
297                        <p class="des">基于jquery右下角提示层,兼容火狐/IE6/IE7/IE8,可随屏滚动,可关闭,可最小化,具有cookie记忆功能,此代码原始出处猪八戒zhubajie.com会员管理页面。</p>
298                    </li><li>
299                        <a href="https://www.51xuediannao.com/js/gg/fanpai_ad.html" class="in">
300                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/gg/fanpai/demo.jpg"></span>
301                            <strong class="h">两边翻牌广告修改版</strong>
302                        </a>
303                        <p class="des">主要去掉了原来讨厌的table表格,规整了一下代码,注释也给规整了一下,这里的flash只是一个容器,图片可以在JS中的配置。</p>
304                    </li><li>
305                        <a href="https://www.51xuediannao.com/js/gg/suiji_ad.html" class="in">
306                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/static/images/defaultpic.gif"></span>
307                            <strong class="h">代码最少的随机图片广告代码</strong>
308                        </a>
309                        <p class="des">代码最少的随机图片广告代码。效果看上面的演示,刷新即可变换图片,符合W3C标准。</p>
310                    </li></ul>
311                </div>
312            </div><div class="inbox section js-section-tab">
313                <div class="tit tit02 tit02-skin-1">
314                    <span class="more js-more" data-more="https://www.51xuediannao.com/js/texiao/"></span>
315                    <h2 class="h"><a href="https://www.51xuediannao.com/js/texiao/">网页特效</a></h2>
316                </div>
317                <div class="tab-show" style="display:block">
318                    <ul class="fn-cf images-text01"><li>
319                        <a href="https://www.51xuediannao.com/js/texiao/clipboard.html" class="in">
320                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/161206/1-161206143J4H0-lp.png"></span>
321                            <strong class="h">js复制内容到剪贴板插件(clipboard.js)</strong>
322                        </a>
323                        <p class="des">js复制内容到剪贴板插件clipboard.js,clipboard插件实现了js复制/剪切功能,浏览器兼容IE9以及IE9+和其他新版浏览器。clipboard.js体积也非常小巧,压缩版11K,如果启用GZIP的话只有3K大小</p>
324                    </li><li>
325                        <a href="https://www.51xuediannao.com/js/texiao/qqkefu3.html" class="in">
326                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/161123/1-1611231K2100-L.png"></span>
327                            <strong class="h">悬浮右侧qq在线客服代码</strong>
328                        </a>
329                        <p class="des">悬浮右侧qq在线客服代码,这个右侧qq在线客服插件不依赖于jquery,客服图标使用了阿里图标的字体图标,这个qq在线客服代码可以配置多个qq客服,支持二维码展示和电话号码展示,支持</p>
330                    </li><li>
331                        <a href="https://www.51xuediannao.com/js/texiao/currencyFmatter.html" class="in">
332                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/static/images/defaultpic.gif"></span>
333                            <strong class="h">js货币格式化插件(currencyFmatter.js)</strong>
334                        </a>
335                        <p class="des">js货币格式化插件(currencyFmatter.js),这个插件并不依赖于jquery等任何库,特别适合哪种需要各国货币格式化的情况,如果您只是要格式一种人民币格式,可能就有点没必要了用货币格式化</p>
336                    </li><li>
337                        <a href="https://www.51xuediannao.com/js/texiao/slideunlock.html" class="in">
338                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/161003/1-161003112520192.jpg"></span>
339                            <strong class="h">滑动解锁插件slideunlock.js不依赖jquery</strong>
340                        </a>
341                        <p class="des">滑动解锁插件slideunlock.js不依赖jquery等第三方库,当然,作者也提供了jquery.slideunlock.js依赖jquery的插件,这个滑动解锁插件适合移动端开发使用,无依赖版的插件js代码均使用的是es5最新</p>
342                    </li><li>
343                        <a href="https://www.51xuediannao.com/js/texiao/prism.html" class="in">
344                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/160926/1-1609262306440-L.jpg"></span>
345                            <strong class="h">代码高亮插件prism.js</strong>
346                        </a>
347                        <p class="des">prism.js代码高亮插件,不依赖第三方js库,不需要写调用代码,prism.js调用只需要再code标签上添加类似class=&quot;language-js&quot;这样的类名即可</p>
348                    </li><li>
349                        <a href="https://www.51xuediannao.com/js/texiao/highlight.html" class="in">
350                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/160924/1-160924162J90-L.jpg"></span>
351                            <strong class="h">代码高亮插件highlight.js不依赖第三方库</strong>
352                        </a>
353                        <p class="des">highlight.js是一个可以给pre标签中的代码高亮的插件,highlight不依赖于第三方js库,支持166语言高亮和77中样式风格</p>
354                    </li><li>
355                        <a href="https://www.51xuediannao.com/js/texiao/ymd_select.html" class="in">
356                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/allimg/160827/1-160RG543380-L.jpg"></span>
357                            <strong class="h">js年月日三级联动</strong>
358                        </a>
359                        <p class="des">js年月日三级联动下拉菜单,js代码只有几十行,短小精悍,值得学习。</p>
360                    </li><li>
361                        <a href="https://www.51xuediannao.com/js/texiao/holder.html" class="in">
362                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/uploads/160712/1-160G2114AX91.png"></span>
363                            <strong class="h">html图片占位符插件holder.js</strong>
364                        </a>
365                        <p class="des">html图片占位符插件holder.js可以为图片生成一个占位符图片也可以为某个区域生成一个占位符图片,准确的说应该是为某个区域生成一个占位符图片,因为img也可以看做是一个区域。不依</p>
366                    </li></ul>
367                </div>
368            </div><div class="inbox section js-section-tab">
369                <div class="tit tit02 tit02-skin-1">
370                    <span class="more js-more" data-more="https://www.51xuediannao.com/js/gundong/"></span>
371                    <h2 class="h"><a href="https://www.51xuediannao.com/js/gundong/">滚动代码</a></h2>
372                </div>
373                <div class="tab-show" style="display:block">
374                    <ul class="fn-cf images-text01"><li>
375                        <a href="https://www.51xuediannao.com/js/gundong/825.html" class="in">
376                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/static/images/defaultpic.gif"></span>
377                            <strong class="h">标题栏上的滚动字幕代码</strong>
378                        </a>
379                        <p class="des">标题栏上的滚动字幕js代码,浏览器标题栏上会显示滚动字幕,做一些动态的信息提示还是非常不错的。58同城的消息提示就是这样子做的。 js代码很简单: var msg = 懒人建站致力于解放</p>
380                    </li><li>
381                        <a href="https://www.51xuediannao.com/js/gundong/jquery_gundong.html" class="in">
382                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/jquery/jquery_gundong/demo.jpg"></span>
383                            <strong class="h">jquery图片无缝滚动js代码ul./li结构,可重用</strong>
384                        </a>
385                        <p class="des">jquery图片无缝滚动js代码ul./li结构,一个页面可重用多个。注意无缝滚动js代码调用中的  $(&#039;.marquee&#039;).kxbdMarquee({ 这里面的  .marquee 可以换成你的 类名 或者是id名等。</p>
386                    </li><li>
387                        <a href="https://www.51xuediannao.com/js/gundong/gundong_pos.html" class="in">
388                            <span class="ia"><img src="/static/images/b.gif" data-original="https://www.51xuediannao.com/jsdemo/texiao/gundong-pos/demo.jpg"></span>
389                            <strong class="h">随屏滚动JS特效代码(相对于指定层不是相对于屏</strong>
390                        </a>
391                        <p class="des">这个随屏滚动JS特效代码是相对于指定层不是相对于屏幕,她的边界始终是相对于相对定位层的,附带“返回顶部”动态效果js代码。</p>
392                    </li></ul>
393                </div>
394            </div>
395<div class="fn-hide class-content">{dede:field.content/}</div>
396
397<div class="footer">
398    <div class="inbox">
399        <dl class="col texiao">
400            <dt><a href="//www.51xuediannao.com/js/" class="h">javascript</a></dt>
401            <dd class="as" id="dropmenu1">
402                <a href="//www.51xuediannao.com/js/gg/">广告代码</a>
403                <a href="//www.51xuediannao.com/js/slide/">焦点幻灯片</a>
404                <a href="//www.51xuediannao.com/qqkefu/">qq在线客服代码</a>
405                <a href="//www.51xuediannao.com/js/texiao/">网页特效</a>
406                <a href="//www.51xuediannao.com/js/jquery/">jquery插件</a>
407                <a href="//www.51xuediannao.com/js/gundong/">滚动代码</a>
408                <a href="//www.51xuediannao.com/xuanxiangka/">选项卡代码</a>
409                <a href="//www.51xuediannao.com/js/nav/">下拉导航菜单代码</a>
410                <a href="//www.51xuediannao.com/jquery_tanchu/">jquery弹出层</a>
411                <a href="//www.51xuediannao.com/gundongtupian/">滚动图片</a>
412                <a href="//www.51xuediannao.com/api/">jquery api</a>
413                <a href="//www.51xuediannao.com/javascript/">javascript教程</a>
414            </dd>
415        </dl>
416        <dl class="fn-hide">
417            <dt><a href="//www.51xuediannao.com/ui/" class="h">界面UI设计</a></dt>
418            <dd class="as" id="dropmenu17">
419                <a href="//www.51xuediannao.com/ui/softui/">软件界面设计</a>
420                <a href="//www.51xuediannao.com/ui/bsui/">后台界面设计</a>
421                <a href="//www.51xuediannao.com/ui/webui/">网站界面设计</a>
422                <a href="//www.51xuediannao.com/ui/mobileui/">手机界面设计</a>
423                <a href="//www.51xuediannao.com/tiyan/">用户体验设计</a>
424                <a href="//www.51xuediannao.com/web/">网页设计欣赏</a>
425            </dd>
426        </dl>
427        <dl class="col sucai">
428            <dt><a href="//www.51xuediannao.com/sucai/" class="h">站长素材</a></dt>
429            <dd class="as" id="dropmenu9">
430                <a href="//www.51xuediannao.com/muban/">网页模板</a>
431                <a href="//www.51xuediannao.com/xiaotubiao/">网页图标</a>
432                <a href="//www.51xuediannao.com/sucai/sjziti/">设计字体</a>
433                <a href="//www.51xuediannao.com/psd/">psd素材</a>
434                <a href="https://doc.51xuediannao.com/">懒人文档</a>
435            </dd>
436        </dl>
437        <dl class="css fn-hide">
438            <dt><a href="//www.51xuediannao.com/html+css/" class="h">html+css</a></dt>
439            <dd class="as" id="dropmenu13">
440                <a href="//www.51xuediannao.com/qd63/">前端路上</a>
441                <a href="//www.51xuediannao.com/htmlcssjq/">css教程</a>
442                <a href="//www.51xuediannao.com/html5/">html5 教程</a>
443                <a href="//www.51xuediannao.com/jiqiao/">建站教程</a>
444            </dd>
445        </dl>
446        <dl class="css fn-hide">
447            <dt><a href="//www.51xuediannao.com/video/" class="h">视频教程</a></dt>
448            <dd class="as" id="dropmenu68">
449                <a href="//www.51xuediannao.com/vuejs/">vue.js 视频教程</a>
450            </dd>
451        </dl>
452        <dl class="col all">
453            <dt><span class="h">全站链接</span></dt>
454            <dd class="as">
455                <a href="//www.51xuediannao.com/js/">jquery特效</a>
456                <a href="//www.51xuediannao.com/js/">js代码</a>
457                <a href="//www.51xuediannao.com/html+css/">div+css</a>
458                <a href="//www.51xuediannao.com/ui/">界面(ui)设计</a>
459                <a href="//www.51xuediannao.com/sucai/">建站素材</a>
460                <a href="//www.51xuediannao.com/jiqiao/">建站教程</a>
461                <a href="//www.51xuediannao.com/weike/">威客网排行榜</a>
462                <a href="//www.51xuediannao.com/host/">免备案虚拟主机</a>
463                <a href="//www.51xuediannao.com/weixinkaifa/">微信公众平台开发</a>
464                <a href="//www.51xuediannao.com/api/">jquery api</a>
465                <a href="//www.51xuediannao.com/api/">jquery api</a>
466            </dd>
467        </dl>
468        <dl class="copyright">
469            <dt><span class="h">
469关于我们</span></dt>
470            <dd>
471                <p><a href="//www.51xuediannao.com/">懒人建站</a> <a href="//www.51xuediannao.com/">www.51xuediannao.com </a></p>
472                <p>懒人博客:<a href="https://huzige.lrjz100.com/" target="_blank">胡子哥博客</a></p>
473                <p>QQ:3282284254</p>
474                <p><a href="http://www.beian.gov.cn" target="_blank" class="beian">豫ICP备13006346号-2</a></p>
475            </dd>
476        </dl>
477    </div>
478</div>
479<span class="cart-dot" id="cartDot"></span>
480<script>
481    var _GLOBAL = {
482        site_root:"https://www.51xuediannao.com",
483        static:"https://www.51xuediannao.com/static/",
484        site_root_https:"",
485        typeid:""
486    }
487</script>
vendor: 1 bytes, line 487
487
488<script src="https://www.51xuediannao.com/static/js/library.js?dev=1584485662983"></script>
vendor: 1 bytes, line 488
488
489<script src="https://www.51xuediannao.com/static/js/js.js?dev=1584485862922"></script>
vendor: 1 bytes, line 489
489
490<script>
491    if(location.pathname.indexOf('.html')>-1){
492        var _hmt = _hmt || [];
493        (function() {
494            var hm = document.createElement("script");
495            hm.src = "https://hm.baidu.com/hm.js?b4229a92a587356632fa35e20cf1c897";
496            var s = document.getElementsByTagName("script")[0];
497            s.parentNode.insertBefore(hm, s);
498        })();
499    }
500</script>
vendor: 1 bytes, line 500
500
501<script>
502    function tabAuto(timer){
503        var $tabs1 = $("#tabs1"),
504            $tab_li = $tabs1.find("li"),
505            $tab_active = $tabs1.find(".active"),
506            index = $tab_active.index(),
507            len = $tab_li.length;
508
509        var t = 0;
510        tabClick();
511        function tabClick(){
512            if(index<len){
513                index++
514            }
515            if(index==len){
516                index = 0
517            }
518            console.log(len,index);
519            t = setTimeout(function(){
520                $tab_li.eq(index).find("a").trigger('click');
521                tabClick();
522            },timer);
523        }
524    }
525    //tabAuto(2000);
526</script>
526
527</body>
528</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.