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 ...
随机推荐
- bitbucket新建分支
/workspace/ott_app_store:fetch-xml$ git branch edit_package_page /workspace/ott_app_store:fetch-xml$ ...
- Oracle系列之视图
涉及到表的处理请参看原表结构与数据 Oracle建表插数据等等 创建视图,把tb_Employee表sal<1000的雇员,映射到该视图( view) create or replace vi ...
- 2017-2-20 C#基础 运算符
C#的运算符主要分五种:算数运算符,关系运算符,逻辑运算符,条件运算符,赋值运算符.算术运算符有 + - * / % ++ --;关系运算符有 == != > ...
- 模块：time,random,os,sys
时间模块 import time # print(time.time()) #时间戳 # print(time.strftime('%Y-%m-%d %X')) #格式化字符 # print(time ...
- windows安装mysql示例
1. 下载mysql安装包,如: mysql-5.6.34-winx64.zip2. 解压安装包到指定目录,如:D盘,即:D:\mysql-5.6.34-winx643. 配置 cd D:\mysql ...
- caffe-windows画loss与accuracy曲线
参考博客: http://blog.csdn.net/sunshine_in_moon/article/details/53541573 进入tools/extra/文件夹中,修改plot_train ...
- [APUE]进程控制(下)
一.更改用户ID和组ID 可以用setuid设置实际用户ID和有效用户ID.可以用setgid函数设置实际组ID和有效组ID. #include <sys/types.h> #includ ...
- ubuntu64位系统编译时头文件找不到的问题（可以查看g++ -v路径，设置export C_INCLUDE_PATH，CPLUS_INCLUDE_PATH）
今天编译webrtc时出现以下错误: ninja -C out/Debug Allninja: Entering directory `out/Debug'[1/6] CXX obj/talk/app ...
- awk 调用 shell 命令，并传递参数
from:awk 调用 shell 命令的两种方法:system 与 print shell 向awk传递命令,这样使用即可: awk -v ... 但反过来呢?awk调用外部命令,同时也传参呢? ...
- 如何让windows更高效？
首先解释一下个标题: "让windows更高效,既指让windows更友好更优化,也指可以让使用windows来工作或学习的人更高效的工作学习." 解释下本文的动机: 指导我自己或 ...