js模仿flash写字动画

2019独角兽企业重金招聘Python工程师标准>>>

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
body,hi,h2,h3,h4,h5,h6,p,blockquote,dl,dt,dd,lengend,ul,ol,pre,button,input,textarea,th,td,li,fieldset{padding:0; margin:0;}
.flashwk{width:360px; height:179px; margin:50px auto; border:1px solid red;}
.shu{width:30px; height:179px; float:right; background-image:url(images/rcjygy.gif); background-repeat:no-repeat; display:none;}
.y1{ background-position:-330px 0; height:0;}
.y2{ background-position:-300px 0; height:0;}
.y3{ background-position:-270px 0; height:0;}
.y4{ background-position:-240px 0; height:0;}
.y5{ background-position:-210px 0; height:0;}
.y6{ background-position:-180px 0; height:0;}
.y7{ background-position:-150px 0; height:0;}
.y8{ background-position:-120px 0; height:0;}
.y9{ background-position:-90px 0; height:0;}
.y10{ background-position:-60px 0; height:0;}
.y11{ background-position:-30px 0; height:0;}
.y12{ background-position:0px 0; height:0;}
</style>
</head>
<body>
<div class="flashwk"><div class="shu y1"></div><div class="shu y2"></div><div class="shu y3"></div><div class="shu y4"></div><div class="shu y5"></div><div class="shu y6"></div><div class="shu y7"></div><div class="shu y8"></div><div class="shu y9"></div><div class="shu y10"></div><div class="shu y11"></div><div class="shu y12"></div>
</div>
<script type="text/javascript">
var arr=[179,160,120,90,120,120,120,120,80,90,120,179];
$(function(){dh(1);
});
function dh(i){$(".y"+i).css("display","block");var fl=$(".y"+i).height();var st=setInterval(function(){if($(".y"+i).height()>=arr[i-1]){$(".y"+i).css("height",arr[i-1]); clearInterval(st);if(i>arr.length){return false;   }else{//每条过后停顿一下setTimeout(function(){dh(i+1);},16);}}else{$(".y"+i).css("height",fl++);    } },16);
}
</script>
</body>
</html>

转载于:https://my.oschina.net/u/879103/blog/295852

js模仿flash写字动画相关推荐

javascript写字技巧_js canvas实现写字动画效果
本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下页面html: 学写一个字 content=" height = device-height, ...
python做flash帧动画_[练习]利用CSS steps 实现逐帧动画
网页逐帧动画的实现方式网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂. CSS动画实现 ...
js控制flash及其相关
昨天在做JS控制FLASH时难以入手,上网查资料后最终解决.以下是昨天看到的帮助材料,留下笔记. Flash INTERACTION WITH JAVASCRIPT 查看Demo http://www ...
html自定义动画让元素下落,jQuery实现的模仿雨滴下落动画效果
本文实例讲述了jQuery实现的模仿雨滴下落动画效果.分享给大家供大家参考,具体如下: 效果如图: 实现思路:定时器每隔x秒生成宽高.下落速度(即动画执行时间).left随机的div. 1.CSS: ...
php中strtotime(date,js模仿php中strtotime()与date()函数实现方法
本文实例讲述了js模仿php中strtotime()与date()函数实现方法.分享给大家供大家参考.具体如下: 在js中没有像php中strtotime()与date()函数,可直接转换时间戳,下面 ...
JS、Flash 实现复制功能（浏览器兼容）
JS.Flash 实现复制功能 (浏览器兼容) /** 此方法不兼容非IE外的浏览器...参考其它网站的实现方式,是用Flash来解决的此问题 */ function copyOperate(co ...
js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
js课程 5-14 js如何实现控制动画角色走动
js课程 5-14 js如何实现控制动画角色走动一.总结一句话总结:首先是onkeydown事件,然后是改变元素的left和top属性 1.常用键盘事件有哪些? • onkeydown和 onke ...
android扑克发牌动画,JS实现纸牌发牌动画
本文实例为大家分享了JS实现纸牌发牌动画的具体代码,供大家参考,具体内容如下先看演示游戏构建准备 1.准备52张纸牌 2.一张桌布 3.编辑工具为 Visual Code 技术概要 1.对象操作 ...

js模仿flash写字动画

js模仿flash写字动画相关推荐

最新文章

热门文章