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中的关于类型转换的性能优化
Dec 14 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
详解Vue之计算属性
Jun 20 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 array_unique之后json_encode需要注意
2011/01/02 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
js获取ip和地区
2017/03/10 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
Python中的pprint折腾记
2015/01/21 Python
Python字典操作简明总结
2015/04/13 Python
Python操作Excel之xlsx文件
2017/03/24 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
python3爬取数据至mysql的方法
2018/06/26 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Python实现代码块儿折叠
2020/04/15 Python
windows支持哪个版本的python
2020/07/03 Python
如何用python批量调整视频声音
2020/12/22 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
社区中秋节活动方案
2014/01/29 职场文书
市场策划求职信
2014/08/07 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
Python re.sub 反向引用的实现
2021/07/07 Python