【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】怎么用jQuery實(shí)現(xiàn)雪花飄落效果_第1頁(yè)
【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】怎么用jQuery實(shí)現(xiàn)雪花飄落效果_第2頁(yè)
【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】怎么用jQuery實(shí)現(xiàn)雪花飄落效果_第3頁(yè)
【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】怎么用jQuery實(shí)現(xiàn)雪花飄落效果_第4頁(yè)
免費(fèi)預(yù)覽已結(jié)束，剩余1頁(yè)可下載查看

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】怎么用jQuery實(shí)現(xiàn)雪花飄落效果

本文在下為大家詳細(xì)介紹“怎么用jQuery實(shí)現(xiàn)雪花飄落效果”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么用jQuery實(shí)現(xiàn)雪花飄落效果”文章能幫助大家解決疑惑，下面跟著在下的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。示例：<!DOCTYPE

html>

<html>

<head>

<meta

charset="UTF-8">

<title>雪花飄落</title>

</head>

<style

type="text/css">

body{background:

black;height:

100%;overflow:

hidden;}

.xh{cursor:

pointer;}

</style>

<body>

<div

class="bk">

</div>

</body>

<script

src="jquery-1.8.3.min.js"></script>

<script

type="text/javascript">

var

minSize

=

5;

//最小字體

var

maxSize

=

50;//最大字體

var

newOne

=

200;

//生成雪花間隔

var

flakColor

=

"#fff";

//雪花顏色

var

flak

=

$("<div

class='xh'></div>").css({position:"absolute","top":"0px"}).html("?");//定義一個(gè)雪花

var

dhight

=

$(window).height();

//定義視圖高度

var

dw

=$(window).width();

//定義視圖寬度

setInterval(function(){

var

sizeflak

=

minSize+Math.random()*maxSize;

//產(chǎn)生大小不等的雪花

var

startLeft

=

Math.random()*dw;

//雪花生成是隨機(jī)的left值

var

startopcity

=

0.7+Math.random()*0.3;

//隨機(jī)透明度

var

endpositionTop=

dhight-100;

//雪花停止top的位置

var

endLeft=

Math.random()*dw;

//雪花停止的left位置

var

durationfull

=

5000+Math.random()*3000;

//雪花飄落速度不同

flak.clone().appendTo($("body")).css({

"left":startLeft

,

"opacity":startopcity,

"font-size":sizeflak,

"color":flakColor

}).animate({

"top":endpositionTop,

"left":endLeft,

"apacity":0.1

},durationfull,function(){

$(this).remove()

});

},newOne);

</script>

</html>上面是代碼，是不是很簡(jiǎn)單，你們?cè)撜f(shuō)了能做到想要的效果嗎？下面就讓你們看看效果上面就是效果了，可以把雪花換成錢(qián)或者其他東西，背景也可以改變一下，然后加個(gè)圣誕老人圖片，以及其他的，這樣就是一個(gè)簡(jiǎn)單的圣誕頁(yè)面了，其實(shí)也是很酷的。當(dāng)然我們也可以加點(diǎn)其他的交互效果，把圖片換成小飛機(jī)，然后做個(gè)打飛機(jī)的網(wǎng)頁(yè)游戲，其實(shí)也是很簡(jiǎn)單的，只需在這個(gè)上面增加交互和一些邏輯就行了。下面我就給大家一步一步的講解一下整個(gè)程序設(shè)計(jì)的思路。前提摘要：

我這個(gè)用了jq，當(dāng)然也可以用原生寫(xiě)，只是jq比較省事，所以就用了jq。首先引入jq:

<scriptsrc="jquery-1.8.3.min.js"></script>

這個(gè)需要根據(jù)自己的真實(shí)目錄來(lái)寫(xiě)，引入的時(shí)候注意兩點(diǎn)：一、記住一般引入的話最好放到整個(gè)頁(yè)面的最下面，因?yàn)樵陧?yè)面加載的時(shí)候是從上往下加載的，如果jq引入的時(shí)候在樣式的上面就會(huì)使得頁(yè)面加載速度慢，影響用戶(hù)體驗(yàn)，所以放在下面就會(huì)使得先加載樣式和圖片，有利于用戶(hù)體驗(yàn)。二、引入的時(shí)候不要放到依賴(lài)jq代碼的下面，因?yàn)轫?yè)面加載從上往下加載，要是放到下面的話就會(huì)使得依賴(lài)的代碼找不到j(luò)q變量和方法，就會(huì)報(bào)錯(cuò)。二、在寫(xiě)之前先想一下需要的變量，然后定義一下變量：我們做的是雪花飄落，所以我用*好來(lái)代替雪花，所以我們就要知道定義一個(gè)雪花，varflak=$("<divclass='xh'></div>").css({position:"absolute","top":"0px"}).html("?");

//定義一個(gè)雪花，然后我們要想一下雪花的屬性，知道雪花的幾個(gè)屬性。1、我們知道下雪的時(shí)候雪花的大小是不一樣的，所以我們?cè)诙x雪花大小的時(shí)候要用個(gè)最大雪花和最小雪花的尺寸，在js指定間隔執(zhí)行函數(shù)setinterval中我們用了隨機(jī)數(shù)，使得雪花隨機(jī)生成在最大的到最小的之間的尺寸：

varsizeflak=minSize+Math.random()*（maxSize-minSize）;

//產(chǎn)生大小不等的雪花2、定義一下間隔執(zhí)行函數(shù)的間隔，這個(gè)也可以不定義，直接寫(xiě)上也行3、定義一下雪花的自身固定屬性顏色，定義一下視圖的寬度。三、根據(jù)之前定義變量引入到間隔循環(huán)函數(shù)內(nèi)：

到了這一步就簡(jiǎn)單的多了，因?yàn)檫@個(gè)函數(shù)是每隔多少秒執(zhí)行一次，所以我們只需要把之前定義的東西都取最大值和最小值之間就行了。然后將之前定義的雪花克隆一下，這里講一下jq的克隆和js的克隆jq的克隆是節(jié)點(diǎn)直接.clone()

,是封裝好的js克隆方法。js就是直接節(jié)點(diǎn).cloneNode(true)

,只需要知道就行了，這樣就不會(huì)過(guò)于依賴(lài)jq庫(kù)了。最后一步：將

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論