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

最新推荐文章于 2022-07-02 23:49:38 发布

Zoe_慕子晴

最新推荐文章于 2022-07-02 23:49:38 发布

阅读量699

点赞数

分类专栏： web前端

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文提到的几个动画演示效果在这里：在线演示，有些是自己写的，有些是对着源码学的没再自己写，代码的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>

Zoe_慕子晴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
慕课网-JS动画实例学习笔记

1、完美运动框架仿淘宝的动画效果，实现鼠标移入时小图片向上运动，再从下面回来。HTML主要代码：便民服务彩票电影音乐缴费理财外卖JS主要代码：function startMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var
复制链接

扫一扫