快捷導(dǎo)航

jQuery制作圣誕主題頁(yè)面更像是愛(ài)情影集

更新時(shí)間：2016年08月10日 08:54:23 作者：不會(huì)飛的麻雀

這篇文章主要為大家詳細(xì)介紹了jQuery制作圣誕主題頁(yè)面的方法，類(lèi)似動(dòng)感影集，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天制作的是有飄雪效果的圣誕主題頁(yè)面，個(gè)人灰常喜歡。

首先還是放張效果圖：

當(dāng)看到這這頁(yè)面的時(shí)候我們要注意四點(diǎn)：
1.圖片的輪播
2.文字的滾動(dòng)效果
3.音樂(lè)播放
4.飄雪效果

那我們就一點(diǎn)一點(diǎn)來(lái)完成吧，Go，Go！
對(duì)于上次分享的有人說(shuō)我講的不夠細(xì)致，那在這篇文章我就細(xì)致一點(diǎn)。
（1）準(zhǔn)備工作
首先新建css，img，js，file這四個(gè)文件夾并新建demo.css，輪播圖片，demo.js，一首歌放在對(duì)應(yīng)文件夾，新建demo.html，并在demo.css中加入如下代碼：

*{
 padding:0;
 margin:0;
}
body{
 background:#000;
 overflow:hidden;
}

這個(gè)代碼主要是為了消除默認(rèn)樣式，并設(shè)置背景顏色為黑色，溢出隱藏。
在demo.html中引入demo.css,jquery.js（網(wǎng)上搜個(gè)就可以）,demo.js。

2）輪播圖制作

<div id="sdimage">
 <div class="sdimg"><img src="images/100.jpg"></div>
 <div class="sdimg"><img src="images/101.jpg"></div>
 <div class="sdimg"><img src="images/103.jpg"></div>
 <div class="sdimg"><img src="images/104.jpg"></div>
 <div class="sdimg"><img src="images/105.jpg"></div>
 <div class="sdimg"><img src="images/106.jpg"></div>
</div>

用一個(gè)大的div包裹所有的輪播圖，小的div包裹img用來(lái)定位，輪播等操作

#sdimage{
 position:absolute;
 margin:auto 0;
 left:100px;
 top:100px;;
}
.sdimg{
 display:none;
 position:absolute;
}

#sdimage主要是為了定位輪播圖的位置，.sdimg是為了是圖片隱藏并使所有圖片重疊在一起。

下面說(shuō)下輪播圖的js的思路：
1.顯示第一張圖片
2.設(shè)置定時(shí)器使得圖片依次顯示隱藏
3.加入動(dòng)畫(huà)效果，使得不生硬（fadeIn()和fadeOut()是淡入淡出效果）

$(function(){
　　　　var i = 0;
 $(".sdimg").eq(0).show().siblings().hide();
 setInterval(function(){
  i++;
  if(i>5){
   i=0;
  }
  $(".sdimg").eq(i).fadeIn().siblings().fadeOut();
 },3000);
});

3）文字滾動(dòng)效果

<div id="sdmsg">
 <marquee direction="up" scrollamount="4">
   沙揚(yáng)娜拉-贈(zèng)日本女郎 <br>
   ——徐志摩<br>
   最是那一低頭的溫柔，<br>
   象一朵水蓮花<br>
   不勝?zèng)鲲L(fēng)的嬌羞，<br>
   道一聲珍重，道一聲珍重，<br>
   那一聲珍重里有蜜甜的憂愁——<br>
   沙揚(yáng)娜拉！
 </marquee>
</div>

額……這個(gè)突然不知道怎么說(shuō)，解釋一下marquee吧。
marquee是html的標(biāo)簽，在它之中的內(nèi)容是可以滾動(dòng)的，direction設(shè)置文字滾動(dòng)的方向，scrollamount設(shè)置文字的滾動(dòng)速度。

#sdmsg{
 position:absolute;
 width:400px;
 height:500px;
 color:#FFF;
 top: 100px;
 left: 650px;
 line-height:40px;
}

為文字設(shè)置顯示位置，長(zhǎng)寬等。文字滾動(dòng)就這么簡(jiǎn)單的完成了。

4）音樂(lè)播放
<div><audio src="file/baihu.mp3" controls ></audio></div>
嘿嘿，一行代碼搞定。controls是為了顯示控件，播放按鈕等，這個(gè)算是個(gè)添彩的，有沒(méi)有隨你心情，當(dāng)然，你也可以將控件設(shè)置為autoplay讓它自動(dòng)播放并隱藏，這樣效果也是棒棒噠。

5）飄雪效果制作
重頭戲終于來(lái)啦！
先說(shuō)下思路，具體在代碼里標(biāo)注解釋了哦：
1.我們需要雪花自屏幕上方自上而下隨機(jī)飄落，所以我們?cè)O(shè)置它的高度是-50。（這里為什么是-50呢，因?yàn)樵O(shè)置了雪花的大小在20-50之間，如果top小于50雪花大小大于50的話，雪花的出場(chǎng)方式會(huì)顯得很突兀，親們可以試試看哦）
2.這里用的是距離屏幕左邊的距離不同來(lái)控制雪花從瀏覽器上方不同位置落下。
3.這里用的是雪花結(jié)束的位置距離瀏覽器左邊的距離不同來(lái)控制他的運(yùn)動(dòng)軌跡。當(dāng)雪花飄下來(lái)的時(shí)候他的運(yùn)動(dòng)軌跡肯定是不一樣的，因?yàn)檫@樣才能顯得不死板。
4.雪花的運(yùn)動(dòng)軌跡有了，接下來(lái)就要考慮雪花下落的時(shí)間了。這里要考慮到如果屏幕被縮放成不同程度，雪花下落的速度肯定不是一成不變的。所以我們要通過(guò)瀏覽器的高度控制雪花下落的速度。

var minsize = 20; //雪花最小數(shù)值
var maxsize = 50; //雪花最大數(shù)值
var flack = $("<div></div>").css({"position":"absolute","top":"-50px"}).html("❉"); //一個(gè)雪花
$(function(){
 var sdwidth = $(document).width(); //瀏覽器寬度
 var sdheight = $(document).height(); //瀏覽器高度
 setInterval(function(){
  var startwidth = Math.random()*sdwidth; //雪花開(kāi)始距離屏幕左邊隨機(jī)數(shù)
  var sdimg = minsize + Math.random()*(maxsize-minsize); //雪花隨機(jī)大小
  var endwidth = Math.random()*sdwidth; //雪花結(jié)束距離屏幕左邊的隨機(jī)數(shù)
  var time = sdheight*Math.random() + 3000; //雪花降落的時(shí)間
  var startoption = 0.7+0.3*Math.random(); //雪花開(kāi)始降落的透明度
  var endoption = 0.2 + 0.3*Math.random(); //雪花結(jié)束降落的透明度
  flack.clone().appendTo($("body")).css({ //克隆雪花冰設(shè)置初始位置
   "left":startwidth,
   "font-size": sdimg,
   "opacity":startoption,
   "color":"#fff"
  }).animate({ //animate,是執(zhí)行動(dòng)畫(huà)的方法，這里用來(lái)雪花從上到下飄落
   "top": sdheight-30,
   "left": endwidth,
   "opacity":endoption
  },time,function(){ 
    $(this).remove(); //雪花落在地上消失，移除制造出的雪花
  })
 },100)
});

這里設(shè)置了雪花從上到下落以后的透明度是不同的。
好啦，一個(gè)美麗的圣誕主題效果頁(yè)面就做完了，希望大家喜歡。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: