国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 09:16:24
字體:
來源:轉載
供稿:網友

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

首先還是放張效果圖: 


當看到這這頁面的時候我們要注意四點:
1.圖片的輪播
2.文字的滾動效果
3.音樂播放
4.飄雪效果 

那我們就一點一點來完成吧,Go,Go! 
對于上次分享的有人說我講的不夠細致,那在這篇文章我就細致一點。 
(1)準備工作
首先新建css,img,js,file這四個文件夾并新建demo.css,輪播圖片,demo.js,一首歌放在對應文件夾,新建demo.html,并在demo.css中加入如下代碼: 

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

這個代碼主要是為了消除默認樣式,并設置背景顏色為黑色,溢出隱藏。
在demo.html中引入demo.css,jquery.js(網上搜個就可以),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.設置定時器使得圖片依次顯示隱藏 
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">   沙揚娜拉-贈日本女郎 <br>   ――徐志摩<br>   最是那一低頭的溫柔,<br>   象一朵水蓮花<br>   不勝涼風的嬌羞,<br>   道一聲珍重,道一聲珍重,<br>   那一聲珍重里有蜜甜的憂愁――<br>   沙揚娜拉! </marquee></div>

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

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

為文字設置顯示位置,長寬等。文字滾動就這么簡單的完成了。

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

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

var minsize = 20; //雪花最小數值var maxsize = 50; //雪花最大數值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; //雪花開始距離屏幕左邊隨機數  var sdimg = minsize + Math.random()*(maxsize-minsize); //雪花隨機大小  var endwidth = Math.random()*sdwidth; //雪花結束距離屏幕左邊的隨機數  var time = sdheight*Math.random() + 3000; //雪花降落的時間  var startoption = 0.7+0.3*Math.random(); //雪花開始降落的透明度  var endoption = 0.2 + 0.3*Math.random(); //雪花結束降落的透明度  flack.clone().appendTo($("body")).css({ //克隆雪花冰設置初始位置   "left":startwidth,   "font-size": sdimg,   "opacity":startoption,   "color":"#fff"  }).animate({ //animate,是執行動畫的方法,這里用來雪花從上到下飄落   "top": sdheight-30,   "left": endwidth,   "opacity":endoption  },time,function(){     $(this).remove(); //雪花落在地上消失,移除制造出的雪花  }) },100)});

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 新巴尔虎左旗| 安远县| 茂名市| 深泽县| 兴海县| 阿巴嘎旗| 崇阳县| 荆门市| 确山县| 奉化市| 黔西县| 雷山县| 县级市| 汤阴县| 乌审旗| 湘阴县| 平乐县| 宣汉县| 新宾| 颍上县| 宿松县| 陵川县| 民权县| 平果县| 中方县| 塔河县| 灵武市| 东平县| 山阴县| 自治县| 望奎县| 定边县| 临沭县| 广南县| 沁源县| 蚌埠市| 和平县| 定日县| 清涧县| 芦山县| 海城市|