JS教程:Javascript实现缓动效果

缓动，学名为Tween，缓冲移动的简称。要想页面内容切换起来舒服，就使用淡入淡出特效，要想让页面元素动起来自然，就要使用缓动效果。这两个混合起来，可以衍生多种特效的。感谢Flash开发人员为我们做了那么多先行研究，我们直接把它们拆出来装在各种菜单与相册中。我们先从最简单的东西做起，加速与减速。

既然是缓动，它就一定涉及以下概念：距离，时间与速度。我们可以想象存在一条直线L，点A与点B就是L的起点与终点，有一个点C在直线L上移动，从点A到点B。所需的时间通常都是未知，但速度我们一定要制定。看下面的图，我们想让绿色的方块在淡紧色的滑动带上移动。滑动带左上角就相当于点A，右上角就相当于B点，方块的左上角就相当于点C，移动距离为两者的宽度之差。由于我们移动的物体是存在宽度，也就是说点C永远不可能与点B重合。但一个准确的目的地（为了方便，我们把它称之为点D）是必须的，我们一定要计算它出来。因为在加速运动中，点C随时可能超过点D，当点超过它时，我们就要终止此移动，并把点C拉回到点D上。

运行代码框
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4....<a href="https://www.tulaoshi.com/n/20160220/1632991.html" target="_blank">[ 查看全文 ]</a></p> <div class="img_yyy_2"> <span>2016-02-20</span> <i>标签:</i> <div class="yyy_2_a"><a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> </div> </div> </div> </div> <div class="xiangguan_gg xiangguan_reader clearfix"> <div class="xiang_892_1" style="width:1158px;"> <h3><a href="https://www.tulaoshi.com/n/20160220/1632991.html" target="_blank">JS教程:Javascript实现缓动效果</a>的相关文章</h3> </div> <div class="xiang_892_2" style="width:1158px;"> <ul id="loadmore_container" style="width:1158px;"> <li> <div class="xiang_892_2_1"><a href="/reader/1632804" target="_blank"><img src="https://img.tulaoshi.com/201602/20/6d819f39deb799d55dae26448f7a832f_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632804.html" target="_blank">JavaScript Tween算法及缓动效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。我这里要教大家的是怎么利用flash的Tween类的算法，来做js的Tween算法，并利用它做一些简单的缓动效果。 完整实例下载 运行代码框 !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/1...<a href="https://www.tulaoshi.com/n/20160220/1632804.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/球都麻得/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" /><span>球都麻得</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1487369" target="_blank"><img src="https://img.tulaoshi.com/201601/29/159f4443cfbe74c4fae7806592225af4_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160129/1487369.html" target="_blank">Flash缓动效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/fjc/" target="_blank">flash教程</a></div> <div class="span_em_123"> 今天在做一个简单的flash动画时，发现了flash的一个比较好的特性。都怪自己很久没接触flash了，新的flash出了这么好的特性我竟然不知道。 一直以来希望flash能像3dMax一样编辑动画曲线，而不是简单的补间，没想到flash竟然实现了这个功能。 先看看面板吧，用过3dMax的朋友应该很熟悉吧？ 这就是缓冲开始的地方 像不像3dmax的动画控制面板啊，注意选项——颜色？滤镜？ ...<a href="https://www.tulaoshi.com/n/20160129/1487369.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/欢婶/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>欢婶</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">169</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1615582" target="_blank"><img src="https://img.tulaoshi.com/201602/19/da16872be81708130368a344131ab585_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1615582.html" target="_blank">JavaScript/JS实现图象淡出效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> SCRIPT language=JAVASCRIPTfunction fade_in(){if (test.filters.alpha.opacity 100){test.filters.alpha.opacity += 10;clearTimeout(timer);var timer = setTimeout("fade_in()",150);timer;}}/SCRIPT <a href="https://www.tulaoshi.com/n/20160219/1615582.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/西子印度新娘/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>西子印度新娘</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">8</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1628061" target="_blank"><img src="https://img.tulaoshi.com/201602/19/1e0eb6099f9b51fac2051db41e9b8979_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1628061.html" target="_blank">javascript:JS实现的滑动展开与折叠效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 需要写个滑动展开折叠的效果，搜索到无忧脚本的一篇贴子，稍加修改了下使其在FF也可应用，代码如下： 以下是引用片段： script type="text/javascript" //Url: http://bbs.51js.com/thread-61646-1-1.html //Author: 风云突变 //Modify: 枫岩 var act; function over(s,nMax){   var obj=document.getElementById(s);   var h = parseInt(obj.offsetHeight);   if (h nMax){ ...<a href="https://www.tulaoshi.com/n/20160219/1628061.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/库里萌萌/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/21.jpg" /><span>库里萌萌</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">56</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1615592" target="_blank"><img src="https://img.tulaoshi.com/201602/19/16c7d88addf41b8f4c36ef617eb60d42_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1615592.html" target="_blank">JavaScript/JS实现自动跳出Frame</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 有时侯，你的页面会被别人的frame引用，含在别人的frame中(有时一些站点因内容不足， 会将别人的页面当作自己的一个frame,看起来像是自己本身的页面) 。你当然不会高兴， 访问者也觉得看着不方便。 用了这个js，一旦被别人frame了，会自动弹出。你就不用再担心了！ 将下代码copy入你网页body和/body中即可。 SCRIPT LANGUAGE=JAVASCRIPT!--if (top.location !== self.location) {top.location=self...<a href="https://www.tulaoshi.com/n/20160219/1615592.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/欧阳修士/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/2.jpg" /><span>欧阳修士</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">6</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1615563" target="_blank"><img src="https://img.tulaoshi.com/201602/19/ad1b3b3635a584141fb58d991570f70b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1615563.html" target="_blank">JavaScript/JS实现页面自动刷新</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。 1，页面自动刷新：把如下代码加入head区域中meta http-equiv="refresh" content="20",其中20指每隔20秒刷新一次页面. 2，页面自动跳转：把如下代码加...<a href="https://www.tulaoshi.com/n/20160219/1615563.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/小漫白羊/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/3.jpg" /><span>小漫白羊</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">36</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632089" target="_blank"><img src="https://img.tulaoshi.com/201602/20/a6c3fa9a10ae23b04be067a5078cad9f_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632089.html" target="_blank">JavaScript教程:用JS实现更复杂的交互范例</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 用JavaScript实现更复杂的交互范例. 三、范例 下面我们通过一个具体的实例, 来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互,在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口,每个窗体窗口实现不同信息的动态交互。 tset9.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体； tes...<a href="https://www.tulaoshi.com/n/20160220/1632089.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/岂念丶/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>岂念丶</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">23</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1592696" target="_blank"><img src="https://img.tulaoshi.com/201602/19/1b792b537c399b5bfe62553c6f383caa_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1592696.html" target="_blank">javascript实现的listview效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">style type="text/css"    #oContainer {          width: 600px;          height: 500px;          border: 1px solid menu;          margin: 0px;...<a href="https://www.tulaoshi.com/n/20160219/1592696.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/鬼针草该冲澡了/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/26.jpg" /><span>鬼针草该冲澡了</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">330</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632923" target="_blank"><img src="https://img.tulaoshi.com/201602/20/7d895c6d9baac8377fd573fc9a63d761_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632923.html" target="_blank">JS教程:学习Javascript数组</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 数组就是某类数据的集合，数据类型可以是整型、字符串、甚至是对象 Javascript不支持多维数组，但是因为数组里面可以包含对象（数组也是一个对象），所以数组可以通过相互嵌套实现类似多维数组的功能 1.1 定义数组 声明有10个元素的数组 var a = new Array(10); 此时为a已经开辟了内存空间，包含10个元素，用数组名称加 [下标] 来调用，例如 a[2] 但此时元素并未初始化，调用将返回 undefined ...<a href="https://www.tulaoshi.com/n/20160220/1632923.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/胖纸美到哭/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/23.jpg" /><span>胖纸美到哭</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1627936" target="_blank"><img src="https://img.tulaoshi.com/201602/19/48d4112083f815901de38e65176b150e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1627936.html" target="_blank">javascript实现页面淡出效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 页面加入淡出效果会增加几丝美感! ［以下这段加入head和/head之间］ SCRIPTLanguage=“JavaScript” !--屏幕变色程序-- functionBgColor() { varx=0，step=1 while(x=0xffffff) { document.bgColor=x x+=step step=8 if(step==0x1000000)step=1 } } BgColor() /Script <a href="https://www.tulaoshi.com/n/20160219/1627936.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/地下室的蔷薇/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/16.jpg" /><span>地下室的蔷薇</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1615572" target="_blank"><img src="https://img.tulaoshi.com/201602/19/2e8726b5ee090d0537fbfb6c77188f47_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1615572.html" target="_blank">JavaScript/JS实现更方便的单选框</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 效果演示： 脚本说明: 把如下代码加入body区域中 formlabel for="check1"经常来这里/labelinput type="CHECKBOX" id="check1" value="often" name="checkoften"label for="check2"偶尔来看看/labelinput type="CHECKBOX" id="check2" value="seldom" name="checkseldom"/form <a href="https://www.tulaoshi.com/n/20160219/1615572.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/time豆子2013/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/12.jpg" /><span>time豆子2013</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1589562" target="_blank"><img src="https://img.tulaoshi.com/201602/19/fd01a9dfb623c2dd4d80a263069e442f_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1589562.html" target="_blank">js实现的层变换效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 无标题文档 #div1{ height:200px;width:200px; filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=1,transition=12); background:#CCCCCC; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]<a href="https://www.tulaoshi.com/n/20160219/1589562.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/摩擦摩擦高潮啦/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/12.jpg" /><span>摩擦摩擦高潮啦</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">15</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621420" target="_blank"><img src="https://img.tulaoshi.com/201602/19/efb87ac7bcdcca3182935f93c03d278b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1621420.html" target="_blank">JavaScript/JS实现标题栏跑马灯</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 实现跑马灯的方法很多，本文详细介绍JavaScript/JS实现标题栏跑马灯。 将下代码copy入你网页的和中的合适地方即可。 以下是引用片段： SCRIPT LANGUAGE=JAVASCRIPT !-- var msg = "让我们做得更好"; var speed = 300; var msgud = " " + msg; function titleScroll() { if (msgud.length msgud = msgud.substring(1, msgud.length); document.title = msgud.substring(0, msg.length); wi...<a href="https://www.tulaoshi.com/n/20160219/1621420.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/清水河城/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/10.jpg" /><span>清水河城</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">42</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632846" target="_blank"><img src="https://img.tulaoshi.com/201602/20/1c626e3ba46636e66e2383fc6a63a58d_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632846.html" target="_blank">js教程:JavaScript作用域(Scope)</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 作用域（scope）是JavaScript语言的基石之一，在构建复杂程序时也可能是最令我头痛的东西。记不清多少次在函数之间传递控制后忘记关键字引用的究竟是哪个对象，甚至，我经常以各种不同的混乱方式来曲线救国，试图伪装成正常的代码，以我自己的理解方式来找到所需要访问的变量。 这篇文章将正面解决这个问题：简述上下文（context）和作用域的定义，分析可以让我们掌控上下文的两种方法，最后深入一种 高...<a href="https://www.tulaoshi.com/n/20160220/1632846.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/闫霄宇/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/6.jpg" /><span>闫霄宇</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">6</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632867" target="_blank"><img src="https://img.tulaoshi.com/201602/20/a01bc180e222faf68cda9e5d554c1a27_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632867.html" target="_blank">JS教程:理解JavaScript闭包</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 同时做的一些实例测试，然后整理如下： -------------------------------------------------------------------------------- 理解 JavaScript 闭包 本文结合 ECMA 262 规范详解了闭包的内部工作机制，让 JavaScript 编程人员对闭包的理解从嵌套的函数深入到标识符解析、执行环境和作用域链等等 JavaScript 对象背后的运行机制当中，真正领会到闭包的实质。 简介 Closure 所谓闭包，指的是一个拥有...<a href="https://www.tulaoshi.com/n/20160220/1632867.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/滴滴答答小马车/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/27.jpg" /><span>滴滴答答小马车</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1610206" target="_blank"><img src="https://img.tulaoshi.com/201602/19/9ac46b842911ee2eb3c5008ce9197d9b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1610206.html" target="_blank">JS实现滑动展开与折叠效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 以下是引用片段： script type="text/javascript" //Url: http://bbs.51js.com/thread-61646-1-1.html //Author: 风云突变 //Modify: 枫岩 var act; function over(s,nMax){   var obj=document.getElementById(s);   var h = parseInt(obj.offsetHeight);   if (h nMax){     obj.style.height = (h + 2)+"px";     clearTimeout(act);  &nb...<a href="https://www.tulaoshi.com/n/20160219/1610206.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/媛情往事如烟/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/16.jpg" /><span>媛情往事如烟</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1482481" target="_blank"><img src="https://img.tulaoshi.com/201601/29/33b62b307193e6de0160428423c40d2e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160129/1482481.html" target="_blank">JS实现仿新浪信息提示效果</A></div> <div class="span_em_123"><!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" xml:lang="zh-CN" lang="zh-CN"   <head    <meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6L...<a href="https://www.tulaoshi.com/n/20160129/1482481.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/安安就爱笑/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>安安就爱笑</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">76</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621798" target="_blank"><img src="https://img.tulaoshi.com/201602/19/4a0d542329658d9e5777cec53e40aadf_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1621798.html" target="_blank">Js和CSS实现脚注(Footnote)效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 脚注（Footnote）是向用户提供更多信息的一个最佳途径，也是主体信息的一个有效补充，常见于各种印刷书籍中。不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用Javascript和CSS实现脚注效果的方法。 Javascript: script type="text/javascript" // 说明：用 Javascript 和 CSS 实现脚注（Footnote）效果 // 作者：CodeBit.cn ( http://www.CodeBit.cn ) var footNotes =...<a href="https://www.tulaoshi.com/n/20160219/1621798.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/hsxvme/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/28.jpg" /><span>hsxvme</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">12</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1590732" target="_blank"><img src="https://img.tulaoshi.com/201602/19/2ea253422a58dfc4a1bafdfd9c2c7d69_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1590732.html" target="_blank">用JS实现HTML标签替换效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">有个静态页面 span id=ababcde/spanspan id=ababcde/spanspan id=ababcde/spanspan id=ababcde/span 能否通过js实现，IE浏览时的代码被替换为 img src="img/1.gif"/img src="img/1.gif"/img src="img/1.gif"/img src="img/1.gif"/ 无标题文档 移到我这儿来 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 方法二： 无标题文...<a href="https://www.tulaoshi.com/n/20160219/1590732.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/美好人生685/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/12.jpg" /><span>美好人生685</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">100</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632871" target="_blank"><img src="https://img.tulaoshi.com/201602/20/4bd4ecbc32b1c09eb667e54f7628dc5e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632871.html" target="_blank">JavaScript教程：浅析JS运行机制</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 从一个简单的问题谈起： script type="text/javascript"alert(i); // ？var i = 1;/script 输出结果是undefined, 这种现象被称成预解析：JavaScript引擎会优先解析var变量和function定义。在预解析完成后，才会执行代码。如果一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），运行顺序是： step1. 读入第一个代码段step2. 做语法分析，有错则报语法错误（比如...<a href="https://www.tulaoshi.com/n/20160220/1632871.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/shuihu8989/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>shuihu8989</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">6</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> </ul> <div id="pages" class="clearfix"> <a href="/reader/21244.html">上一页</a><a href="/reader/21241.html">21241</a><a href="/reader/21242.html">21242</a><a href="/reader/21243.html">21243</a><a href="/reader/21244.html">21244</a><a href="/reader/21245.html" class="cur">21245</a><a href="/reader/21246.html">21246</a><a href="/reader/21247.html">21247</a><a href="/reader/21248.html">21248</a><a href="/reader/21249.html">21249</a><a href="/reader/21246.html">下一页</a> </div> </div> </div> <!--footer底部--> <script type="text/javascript">tls.output.show_foot();</script> <div class="float_bottom" id="fixbottom" style="bottom:30px;"> <a href="https://m.tulaoshi.com//" class="icon_hu3">手机页面</a> <div class="float_bot_2"> <a href="javascript:;"id="show_search_input"> <input type="submit" class="input_sub" id="fixbottom_search_btn"> <input type="text" class="text_a_input" placeholder="输入你想搜索的关键词" style="display:none;" id="fixbottom_search_input"> </a> </div> <a href="javascript:;" class="icon_hu2" id="fav_site_btn" data-url="https://www.tulaoshi.com//">收藏网站</a> <a href="javascript:;" class="icon_hu" id="totop">回到头部</a> </div> <!--tag PC分类 标签--> <script type="text/javascript" src="https://static.tulaoshi.com/js/zt.js"></script> </body> </html>