html5怎样在页面中加入雪花效果

html-css010

html5怎样在页面中加入雪花效果,第1张

在后台添加js特效可实现这样的效果。

js代码为:

<script language="JavaScript">

<!--

var no = 5//雪片数目

var speed = 20//飘动速度。(值越大越慢)

var ns4up = (document.layers) ? 1 : 0//当前浏览器类型,如果是NS则为1

var ie4up = (document.all) ? 1 : 0//当前浏览器类型,如果是IE则为1

var s, x, y, sn, cs

var a, r, cx, cy

var i, doc_width = 800, doc_height = 600

x = new Array()

y = new Array()

r = new Array()

cx = new Array()

cy = new Array()

s = 8//每次下落的高度,越小越平滑,但是也越慢

if (ns4up) { //以NS兼容方式

doc_width = self.innerWidth//取页面宽度

doc_height = self.innerHeight//取页面高度

}

else

if (ie4up) { //以IE兼容方式

doc_width = document.body.clientWidth//取页面宽度

doc_height = document.body.clientHeight//取页面高度

}

for (i = 0i <no++ i) { //根据前面定义的雪片数目写进相应数目的层

initSnow()//随机初始化层的坐标

if (ns4up) { //如果浏览器是NS

//用layer作为雪片(星号)的容器

document.write("<layer name=\"dot"+ i +"\" left=\"1\" ")

document.write("top=\"1\" visibility=\"show\"><font color=\"red\">")

document.write("*</font></layer>")

}

else

if (ie4up) { //如果浏览器是IE

//用div作为雪片的容器

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ")

document.write("absoluteZ-INDEX: "+ i +"VISIBILITY: ")

document.write("visibleTOP: 15pxLEFT: 15px\"><font color=\"red\">")

document.write("*</font></div>")

}

}

//初始化雪片,生成随机坐标

function initSnow() {

a = 6

r[i] = 1

sn = Math.sin(a)

cs = Math.cos(a)

cx[i] = Math.random() * doc_width + 1

cy[i] = Math.random() * doc_height + 1

x[i] = r[i] * sn + cx[i]

y[i] = cy[i]

}

//计算雪花位置,从新位置上出现,看起来就像是新产生的一样。

function makeSnow() {

r[i] = 1

cx[i] = Math.random() * doc_width + 1

cy[i] = 1

x[i] = r[i] * sn + cx[i]

y[i] = r[i] * cs + cy[i]

}

//雪花下落的计算

function updateSnow() {

r[i] += s

x[i] = r[i] * sn + cx[i]

y[i] = r[i] * cs + cy[i]

}

//在NS浏览器上处理雪片下落的主程序

function SnowdropNS() {

for (i = 0i <no++ i) { //依次处理每片雪花

updateSnow()//下落

if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) { //如果超出屏幕范围

makeSnow()//则调整雪片到新位置上

doc_width = self.innerWidth//更新页面宽度数据

doc_height = self.innerHeight//更新页面高度数据

}

document.layers["dot"+i].top = y[i]//改变层的Y坐标,应用新的位置

document.layers["dot"+i].left = x[i]//改变层的X坐标,应用新的位置

}

setTimeout("SnowdropNS()", speed)

}

//在IE浏览器上处理雪片下落的主程序

function SnowdropIE() {

for (i = 0i <no++ i) { //依次处理每片雪花

updateSnow()//下落

if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) { //如果超出屏幕范围

makeSnow()//则调整雪片到新位置上

doc_width = document.body.clientWidth//更新页面宽度数据

doc_height = document.body.clientHeight//更新页面高度数据

}

document.all["dot"+i].style.pixelTop = y[i]//改变层的坐标,应用新的位置

document.all["dot"+i].style.pixelLeft = x[i]

}

setTimeout("SnowdropIE()", speed)//准备下一次下落过程。

}

if (ns4up) { //如果是NS

SnowdropNS()//调用SnowdropNS使雪片下落

}

else

if (ie4up) { //如果是NS

SnowdropIE()//调用SnowdropIE使雪片下落

}

-->

</script>

说明:可以根据自己的需求根据说明进行相应参数的修改

HTML5是做什么的?

极其简单的概括:用于实现我们能够看到的所有网站,但是不涉及到数据层面(也就是负责将一张设计好的网页图片[设计师的工作],用代码实现出来,在一个地方放置个块,给一个块设置颜色,调整字体大小,让图片动起来等)。

HTML5的由来

不熟悉HTML5的人,可能会很熟悉一个2005年以前常用的词语——网页设计与制作。

随着行业的发展,网站的制作越来越受到了人们的重视,社会化分工越来越明细。在2005年,“WEB前端开发工程师”这个词语开始出现在各个一线城市。2008年,HTML5横空出世,2009年HTML5这个全新的词语在北京的一些顶尖级公司出现,2012年,逐渐的普及开来,2014年迅速发展。

HTML5的基本组成

HTML5 = HTML + CSS + JavaScript

HTML指的是结构

CSS指样式

JS即JavaScript,指的是行为

关于结构、样式、行为的理解:

结构 - 在整个网页中有标题,有列表,有图片等。

样式 - 标题文字的字体大小、颜色、字体;图片的大小;某个块的背景色或背景图等。

行为 - 在网页上四处飘动的广告;图片滚动;浏览淘宝时鼠标移动到商品时,放大商品的效果等。

无技术基础,看懂HTML5

学习HTML5需要掌握的知识点知识点有以下几个:

一、HTML5基本组成:

1、HTML5=HTML+CSS+JavaScript

2、HTML指的是结构:结构是在整个网页中有标题、列表、图片等。

CSS是样式:样式是标题文字的字体大小、颜色、字体;图片大小;某个块的背景色或背景图等。

JS是行为:行为是在网页上四处飘动的广告;图片滚动;浏览图片时鼠标移动到图片时,放大缩小图片的效果。

二、容易混淆概念:

1、HTML5移动端的功能和应用程序:

对于苹果手机中的应用程序,属于iOS开发,语言是OC;对于其他安卓系统的手机,需要使用JAVA语言进行开发。HTML5能够做的是移动端的网页以及微信平台中移动端网页。

2、前端后台的区别:

无论HTML5还是iOS,在整个网页开发流程中,前端(HTML5)开发工程师,主要负责的是“前台页面制作”,“网站测试”,“修改”三个部分。

3、HTML5与网页设计与制作的区别:

原有的网页设计与制作,主要针对PC平台,进行网页网站的设计与制作,相对会涉及一部分设计工作,并将美工图实现成网页。通常使用的工具是网页三剑客—Photoshop、Flash、Dreamweaver。

然而,行业的发展使得“网页设计与制作”这一职业逐渐遭到了淘汰。其中原因之一就是网页设计与制作当中的结构实现,通常采用的是table布局;而web前端开发工程师、HTML5当中结构的实现,采用的是DIV+CSS方式的布局,因此,Dreamweaver工具的使用也就没有什么必要性了,取而代之的是内存占用小,开发速度快的文本类编辑器。而Flash在与HTML5的大战中战败,当前已经退出了移动端以及电视平台的市场争夺,在PC平台也越来越少。转言之,Flash在网页制作的领域里已经江郎才尽,原来的网页三剑客只剩下一个ps,在前端工作要求中,需要掌握基本的切图即可。

总结:随着互联网的快速发展,HTML5已经慢慢的渗透到我们的生活中,因此HTML5前景十分光明,需要我们牢牢的抓住机会,通过一些专业的学习后能够在这个行业发光发热。