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中for in的缺陷浅析
Dec 02 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
第十三节 对象串行化 [13]
2006/10/09 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jquery text()要注意啦
2009/10/30 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
babel的使用及安装配置教程
2018/02/22 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python NumPy库安装使用笔记
2015/05/18 Python
Python读取键盘输入的2种方法
2015/06/16 Python
Python快速从注释生成文档的方法
2016/12/26 Python
使用TensorFlow实现SVM
2018/09/06 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
python实现密码强度校验
2020/03/18 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
python3判断IP地址的方法
2021/03/04 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
学校感恩教育活动总结
2014/07/07 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书