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 ...
随机推荐
- Android之SAX解析XML
一.SAX解析方法介绍 SAX(Simple API for XML)是一个解析速度快并且占用内存少的XML解析器,非常适合用于Android等移动设备. SAX解析器是一种基于事件的解析器,事件驱动 ...
- 如何开发FineReport的自定义控件?
FineReport作为插件化开发的报表软件,有些特殊需求的功能需要自己开发,开发的插件包帆软官方有提提供,可以去帆软论坛上找,本文将主要介绍如何开发一个自定义控件,这里讲讲方法论. 第一步:实例化一 ...
- 微信小程序新单位rpx与自适应布局
rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?在解释这个单位前,我 ...
- ENode框架Conference案例分析系列之 - 文章索引
ENode框架Conference案例分析系列之 - 业务简介 ENode框架Conference案例分析系列之 - 上下文划分和领域建模 ENode框架Conference案例分析系列之 - 架构设 ...
- linux 下压缩大批量文件
find ./ -name '*衢州*' -type f -print| xargs zip /home/Eyuncloud/qz_20150211.zip
- ABP(现代ASP.NET样板开发框架)系列之9、ABP设置管理
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之9.ABP设置管理 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...
- C++多态详解
多态是面向对象的程序设计的关键技术.多态:调用同一个函数名,可以根据需要但实现不同的功能.多态体现在两个方面,我们以前学过的编译时的多态性(函数重载)和现在我们这一章将要学习的运行时的多态性(虚函数) ...
- Bootstrap3系列:按钮组
1. 基本实例 1.1 示例代码 <div class="btn-group"> <button type="button" class=&q ...
- H5+JS+CSS3 综合应用
慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...
- 【转】string.Format对C#字符串格式化
转自:http://blog.csdn.net/samsone/article/details/7556781 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) str ...