快捷導(dǎo)航

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

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

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

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

首先還是放張效果圖：

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

那我們就一點(diǎn)一點(diǎn)來完成吧，Go，Go！
對(duì)于上次分享的有人說我講的不夠細(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用來定位，輪播等操作

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

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

下面說下輪播圖的js的思路：
1.顯示第一張圖片
2.設(shè)置定時(shí)器使得圖片依次顯示隱藏
3.加入動(dòng)畫效果，使得不生硬（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è)突然不知道怎么說，解釋一下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）音樂播放
<div><audio src="file/baihu.mp3" controls ></audio></div>
嘿嘿，一行代碼搞定。controls是為了顯示控件，播放按鈕等，這個(gè)算是個(gè)添彩的，有沒有隨你心情，當(dāng)然，你也可以將控件設(shè)置為autoplay讓它自動(dòng)播放并隱藏，這樣效果也是棒棒噠。

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

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; //雪花開始距離屏幕左邊隨機(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(); //雪花開始降落的透明度
  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)畫的方法，這里用來雪花從上到下飄落
   "top": sdheight-30,
   "left": endwidth,
   "opacity":endoption
  },time,function(){ 
    $(this).remove(); //雪花落在地上消失，移除制造出的雪花
  })
 },100)
});

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

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

您可能感興趣的文章: