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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
jsonp原理及使用
Oct 28 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
KnockoutJs快速入门教程
May 16 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 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 遍历文件实现代码
2011/05/04 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
Javascript Object.extend
2010/05/18 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python去除扩展名的实例讲解
2018/04/23 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Python字符串对象实现原理详解
2019/07/01 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
考试作弊被抓检讨书
2014/01/10 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
实习协议书
2015/01/27 职场文书
小学班级口号大全
2015/12/25 职场文书
Oracle笔记
2021/04/05 Oracle
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang