JavaScript网页制作特殊效果用随机数

网络世界精彩无比，绚丽的页面如果合理的使用特效，一定会增色不少。下面就是我总结的特效：
　　跳动文字
　　想看会跳舞的文字？来吧！
　　代码：先在〈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〉
　　特点：图片循环淡入淡出。
　　本文的代码都非常简单，需要解释的地方我都有解释。

赞 (0)

相关推荐

  • JS+CSS实现一个气泡提示框

    JS+CSS实现一个气泡提示框

    分享一个气泡提示框,练习的技术有:(1)JS响应鼠标的事件:(2)纯CSS制作三角形. 效果这样:  这是html: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>气泡对话框</title> <script src="myBubbleTooltip.js"></script>

  • javascript实现很浪漫的气泡冒出特效

    javascript实现很浪漫的气泡冒出特效

    本文实例讲述了javascript实现很浪漫的气泡冒出特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 实现思路:HTML里只需要一个CANVAS元素,Javascript里操作canvas 1.给canvas里绘制背景图片 2.在绘制半径为0-10px的圆形,x坐标屏幕水平随机,y所标竖直大于屏幕高度. 圆形背景色可以是随机,那就是各种色彩了!    利用计时器控制y-- 构建html <!doctype html> <html lang="en

  • js 模拟气泡屏保效果代码

    核心代码: 复制代码 代码如下: var T$ = function(id) { return document.getElementById(id); }var $extend = function(des, src) { for (var p in src) { des[p] = src[p]} return des; }var Bubble = function() {    // 小球随机样式    var clss = ['ball_one', 'ball_two',  'ball_t

  • js由下向上不断上升冒气泡效果实例

    本文实例讲述了js由下向上不断上升冒气泡效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现气泡从水中急速上升效果</title> <style type="text/css"> body { cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#FFF; l

  • JavaScript实现鼠标滑过处生成气泡的方法

    本文实例讲述了JavaScript实现鼠标滑过处生成气泡的方法.分享给大家供大家参考.具体实现方法如下: <HTML> <HEAD> <title>鼠标周围在网页上生成气泡</title> </HEAD> <BODY bgColor=#000000 scroll=no onload=zyva()> <div id=aqua style="position:absolute;left=0;top=0;">

  • jquery.cvtooltip.js 基于jquery的气泡提示插件

    序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示

  • Jquery插件分享之气泡形提示控件grumble.js

    Jquery插件分享之气泡形提示控件grumble.js

      任何一个grumble都可以放到它所围绕元素的任意角度的位置,360度全方位无死角,无残留.还能指定任意距离,应用任意CSS样式. 对于任意文本还可以自动调整大小. 多个grumble可以通过FX队列实现动画效果. 最后,它能在IE6+这些古董浏览器上工作,更不用FF.Chrome这些现代的浏览器了!grumble.js 其实是一个jQuery插件,可以在 我们找到源码下载. 官方的一些截图: 普通提示 可以附加事件,如点击.鼠标移入移出等 可以实现动画,如气泡围绕一个点旋转 在这里我们可以

  • JavaScript网页制作特殊效果用随机数

    网络世界精彩无比,绚丽的页面如果合理的使用特效,一定会增色不少.下面就是我总结的特效: 跳动文字 想看会跳舞的文字?来吧! 代码:先在〈head〉和〈/head〉之间添加〈script language="JavaScript"〉 〈!-- function font11() //定义函数font11() { document.all.a1.style.fontSize=16+ Math.floor(Math.random()*24); //调用Math.random()函数产生一个随

  • ASP动态网页制作技术经验分享

    ASP动态网页制作技术经验分享

    学好一门编程语言有两个条件是必不可少的,一是理论与实践结合.在实际例程去验证书本上的理论能加深你对理论的理解:二是学会总结,把学习.运用中的心得体会记下来,当成一种经验或者教训加以提炼并在日后的应用中加以改进,一定能提高你对这门编程语言的认识.以下是笔者在学习与运用ASP编程中的两点经验,希望能对大家有所帮助. ASP页面内VBScript和JScript的交互 ASP具备管理不同语言脚本程序的能力,能够自动调用合适的脚本引擎以解释脚本代码和执行内置函数.ASP开发环境提供了两种脚本引擎,即VB

  • 基于JavaScript如何制作遮罩层对话框

    1.遮罩层其实就是一个覆盖全界面的半透明的DIV,并处理zIndex使他浮于其他元素之上,是用户不能点击下边的元素,或者说点击没有反应. 2.在遮罩层上方在弹出一个层,由于遮罩层挡住了其他所有元素,用户只能点击弹出层,制造出模式窗口的假象. 废话不多说了,直接给大家贴js代码了. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&quo

  • JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序

    看到网上这个程序 发现了处错误这里改正了一下: function counter() { var date = new Date(); var year = date.getFullYear(); var date2 = new Date(year, 11, 30, 23, 59, 59); /*转换成秒*/ var time = (date2 - date) / 1000; var day = Math.floor(time / (24 * 60 * 60)) var hour = Math.

  • javascript 网页进度条简单实例

    javascript 网页进度条简单实例 最近学习新的知识,遇到一个小功能网页进度条,发现一篇文章还是不错的,这里记录下,也许能帮助到大家, 实例代码: <!DOCTYPE html> <html> <head> <style> #box {float:left;width:100%;height:18px;border:1px solid;} #bar {float:left;width:100%;height:18px;border:0px;backgr

  • javascript获取指定区间范围随机数的方法

    如下所示: //获取指定区间范围随机数,包括lowerValue和upperValue function randomFrom(lowerValue,upperValue) { return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue); } //如获取2-6之间的随机数 alert(randomFrom(2,6)); //如获取1-10之间的随机数 alert(randomFrom(1,10));

  • Javascript网页抢红包外挂实现分享

    一开始用Firefox加Firebug/YSlow插件分析,但是firefox不能运行自定义的javascript,好像还要装什么插件.于是转用chrome,发现chrome还是不错的,直接写个javascript就可以当作插件安装了. 中间淘宝还改过几次脚本,当然每次都是大同小异.佩服下苦逼的淘宝程序员,周末还要加班改脚本. 附录是我写的一个版本的脚本,直接调用 Volcano.BrickRate=1.0; Volcano.Brick.getLottery(KISSY); KISSY是一个类似

  • 关于在HTML网页制作中如何添加背景图片

    我们通常使用background来添加网页的背景图 效果图: background-image:url(图片地址) ; 这个是定义背景图片,但是注意,url可以是一个网页图片的链接地址,也可以是本机保存的图片,但是对于本机保存的图片,这里是一定一定要注意是url中的图片路径是以该CSS文件为参照对象,简单做法,可以直接将图片放置在和css文件相同的文件夹里,就可以直接引用url(图片名称.jpg即可) 放置方法示例: 代码引用: 其他的简单用法介绍: background-repeat: no-

  • JavaScript结合PHP实现网页制作中双下拉菜单的动态实现

    本文介绍了双下拉菜单的动态实现的代码,例如:在主菜单中有"焦点新闻"."生活时尚"."心情故事"三个选项,通过"焦点新闻"的选择,子菜单自动生成如"国内"."国际"."体育"."文娱",依此类推. 利用javascript,我们可以轻松实现上述效果.但问题是,如果菜单中的选项是从数据库(或其他文件)中动态提取,实现起来就并不是轻而易举的了.笔者根据

  • Javascript 网页水印(非图片水印)实现代码

    Javascript 网页水印(非图片水印)实现代码

    1 概述 1.1 定义 在一些B/S结构的应用系统中,有很多页面是需要有水印的.常见的就是公文系统.合同系统等.大家常常关注的是网站图片增加水印,而很少关注页面水印.刚去Google了一圈,关于页面水印的文章的数量为几乎为0. 本文中,流牛木马就与大家一起交流一下有关制作网页水印的心得. 本文讨论以下的情形: 新增水印的方法需要用Javascript完成,并要求能够方便地加入到原有的页面中,不能影响到已有的功能. 1.2 预期目标 就图片水印实现方案来说,我们预期至少包括以下几个目标: 1. 实

随机推荐