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 相关文章推荐
JavaScript 空位补零实现代码
Feb 26 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
理解javascript封装
Feb 23 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
简单实现js上传文件功能
Aug 21 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 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
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
python实现端口转发器的方法
2015/03/13 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python中turtle库的使用实例
2019/09/09 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Python Django路径配置实现过程解析
2020/11/05 Python
django使用多个数据库的方法实例
2021/03/04 Python
北京银河万佳Java面试题
2012/03/21 面试题
党员剖析材料范文
2014/09/30 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
介绍信格式样本
2015/05/05 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android