慕课网-JS动画实例学习笔记

来源：互联网发布：网络狼人杀发言技巧编辑：程序博客网时间：2024/05/22 12:55

本文提到的几个动画演示效果在这里：在线演示，有些是自己写的，有些是对着源码学的没再自己写，代码的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.onload=function(){var oMove=document.getElementById('move');var aList=oMove.getElementsByTagName('a');for(var i=0;i<aList.length;i++){aList[i].onmouseenter=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.onload=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>

0 0