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 相关文章推荐
利用jq让你的div居中的好方法分享
Nov 21 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 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引用地址改变变量值的问题
2012/03/23 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
理解javascript封装
2016/02/23 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
Windows下python3.6.4安装教程
2018/07/31 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python字典与json转换的方法总结
2020/12/28 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
先进集体获奖感言
2014/02/13 职场文书
房地产广告策划方案
2014/05/15 职场文书
本科毕业生自荐信
2014/05/26 职场文书
五水共治一句话承诺
2014/05/30 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
投标邀请书范本
2015/02/02 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
python tkinter模块的简单使用
2021/04/07 Python
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS