suchen

Heim >Web-Frontend >js-Tutorial >js-Spezialeffekte: js realisiert den Effektcode der Saltowolke

js-Spezialeffekte: js realisiert den Effektcode der Saltowolke

不言
不言Original
2018-08-14 16:50:122593Durchsuche

Der Inhalt dieses Artikels befasst sich mit js-Spezialeffekten: js-Implementierung des Somersault-Cloud-Effektcodes, der einen gewissen Referenzwert hat. Ich hoffe, er wird für Sie hilfreich sein.

Verstehen Sie das Prinzip der Erleichterung der Animation

<!DOCTYPE html>
<!--create by ydj on 2018-08-12-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>筋斗云</title>
		<style>
        *{margin: 0; padding: 0;}
        ul {list-style:none;}
        body {
            background-color: #000;
        }
        .nav {
            width: 800px;
            height: 42px;
            background:url("images/rss.png") no-repeat right center #fff;
            margin: 100px auto;
            border-radius: 5px;
            position: relative; 
        }
        .cloud {
            width: 83px;
            height: 42px;
            position: absolute;
            top: 0;
            left: 0;
            background: url("images/cloud.gif") no-repeat;
        }
        .nav ul {
            position: absolute;
            top: 0;
            left: 0;
        }
        .nav li {
            float: left;
            width: 83px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            color: #000;
            cursor: pointer;
        }
    </style>
	</head>
	<body>
		<p class="nav" id="nav">
			<span class="cloud" id="cloud"></span>
			<ul>
				<li>AI数据中心</li>
				<li>财务中心</li>
				<li>事业中心</li>
				<li>陆兵学院</li>
				<li>供应中心</li>
				<li>总经办</li>
				<li>品牌中心</li>
				<li>人力中心</li>
			</ul>
		</p>
	</body>
</html>
<script>
	// 获取元素
	var cloud = document.getElementById("cloud");
	var nav = document.getElementById("nav");
	var lis = nav.children[1].children;
	// 记录点击时的位置
	var current = 0;
	for (var i = 0; i < lis.length; i++) {
		lis[i].onmouseover = function(){
			target = this.offsetLeft;
		}
		lis[i].onclick = function(){
			current = this.offsetLeft;
		}
		lis[i].onmouseout = function(){
			target = current;
		}
	}
	// 缓动动画
	var leader = 0,target =0;
	setInterval(function(){
		leader = leader + (target -leader)/10;
		cloud.style.left = leader + "px";
	},10);
	
</script>

Wirkung

Verwandte Empfehlungen:

Anwendung css js verwenden, um den Text auf der Seite zum Flackern zu bringen? (Beispiel)

Ajax-Upload-Datei und Anzeige des Fortschrittsbarcodes des Datei-Upload-Vorgangs

Das obige ist der detaillierte Inhalt vonjs-Spezialeffekte: js realisiert den Effektcode der Saltowolke. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css ajax JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Einführung in Module und Methoden in NodeJSNächster Artikel：Detaillierte Einführung in Module und Methoden in NodeJS

In Verbindung stehende Artikel

Mehr sehen