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 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
详解javascript函数的参数
Nov 10 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
javascript实现图片轮播代码
Jul 09 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连接MySQL代码的参数说明
2008/06/07 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python猜数字算法题详解
2020/03/01 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
HTML5新标签兼容——> 的两种方法
2018/09/12 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
男人帮观后感
2015/06/18 职场文书
运动会宣传稿50字
2015/07/23 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android