jq制作圣诞主题页面
今天制作的是有飘雪效果的圣诞主题页面，个人灰常喜欢。
首先还是放张效果图：
当看到这这页面的时候我们要注意四点：
1.图片的轮播
2.文字的滚动效果
3.音乐播放
4.飘雪效果
那我们就一点一点来完成吧，Go，Go！
对于上次分享的有人说我讲的不够细致，那在这篇文章我就细致一点。
（1）准备工作
首先新建css，img，js，file这四个文件夹并新建demo.css，轮播图片，demo.js，一首歌放在对应文件夹，新建demo.html，并在demo.css中加入如下代码：
*{
padding:;
margin:;
}
body{
background:#000;
overflow:hidden;
}
这个代码主要是为了消除默认样式，并设置背景颜色为黑色，溢出隐藏。
在demo.html中引入demo.css,jquery.js（网上搜个就可以）,demo.js。
（2）轮播图制作
<div id="sdimage">
<div class="sdimg"><img src="data:images/100.jpg"></div>
<div class="sdimg"><img src="data:images/101.jpg"></div>
<div class="sdimg"><img src="data:images/103.jpg"></div>
<div class="sdimg"><img src="data:images/104.jpg"></div>
<div class="sdimg"><img src="data:images/105.jpg"></div>
<div class="sdimg"><img src="data: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);
});
（三）文字滚动效果
<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;
}
为文字设置显示位置，长宽等。文字滚动就这么简单的完成了。
（四）音乐播放
<div><audio src="file/baihu.mp3" controls ></audio></div>
嘿嘿，一行代码搞定。controls是为了显示控件，播放按钮等，这个算是个添彩的，有没有随你心情，当然，你也可以将控件设置为autoplay让它自动播放并隐藏，这样效果也是棒棒哒。
（五）飘雪效果制作
重头戏终于来啦！
先说下思路，具体在代码里标注解释了哦：
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)
});
这里设置了雪花从上到下落以后的透明度是不同的。
好啦，一个美丽的圣诞主题效果页面就做完了，感谢Math.random为这个网页做出的巨大贡献，嘿嘿。
/************************根据腾讯课堂课程总结****************************/
jq制作圣诞主题页面的更多相关文章
- 慕课网H5圣诞主题
继七夕之后,我又出了一个圣诞主题的课程.圣诞主题是基于HTML5+CSS+JS编写与实现的,同时也是七夕主题的故事延续.圣诞主题依旧延续着七夕主题设计的思路,引入了3个经典的场景页面,在每个场景中表述 ...
- 从零开始制作 Hexo 主题
原文地址:从零开始制作 Hexo 主题 · Ahonn 写在前面 本文将会从零开始开发一个简单的博客主题.样式主要参考 Hexo theme 中的 Noise 主题. 开始之前你需要了解: 模板引擎 ...
- WordPress 主题教程：从零开始制作 WordPress 主题
为什么要开发WordPress主题? WordPress主题由一系列文件和样式表单组成,这些文件和样式表单共同作用生成WordPress网站的外观.每个主题都不同,用户可以通过这些主题随心所欲地更换自 ...
- wordpress 自己制作子主题 child theme
使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题 在了解子主题功能之前,先来看一下你在使用 WordPress 的时候是否是这样:不会自己制作主题,只好从网上下载一 ...
- python 跑服务器，访问自己制作的简单页面
1 python 跑服务器,访问自己制作的简单页面 2 # win+b出现一个网址http:/0.0.1:5000/复制到浏览器查看# http://127.0.0.1:5000/home 做这个首 ...
- Windows Live Writer 2014版绿色版制作及主题获取
前年才建好博客的时候就尝试用Windows Live Writer(WLW)写博客,用的是直接在网上找到的一个WLW 2009绿色美化版.但因为当时WLW获取的博客主题是主页的,预览的时候特别不爽,就 ...
- SVG制作可爱小页面
很久都没有在博客园上发表一些自己学的新东西了,只是在有空的时候逛一逛博客园而已,看来我不是一个真正的程序员,哈哈! 但是今天非常想和大家分享一个小东西,那是前两天在一个网页上看到了这个东西 我好奇中间 ...
- 解决LNMP环境无法显示所有WordPress主题及无法编辑主题页面
解决方法: 第一.编辑/usr/local/php/etc/php.ini文件 第二.找到disable_functions这一行中,删除"scandir,"这一段脚本,然后保存这 ...
- 用JS制作博客页面背景随滚动渐变的效果
今天颓了一会,用JavaScript给我的博客园博客写了一个页面背景随滚动而渐变的效果,做完之后自我感觉良好-- 下面就以我的博客园博客为例,介绍一下如何制作这个效果! 准备 [x] 申请博客园的JS ...
随机推荐
- 总结iOS开发中的断点续传那些事儿
前言 断点续传概述 断点续传就是从文件赏赐中断的地方重新开始下载或者上传数据,而不是从头文件开始.当下载大文件的时候,如果没有实现断点续传功能,那么每次出现异常或者用户主动的暂停,都会从头下载,这样很 ...
- 在UPDATE中更新TOP条数据以及UPDATE更新中使用ORDER BY
正常查询语句中TOP的运用: SELECT TOP 1000 * FROM MP_MemberGrade 随意更新一张表中满足条件的前N条数据: UPDATE TOP (1) MP_Member ...
- 【Java并发编程实战】----- AQS(一)：简介
在前面博客中,LZ讲到了ReentrantLock.ReentrantReadWriteLock.Semaphore.CountDownLatch,他们都有各自获取锁的方法,同时相对于Java的内置锁 ...
- JavaScript的基准测试-不服跑个分？
原文:Bulletproof JavaScript benchmarks 做JavaScript的基准测试并没有想的那么简单.即使不考虑浏览器差异所带来的影响,也有很多难点-或者说陷阱需要面对. 这是 ...
- C++ std::deque
std::deque template < class T, class Alloc = allocator > class deque; Double ended queue deque ...
- Python遇到字符编码出问题的一个相对万能的办法
在使用Python做爬虫的过程中,经常遇到字符编码出问题的情况. UnicodeEncodeError: 'ascii' codec can't encode character u'\u6211' ...
- 牛逼的css3:动态过渡与图形变换
写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（44）-工作流设计-设计表单
系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四步. 开始之前先说说表的结构. 其实表Flow_Form与Flow_FormContent设计是有一个缺陷的.我总共是设置最 ...
- 无限循环轮播图之JS部分（原生JS）
JS逻辑与框架调用, <script type="text/javascript"> var oBox = document.getElementById('box') ...
- Node.js简单操作
在node中是不支持BOM和DOM操作的,所以像alert().document.write...都是不支持的,可以是console.log() 首先我们来输出"hello world&qu ...