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


Posted in Javascript onAugust 10, 2016

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

首先还是放张效果图: 

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)
});

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

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

Javascript 相关文章推荐
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
vue axios整合使用全攻略
May 24 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
jquery实现拖动效果
Aug 10 #Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 #Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 #Javascript
JS获取一个未知DIV高度的方法
Aug 09 #Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 #Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 #Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 #Javascript
You might like
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
php实现映射操作实例详解
2019/10/02 PHP
PHP实现递归的三种方法
2020/07/04 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
python实现简易通讯录修改版
2018/03/13 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python实现五子棋程序
2020/04/24 Python
python os模块在系统管理中的应用
2020/06/22 Python
虚拟机下载python是否需要联网
2020/07/27 Python
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
幼儿运动会邀请函
2014/01/17 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
出国留学经济担保书
2014/04/01 职场文书
保险公司开门红口号
2014/06/21 职场文书
师德师风自查材料
2014/10/14 职场文书
比赛主持人开场白
2015/05/29 职场文书
党支部半年考察意见
2015/06/01 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers