原生态js实现背景图片的轮播切换实现淡入效果

最新推荐文章于 2023-05-25 15:01:21 发布

wyler *_*

最新推荐文章于 2023-05-25 15:01:21 发布

阅读量1.9k

点赞数 2

分类专栏： js 文章标签： js css javascript css3

本文链接：https://blog.csdn.net/weixin_41575023/article/details/105439280

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

淡入效果主要依靠animate.css,可以自行百度下载使用，下面直接上代码逻辑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="gb2312">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/screensaver.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<script src="js/screensaver.js"></script>
	</head>
	<body >
		<div class="app animated">
			
			<div class="main">
				<div class="main_context" id="main_context">一个人几乎可以在任何他怀有无限热忱的事情上成功。——查尔斯·史考伯</div>
			</div>
			<div class="returnButton" onclick="goReturnPage()">
				<img src="img/screensaver/return.png" style="margin-left: 4px;margin-top: 2px;" />
			</div>
		</div>
	</body>
</html>

function initbackground(num){
	var app = document.getElementsByClassName("app")[0];
	var text = document.getElementById("main_context");
	var str = "";
	if(num>6){
		num = 1;
	}
	switch(num){
		case 1:
		str = "知否，知否？应是绿肥红瘦。——李清照《如梦令·昨夜雨疏风骤》";
		break;
		case 2:
		str = "山一程，水一程，身向榆关那畔行，夜深千帐灯。——纳兰性德《长相思·山一程》";
		break;
		case 3:
		str = "时人不识凌云木，直待凌云始道高。——杜荀鹤《小松》";
		break;
		case 4:
		str = "风一更，雪一更，聒碎乡心梦不成，故园无此声。——纳兰性德《长相思·山一程》";
		break;
		case 5:
		str = "山无陵，江水为竭，冬雷震震，夏雨雪。天地合，乃敢与君绝。——佚名《上邪》";
		break;
		case 6:
		str = "一声梧叶一声秋，一点芭蕉一点愁，三更归梦三更后。——徐再思《水仙子·夜雨》";
		break;
	}
	app.style.backgroundImage = "url(./img/screensaver/pbIMG"+num+".png)";
	addAnimate("app", "fadeIn");
	setTimeout(function(){removeAnimate("app", "fadeIn");},2000);
    //animateCSS("app", "fadeIn", "xx");
	text.innerHTML = str;
	num++;
	setTimeout(function(){initbackground(num);},8000);
}

function addAnimate(element, animationName){
	var node = document.getElementsByClassName(element)[0];
	node.classList.add(animationName,'slow');
}

function removeAnimate(element, animationName){
	var node = document.getElementsByClassName(element)[0];
	node.classList.remove(animationName,'slow');
}

function animateCSS(element, animationName, callback) {
    var node = document.getElementsByClassName(element)[0];
    node.classList.add('animated', animationName,'slower');

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName,'slower');
        node.removeEventListener('webkitAnimationEnd', handleAnimationEnd);

        if (typeof callback === 'function') {callback();}
    }

    node.addEventListener('webkitAnimationEnd', handleAnimationEnd);
}

主要实现动画效果的逻辑在这里

addAnimate("app", "fadeIn");

setTimeout(function(){removeAnimate("app", "fadeIn");},2000);

或者

animateCSS("app", "fadeIn","xx")

前者是用于较低版本的浏览器，由于这个动画的逻辑是在添加了class的动作完成（添加该class的方法执行完毕）后会播放动画，如果同一个方法里删除class再添加是不触发的。动画的播放时间是自定义的2s，所以在2s后会删除该动画class，在下一次执行时会再次添加再次触发动画播放。

后者是animate.css官方提供的一个方法，第一个参数是你选择器的id或者class，第二个是动画效果的class名，第三个是回调的方法名，animationend和webkitAnimationEnd是css动画的一个监听事件，动画播放完后执行的事件，这个在一些低版本的浏览器是没有的具体可以看css的文档。

注意

function addAnimate(element, animationName){
var node = document.getElementsByClassName(element)[0];
node.classList.add(animationName,'slow');
}

function removeAnimate(element, animationName){
var node = document.getElementsByClassName(element)[0];
node.classList.remove(animationName,'slow');
}

这两个方法使用不能直接用js添加 animated 和动画class，animated需要先写好在div上，如最上方代码。

剩下的css代码只是美化了页面的布局，对本文没有影响就不贴了。

wyler *_*

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
原生态js实现背景图片的轮播切换实现淡入效果

淡入效果主要依靠animate.css,可以自行百度下载使用，下面直接上代码逻辑function initbackground(num){ var app = document.getElementsByClassName("app")[0]; var text = document.getElementById("main_context"); var str = ""; if(n...
复制链接

扫一扫