本文提到的几个动画演示效果在这里:在线演示,有些是自己写的,有些是对着源码学的没再自己写,代码的github地址:点击打开链接。
1、完美运动框架
仿淘宝的动画效果,实现鼠标移入时小图片向上运动,再从下面回来。
HTML主要代码:
<body>
<div id="move">
<h1>便民服务</h1>
<a href="#"><i><img src="images/img1.png" alt="caipiao"></i><p>彩票</p></a>
<a href="#"><i><img src="images/img2.png" alt="movie"></i><p>电影</p></a>
<a href="#"><i><img src="images/img3.png" alt="music"></i><p>音乐</p></a>
<a href="#"><i><img src="images/img4.png" alt="life"></i><p>缴费</p></a>
<a href="#"><i><img src="images/img5.png" alt="licai"></i><p>理财</p></a>
<a href="#"><i><img src="images/img6.png" alt="food"></i><p>外卖</p></a>
</div>
</body>
JS主要代码:
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;
for(var attr in json){
//取当前的值
var iCur=0;
if(attr=='opacity'){
iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
iCur=parseInt(getStyle(obj,attr));
}
//算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//检测停止
if(iCur!=json[attr]){
flag=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},10)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
json是一些键-值对,代表属性及其目标值,可作通用的运动框架。
<script type="text/javascript">
window.οnlοad=function(){
var oMove=document.getElementById('move');
var aList=oMove.getElementsByTagName('a');
for(var i=0;i<aList.length;i++){
aList[i].οnmοuseenter=function(){
var _this=this.getElementsByTagName('i')[0];
startMove(_this,{top:-10,opacity:0},function(){
_this.style.top=30+'px';
startMove(_this,{top:10,opacity:100});
});
}
}
}
</script>
onmousemove:事件在鼠标移动到 div 元素上时触发。
mouseenter:事件中有在鼠标指针进入 div 元素时触发。
onmouseover:事件在鼠标指针进入 div 元素时触发,在子元素上也会触发
2、倒计时效果
Date():返回当前的日期和时间
getDate():查看Date对象并返回日期(1-31)
getDay():返回星期几(0-6)
getHours():返回小时数(0-23)
getMinutes():返回分钟数(0-59)
getMonth():返回月份值(从0开始,+1)
getSeconds():返回秒数
getTime():返回毫秒数
getYear():返回年份
getFullYear():返回年份最好用这个,获得完整格式 如2014)
HTML和JS代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Showtime</title>
<script>
window.οnlοad=function(){
showTime();
showLeftTime();
showLeftTime1();
}
//1-9显示成01-09两位
function checkTime(i){
if(i<10){
i="0"+i;
}
return i;
}
//显示当前时间
function showTime(){
var myDate=new Date();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
var date=myDate.getDate();
var d=myDate.getDay();
var h=myDate.getHours();
var m=myDate.getMinutes();
var s=myDate.getSeconds();
m=checkTime(m);
s=checkTime(s);
var weekday=new Array(7)
weekday[0]="星期日";
weekday[1]="星期一";
weekday[2]="星期二";
weekday[3]="星期三";
weekday[4]="星期四";
weekday[5]="星期五";
weekday[6]="星期六";
document.getElementById("show").innerHTML='当前时间:'+""+year+'年'+month+'月'+date+'日'+ weekday[d]+h+":"+m+":"+s;
setTimeout(showTime,500);
}
//显示剩余天数
function showLeftTime(){
var curtime=new Date();
var endtime=new Date("2017,6,6");
var lefttime=Math.ceil((endtime.getTime()-curtime.getTime())/(24*60*60*1000));
document.getElementById('left').innerHTML='距离高考还剩:'+lefttime+'天';
}
//显示剩余天时分秒
function showLeftTime1(){
var curtime=new Date();
var endtime=new Date("2017,1,1,12:20:12");
var lefttime=parseInt((endtime.getTime()-curtime.getTime())/1000);
var d=parseInt(lefttime/(24*60*60));
var h=parseInt(lefttime/(60*60)%24);
var m=parseInt(lefttime/60%60);
var s=lefttime%60;
document.getElementById('left1').innerHTML='距离团购结束还剩:'+d+'天'+m+'分'+s+'秒';
if(lefttime<=0){
document.getElementById('left1').innerHTML='团购结束';
}
setTimeout(showLeftTime1,500);
}
</script>
</head>
<body>
<div class="contents">
<div id="show">显示时间的位置</div>
<div id="left">显示高考倒计时的位置</div>
<div id="left1">显示倒计时时分秒</div>
</div>
</body>
</html>
3.信息滚动效果
html的<marquee>标签,不常用。
1、behavior滚动的方式
alternate:表示在两端之间来回滚动
scroll:表示优一端滚动到另一端,会重复
slide:表示由一端滚动到另一端,不会重复
2、direction滚动的方向:down、up、left、right
3、loop滚动的次数(loop=-1表示一直滚动下去,默认-1)
4、scrollamount设置活动字幕的滚动速度
5、scrolldelay设定活动字幕滚动两次之间的延迟时间
(1)文字无缝滚动
<script type="text/javascript">
var area = document.getElementById('moocBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
var speed = 50;
area.scrollTop = 0;
con2.innerHTML = con1.innerHTML;
function scrollUp(){
if(area.scrollTop >= con1.scrollHeight) {
area.scrollTop = 0;
}else{
area.scrollTop ++;
}
}
var myScroll = setInterval("scrollUp()",speed);
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",speed);
}
</script>
(2)文字间歇性滚动
<script type="text/javascript">
var area = document.getElementById('moocBox');
var iliHeight = 24;//单行滚动的高度
var speed = 50;//滚动的速度
var time;
var delay= 2000;
area.scrollTop=0;
area.innerHTML+=area.innerHTML;//克隆一份一样的内容
function startScroll(){
time=setInterval("scrollUp()",speed);
area.scrollTop++;
}
function scrollUp(){
if(area.scrollTop % iliHeight==0){
clearInterval(time);
setTimeout(startScroll,delay);
}else{
area.scrollTop++;
if(area.scrollTop >= area.scrollHeight/2){
area.scrollTop =0;
}
}
}
setTimeout(startScroll,delay)
</script>
4、仿京东商城分类导航效果
(1)纯CSS方式,用hover设置鼠标移入时悬浮层的显示和隐藏,主要代码:
.topmenu li:hover
{
border: 1px solid #DDD;
border-right: 0;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image: none;
}
.topmenu li:hover .submenu
{
display: block;
}
.topmenu li:hover span
{
background: white;
display: inline-block;
z-index: 20;
width: 20px;
height: 30px;
float: right;
position: relative;
}
(2)JS方式,将上述hover方法定义为类,遍历每一个li大标题,对onmouseover方法绑定这个类,主要代码:
.topmenu .lihover /*鼠标移动到上面时,应用的样式*/
{
border: 1px solid #DDD;
border-right: 0;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image: none;
height:60px;
border-left:4px solid #e4393c;
}
.topmenu .lihover .submenu /*悬浮层*/
{
display: block;
}
.topmenu .lihover span /*白色小方框*/
{
background: white;
display: inline-block;
z-index: 20;
width: 20px;
height: 60px;
float: right;
position: relative;
}
<script type="text/javascript">
window.onload = function () {
var Lis = document.getElementsByTagName("li");
for (i = 0; i < Lis.length; i++) {
Lis[i].onmouseover = function () {
this.className = "lihover";
}
Lis[i].onmouseout = function () {
this.className = "";
}
}
}
</script>