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 相关文章推荐
列表内容的选择
Jun 30 Javascript
Js的MessageBox
Dec 03 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
python基础教程之字典操作详解
2014/03/25 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
python实现RSA加密(解密)算法
2016/02/17 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
数组越界问题
2015/10/21 面试题
管理岗位竞聘演讲稿
2014/08/18 职场文书
党员查摆剖析材料
2014/10/10 职场文书
经理聘任证明
2015/03/02 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
健康证明
2015/06/19 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
Android中的Launch Mode详情
2022/06/05 Java/Android