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 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
JavaScript confirm选择判断
Oct 18 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
JavaScript获取时区实现过程解析
Sep 24 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php单例模式实现方法分析
2015/03/14 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python每天必学之bytes字节
2016/01/28 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
公司请假条范文
2014/04/11 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
小学综合实践活动总结
2014/07/07 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python
MySQL创建管理RANGE分区
2022/04/13 MySQL
Go语言安装并操作redis的go-redis库
2022/04/14 Golang