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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
Python实现购物车购物小程序
2018/04/18 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python tkinter组件摆放方式详解
2019/09/16 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
置业顾问岗位职责
2014/03/02 职场文书
预备党员表决心书
2014/03/11 职场文书
学习决心书
2014/03/11 职场文书
护校行动方案
2014/05/31 职场文书
幼儿发展评估方案
2014/06/11 职场文书
小学校园广播稿
2015/08/18 职场文书
mybatis 获取更新记录的id
2022/05/20 Java/Android