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代码
Mar 11 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
利用vue实现模态框组件
Dec 19 Javascript
react-router中的属性详解
Jun 01 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 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和XSL stylesheets转换XML文档
2006/10/09 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
js图片处理示例代码
2014/05/12 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
token 机制和实现方式
2020/12/15 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
python实现排序算法解析
2018/09/08 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
优秀民警事迹材料
2014/01/29 职场文书
邀请函怎么写
2015/01/30 职场文书
月考总结与反思
2015/10/22 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers