快捷導(dǎo)航

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

更新時間：2016年08月10日 08:54:23 作者：不會飛的麻雀

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

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

首先還是放張效果圖：

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

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

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

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

用一個大的div包裹所有的輪播圖，小的div包裹img用來定位，輪播等操作

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

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

下面說下輪播圖的js的思路：
1.顯示第一張圖片
2.設(shè)置定時器使得圖片依次顯示隱藏
3.加入動畫效果，使得不生硬（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）文字滾動效果

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

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

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

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

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

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

var minsize = 20; //雪花最小數(shù)值
var maxsize = 50; //雪花最大數(shù)值
var flack = $("<div></div>").css({"position":"absolute","top":"-50px"}).html("❉"); //一個雪花
$(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; //雪花降落的時間
  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í)行動畫的方法，這里用來雪花從上到下飄落
   "top": sdheight-30,
   "left": endwidth,
   "opacity":endoption
  },time,function(){ 
    $(this).remove(); //雪花落在地上消失，移除制造出的雪花
  })
 },100)
});

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

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

您可能感興趣的文章: