jQuery让圣诞主题页面更像爱情相册

今天我们做了一个有雪花效果的圣诞主题页面，我很喜欢。

首先，放一张效果图：

当我们看到这一页时，我们应该注意四点：1。图片的旋转，2。单词的滚动效果，3。音乐的演奏。雪的影响

那我们就一点一点的完成吧，走，走！上次分享的一些人说我说的不够详细，所以在这篇文章中我会更详细。(1)准备工作：首先创建css、img、js、file四个文件夹，创建demo.css，旋转图片，demo.js，在对应的文件夹放一首歌，创建一个新的demo.html，并在demo.css中添加以下代码：

* { padding:0margin:0} body { background: # 000飞越：隐藏；}此代码主要是消除默认样式，将背景颜色设置为黑色、溢出和隐藏。将demo.css、jquery.js(只需在网上搜索)和demo.js引入demo.html。

2)制作旋转木马地图

Div id=' sdimage ' Div class=' sdimg ' img src=' http : images/100 . jpg '/Div class=' sdimg ' img src=' http : images/101 . jpg '/Div class=' sdimg ' img src=' http : images/103 . jpg '/Div class=' sdimg ' img src=' http 3360 images/104 . jpg '/

# sdimage { position:absolutemargin : auto 0；left:100pxtop:100px；}.sdimg { display:none位置：绝对；} # sdimage主要用于定位转盘的位置，以及。sdimg用于隐藏图片并使所有图片重叠。

让我们来谈谈旋转木马的js的想法：1。显示第一张图片2。设置定时器使图片依次显示和隐藏。添加动画效果使其不生硬(fadeIn()和fadeOut()是淡入和淡出效果)

$(function(){ var I=0；$('.SDI mg’)。eq(0)。显示()。兄弟姐妹()。hide()；setInterval(函数(){ I；if(i5){ I=0；} $('.SDI mg’)。eq(i)。fadeIn()。兄弟姐妹()。fade out()；},3000);});3)文本滚动效果

div id=' sdmsg ' marquee direction=' up ' scrollamount=' 4 ' shian的Nora-给日本女孩的礼物br ——br徐志摩br是低头的温柔，br像一朵水莲br，她为凉风感到羞耻，br说宝藏，br说宝藏，宝藏里有蜂蜜和甜蜜的悲伤，Br shian Nora！/marquee/div.我突然不知道该怎么说。解释字幕。Marquee是html的标签，里面的内容可以滚动。方向设置文本滚动的方向，scrollamount设置文本滚动的速度。

# sdmsg { position:absolute宽度width:400px高度：500 px；color : # FFF；top: 100pxleft: 650px线高：40 px；}设置文本的显示位置、长度和宽度。文本滚动就是这么简单。

4)音乐播放div audio src=' http : file/baihu . MP3 '控件/audio/div。控件用于显示控件、播放按钮等。这是一种附加的颜色，不管它是否符合你的心情。当然也可以将控件设置为自动播放，自动隐藏，效果也很棒。

5)造雪效果的亮点终于来了！先说思路，具体在代码中标注说明：1。我们需要雪花在屏幕上从上到下随机落下，所以我们将它的高度设置为-50。(为什么这里是-50，因为雪花的大小设定在20到50之间。如果顶部小于50，雪花的大小大于50，雪花的出现会很突兀，家长可以试试。) 2.离屏幕左侧的距离不同，以控制雪花从浏览器上方的不同位置落下。3.这里，雪花的结束位置与浏览器左侧的距离不同，控制它的运动轨迹。当雪花落下时，他的轨迹一定不一样，因为它不能显得死板。4.有了雪花的运动轨迹，就要考虑雪花落下的时间。这里要考虑的是，如果屏幕放大到不同的程度，雪花的下落速度肯定不是恒定的。因此，我们应该通过浏览器的高度来控制雪花的下落速度。

var minsize=20//雪花var maxsize的最小值=50；//雪花varflack的最大值=$ ('div/div ')。CSS ({'position' :' absolute '，' top' :'-50px'})。html(“”)；//一片雪花$(函数(){var SD width=$(文档))。宽度()；//浏览器宽度var sdheight=$(文档)。高度()；//浏览器高度set interval(function(){ var start width=math . random()* SD width；//随机数var SD img=minsizemath。random () * (maxsize-minsize)从雪花开始到屏幕左侧；//雪花随机大小var end width=math . random()* SD width；//从雪花的末端到屏幕左侧的随机数vartime=SD height * math . random()3000；//雪花落下的时间var start选项=0.7 0.3 * math . random()；//雪花下落var内插的透明度=0 . 20 . 3 * math . random()；//雪花结束飘落的透明度flack.clone()。appendo($(“body”))。CSS({//克隆雪花ice设置初始位置' left' :startwidth，' font-size ' 3360 smig，' opacity' :startoption，Color' :' # fff'})。animate ({//animate，这是一种执行动画的方法，其中雪花从上到下‘顶’: SD高度-30、‘左’:结束宽度、‘不透明度’:结束选项}、时间、函数(){//雪花落地消失，去掉制造的雪花}) }、100)})；这里设定的是雪花从上到下落下后透明度不同。好了，一个漂亮的圣诞主题效果页面完成了。希望大家喜欢。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。