JavaScript网页制作特殊效果用随机数


Posted in Javascript onMay 22, 2007

网络世界精彩无比,绚丽的页面如果合理的使用特效,一定会增色不少。下面就是我总结的特效:

跳动文字

想看会跳舞的文字?来吧!

代码:先在〈head〉和〈/head〉之间添加〈script language="JavaScript"〉

〈!--

function font11()

//定义函数font11()

{

document.all.a1.style.fontSize=16+

Math.floor(Math.random()*24); //调用Math.random()函数产生一个随机数,再利用Math.floor()函数产生小于或等于Math.random()*24的下一个数,来改变文字大小

c1=Math.floor(Math.random()*256);

c2=Math.floor(Math.random()*256);

c3=Math.floor(Math.random()*256);

document.all.a1.style.color="rgb("+c1+","+c2+","+c3+")"; //同上,改变文字颜色(利用RGB调色)

timer=setTimeout('font11()',200); //每200毫秒调用一次font11()函数

}

---〉〈/script〉

再在〈body〉中加onLoad="font11();"

最后在需要处加上〈span id="a1"〉飞〈/span〉

特点:文字颜色及大小可随机的变化。

延伸:可在网页中添加多组代码,其中font11? 分别代表不同的文字,今后是font12? 、font13? 等等,文字可表现为每个都不同。

图片淡入淡出

随着时间的过去,图片也循环的由模糊到清晰改变。

代码:先在〈head〉和〈/head〉之间添加〈script language="JavaScript"〉

〈!--

mark=0;

function tupian() //建立函数tupian()

{

if(photo.filters.alpha.opacity〈10)

//当图片透明度小于10时

mark=1;

if(photo.filters.alpha.opacity〉98)

//当图片透明度大于98时

mark=-1;

step=2*mark;

photo.filters.alpha.opacity+=step;

//透明值计数器累加

setTimeout('tupian()',20);

//每隔20毫秒程序执行一次

}

---〉〈/script〉

再在图片属性中加id="photo"和style="filter:alpha(opacity=0;)"

最后在那个图片代码的后面加上〈script〉〈!--

tupian();

---〉〈/script〉

特点:图片循环淡入淡出。

本文的代码都非常简单,需要解释的地方我都有解释。

Javascript 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
理解jQuery stop()方法
Nov 21 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
JS加ASP二级域名转向的代码
May 17 #Javascript
用javascript实现的支持lrc歌词的播放器
May 17 #Javascript
JavaScript中的new的使用方法与注意事项
May 16 #Javascript
几款极品的javascript压缩混淆工具
May 16 #Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 #Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 #Javascript
javascript操作文本框readOnly
May 15 #Javascript
You might like
PHP 木马攻击防御技巧
2009/06/13 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP学习笔记之一
2011/01/17 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
图片自动缩小 点击放大
2008/07/07 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
基于jquery的表格排序
2010/09/11 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
python函数装饰器用法实例详解
2015/06/04 Python
python2 与python3的print区别小结
2018/01/16 Python
详解用python写一个抽奖程序
2019/05/10 Python
python跳出双层for循环的解决方法
2019/06/24 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
python Pexpect模块的使用
2020/12/25 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
啤酒销售实习自我鉴定
2013/09/24 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
单位委托函范文
2015/01/29 职场文书
三八妇女节主持词
2015/07/04 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫