jQuery制作圣诞主题页面 更像是爱情影集

今天制作的是有飘雪效果的圣诞主题页面,个人灰常喜欢。

首先还是放张效果图:

当看到这这页面的时候我们要注意四点:
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)
});

这里设置了雪花从上到下落以后的透明度是不同的。
 好啦,一个美丽的圣诞主题效果页面就做完了,希望大家喜欢。

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

(0)

相关推荐

  • MSN圣诞照片(Backdoor.Win32.PBot.a)病毒分析解决

    文件名称:devic.exe 文件大小:23304 bytes AV命名:(virustotal上仅卡吧一家报)Backdoor.Win32.SdBot.cok 加壳方式:未知 编写语言:VC 病毒类型:IRCbot 文件MD5:45de608d74ee4fb86b20da86dcbeb55c 行为分析: 1.释放病毒副本: C:\WINDOWS\devic.exe , 23304 字节 C:\WINDOWS\img5-2007.zip , 23456 字节 2.添加注册表,开机启动: HKEY

  • javascript 闪烁的圣诞树实现代码

    christree var $ = function(){ var dom = {}; return { get : function($){ if(!dom[$]) dom[$] = document.getElementById($); return dom[$]; } ,apply : function(s,t,d){ if(t && typeof t == 'object') $.apply(s,d) if(s && t && typeof s ==

  • Android拍照保存在系统相册不显示的问题解决方法

    可能大家都知道我们保存相册到Android手机的时候,然后去打开系统图库找不到我们想要的那张图片,那是因为我们插入的图片还没有更新的缘故,先讲解下插入系统图库的方法吧,很简单,一句代码就能实现 复制代码 代码如下: MediaStore.Images.Media.insertImage(getContentResolver(), mBitmap, "", ""); 通过上面的那句代码就能插入到系统图库,这时候有一个问题,就是我们不能指定插入照片的名字,而是系统给了我

  • 如何用C语言画一个“圣诞树”

    如何用C语言画一个"圣诞树",我使用了左右镜像的Sierpinski triangle,每层减去上方一小块,再用符号点缀.可生成不同层数的「圣诞树」,如下图是5层的结果 #include <stdlib.h> int main(int argc, char* argv[]) { int n = argc > 1 ? atoi(argv[1]) : 4; for (int j = 1; j <= n; j++) { int s = 1 << j, k

  • 收集的10个免费的jQuery相册

    这里和大家分享一些很棒的网页照片相册.是由Tympanus通过jQuery来实现的.或许在网络上你已经见过数百种通过jQuery实现的相册,但是我们发现的这些相册,他们有额外的东西,优雅和独特的创意!每个相册都是可在线预览和免费下载的.你可以为你的Web项目添加色彩. 498)this.width=498;" border=0> 我们将看到这10个jQuery相册: 1. Photobie宝丽画廊 498)this.width=498;" border=0> 下载:http

  • jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享

    这是一款基于jquery实现的漫天雪花飞舞的圣诞祝福雪花效果代码,雪花的大小可以进行切换,用户还可以更改背景图片,是一款非常实用的幻灯片特效源码. 漫天雪花飞舞的jquery圣诞祝福雪花效果,集中不同的效果可以点击选择,请欣赏. 效果演示 源码下载(浏览器中如果不能正常运行,可以尝试切换浏览模式或者选择直接下载) 为大家分享的漫天雪花飞舞的jquery圣诞祝福雪花效果代码如下 <!DOCTYPE html> <html> <head> <script type=&

  • 圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现

    一年一度的圣诞节又到了,首先祝大家好运一串串,健康一年年,平安到永远!在这个特殊的日子里,处处洋溢着节日的气氛,空中飘落的雪花更显得浪漫!今天就教大家如何在博客中添加纷纷扬扬的下雪效果.今天,你那里下雪了吗? 首先在页面引入 jQuery 库和 jQuery.snow.js(或者使用压缩版本 jQuery.snow.min.js): 复制代码 代码如下: <script src="jquery.js"></script> <script src="

  • android照相、相册获取图片剪裁报错的解决方法

    这是调用相机 public static File getImageFromCamer(Context context, File cameraFile, int REQUE_CODE_CAMERA, Intent intent) { intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); File fileDir = HelpUtil.getFile(context, "/Tour/user_photos"); cameraFile

  • 圣诞节,写个程序练练手————Android 全界面悬浮按钮实现

    开始我以为悬浮窗口,可以用Android中得PopupWindow 来实现,虽然也实现了,但局限性非常大.比如PopupWindow必须要有载体View,也就是说,必须要指定在那个View的上面来实现.以该View为相对位置,来显示PopupWindow.这就局限了其智能在用户交互的窗口上,相对的显示.而无法自由的拖动位置和在桌面显示. 于是查阅了一些资料,有两种实现方法.一种是自定义Toast,Toast是运行于所有界面之上的,也就是说没有界面可以覆盖它.另一种是Android中得Compat

  • 基于JS2Image实现圣诞树代码

    马上圣诞节了,作为一名程序猿,如何体现自己独特的过节风格,如何在朋友圈发一张专属自己的祝福照片我觉得很有必要,你们说是不是. 谈到圣诞节,话说程序猿和圣诞之间的关系还有这么一个笑话: Q:程序员为什么总是将万圣节和圣诞节弄混? A:因为oct 31==Dec 25! 停停停... 先不笑,咱们先冷静下... 面对圣诞节还得加班加点的苦逼程序猿们,我们来缓解下自己沉闷的心情,发挥下自己独特的艺术细胞,是时候装一下逼了... 那就让我们用手头的IDE工具来展示一颗圣诞树吧,没有圣诞老人,没有圣诞礼物

随机推荐