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使用function定义对象并调用的方法
Mar 23 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
JavaScript鼠标悬停事件用法解析
May 15 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日历[测试通过]
2008/03/27 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
用javascript实现自定义标签
2007/05/08 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
javascript编写简易计算器
2017/05/06 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python的高阶函数用法实例分析
2019/04/11 Python
详解Python用户登录接口的方法
2019/04/17 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
python 如何停止一个死循环的线程
2020/11/24 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
音乐节策划方案
2014/06/09 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
开除通知书范本
2015/04/25 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
python scrapy简单模拟登录的代码分析
2021/07/21 Python