JS实现文字掉落效果的方法
本文实例讲述了JS实现文字掉落效果的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
.canvas{
width:500px;
height:500px;
position:relative;
}
</style>
</head>
<body>
<div>
<input type="button" onclick="javascript:falling.init();" value="GO" />
</div>
<div class="canvas" id="canvas"></div>
<script type="text/javascript">
/*
*坠落效果
*/
function Falling(){
this.dict=["abcd","2222","sign","next","container","content","last","break","less","than","that","absolute","relative","my","index","html","java","c#","web","javascript","php","include","shit","bull","big","smart","call","apply","callee","caller","function"];
this.canvas=$("#canvas");
this.step=15;
this.freq=10;
this.height=500;
this.width=500;
this.si=null;
}
Falling.prototype={
fallingAction:function(dom){
var self=this;
var freqs=[10,15,20];//每次下落的距离
var disS=[];//记录所有dom的当前距离
var disPerFreqS=[];//每个dom的
var targetDis=500;
var domCssTopS=[];//所有dom的top属性
var successDom=[];//记录哪些dom已经结束运动
var successCount=0;//有多少个dom已经结束
var total=dom.length;
var freqMarkLength=freqs.length;
for(var i=0,j=dom.length;i<j;i++){
domCssTopS[i]=dom[i].position().top;
disS[i]=0;
disPerFreqS[i]=freqs[parseInt(Math.random()*freqMarkLength)];
}
self.si=setInterval(function(){
if(successCount>=total){
clearInterval(self.si);
}
for(var i=0,j=dom.length;i<j;i++){
if(typeof(successDom[i])!="undefined" && successDom[i]=="ok"){
continue;
}
disS[i] += disPerFreqS[i];
if(disS[i] >= targetDis){
dom[i].css("top", targetDis+domCssTopS[i]);
successDom[i]="ok";
successCount++;;
}else{
dom[i].css("top", disS[i]+domCssTopS[i]);
}
}
},self.freq);
},
init:function(){
var self=this;
self.canvas.html('');
var dom=[];
var l=0;
var t=0;
var tempDom=$("<div style='position;absolute;left:-100000;visibility:hidden'></div>").appendTo($("body"));
for(var i=0,j=self.dict.length;i<j;i++){
dom[i]=$("<span style='position:absolute'>"+self.dict[i]+"</span>").appendTo(tempDom);
var domWidth=dom[i].width();
var domHeight=dom[i].height();
if(t<self.height){
if(l<self.width){
if(domWidth+l<=self.width){
dom[i].css({"top":t,"left":l});
self.canvas.append(dom[i]);
l += dom[i].width();
}else{
if(domHeight+t<=self.height){
t=t+domHeight;
dom[i].css({"top":t,"left":0});
self.canvas.append(dom[i]);
l = dom[i].width();
}else{
break;//到极限了
}
}
}else{
if(domHeight+t<=self.height){
t=t+domHeight;
l=0;
dom[i].css({"top":t,"left":l});
self.canvas.append(dom[i]);
}else{
break;//到极限了
}
}
}//else极限
}
/*
for(var i=0,l=self.dict.length;i<l;i++){
self.fallingAction(dom[i]);
}
*/
self.fallingAction(dom);
}
}
var falling=new Falling();
falling.init();
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
js实现文字在按钮上滚动的方法
本文实例讲述了js实现文字在按钮上滚动的方法.分享给大家供大家参考.具体如下: 文字在按钮上滚动,以吸引人的注意,点击按钮后跳转到指定的网址,运行本演示代码后,在效果演示区可看到文字在按钮内的滚动效果.按钮的颜色和文字大小都可以重新定义. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-txt-scroll-button-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>文字在按
-
JS、CSS文字切换，定时交替，代码精简
你可以把它看作像写一般的CSS列表一样,只用增加两三行代码就能完成切换效果. 文本定时变动代码 #newslist{ background:#f8f8f8;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:288px; } #contain{ font-size:12px;overflow:hidden;list-style:none;width:288px;height:20px;margin:0px;
-
js+css实现文字散开重组动画特效代码分享
文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒. 运行效果图: 这是输入HAPPY后安按钮后效果,当然可以随便输文字 好酷的特效,连中文都支持,看如下图: 为大家分享的文字散开重组动画特效代码如下 <html> <head> <meta charset="UTF-8"> <title>文字散开重组动画特效</title> <l
-
JS CSS制作饱含热情的镶边文字闪烁特效
文字闪烁 function glowit(which){ if (document.all.glowtext[which].filters[0].strength==2) document.all.glowtext[which].filters[0].strength=1 else document.all.glowtext[which].filters[0].strength=2 } function glowit2(which){ if (document.all.glowtext.filt
-
js+css实现增加表单可用性之提示文字
平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示"请输入关键字",并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置: 复制代码 代码如下: <form id="search"> <input type="text" id="keyword" name="keyword" value="请输入关键字">
-
js实现input框文字动态变换显示效果
本文实例讲述了js实现input框文字动态变换显示效果.分享给大家供大家参考.具体如下: 这里演示js实现INPUT框中的特殊显示效果,一些文字慢慢交替显示,最终显示出完整的文字,需要显示的文字预先保存在数组中,依次调用显示,有意思吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-txt-rand-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
-
js代码实现无缝滚动(文字和图片)
一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了.测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了. 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <s
-
JS文字球状放大效果代码分享
很酷的放大镜放大文字的效果,超赞! 先展示一下效果图: 大家先运行代码试一试-------------------------------------效果演示------------------------------------------- 具体代码如下 <html> <head> <title>JS文字球状放大效果</title> <meta http-equiv="imagetoolbar" content="no
-
JS实现跟随鼠标的链接文字提示框效果
本文实例讲述了JS实现跟随鼠标的链接文字提示框效果.分享给大家供大家参考.具体如下: 这里使用JavaScript与CSS实现链接提示效果,不会改变你原来的链接结构,使用链接原有的title标签来实现,如果之前你使用有title标签,那你几乎只需把JS代码拷贝到你的网页中即可.你会发现,运行本效果后,鼠标在链接上移动的话,文字提示框会跟随鼠标而移动位置. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran
-
JS实现霓虹灯文字效果的方法
本文实例讲述了JS实现霓虹灯文字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS实现网页上的霓虹灯文字特效代码特效,运行效果看一下,你会看到文字的颜色像霓虹灯一样,连续不停变化,五颜六色的,很炫的样子,所以就叫做霓虹文字吧,也可以叫他文字变色效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html
-
Js+CSS 文字渐隐渐现显示
这段代码实现的淡入淡出还算可以吧,比较平滑,同样出自JavaScript+CSS两者的配合. JavaScript文字渐隐渐现显示 0) && (parseInt(navigator.appVersion) >= 4)); var count = 0, count2 = 0, add1 = 3, add2 = 10, timerID; function show() { if (ie4) { count += add1; count2 += add2; delay = 30; if(
-
js变形金刚文字特效代码分享
为大家分享的js变形金刚文字特效代码如下 -----------------------------------------------效果演示----------------------------------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js变形金刚文字特效&l
-
js实现选中复选框文字变色的方法
本文实例讲述了js实现选中复选框文字变色的方法.分享给大家供大家参考.具体如下: 这里实现选中复选框时,文字加上一个背景色,变通一下,还是很有用的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-cha-font-color-codes/ 具体代码如下: <html> <head> <title>选中复选框文字变色</title> <style> .checkbox {