Heim > Artikel > Web-Frontend > Vollständiges Beispiel für einen einfachen Bild-Floating-Effekt, der durch js_javascript-Kenntnisse implementiert wird

Vollständiges Beispiel für einen einfachen Bild-Floating-Effekt, der durch js_javascript-Kenntnisse implementiert wird

WBOYOriginal: 2016-05-16 09:00:003785Durchsuche

Das Beispiel in diesem Artikel beschreibt den einfachen Bild-Floating-Effekt, der von js implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Verwenden Sie das Fensterobjekt, um den schwebenden Effekt eines Bildes zu erzielen

1. Es gibt eine bestehende Werbeabteilung, die wir steuern möchten, deren Startpunkt (0,0)

2. Stellen Sie die horizontale und vertikale Geschwindigkeit ein

3. Kontrollieren Sie die Bewegung der Werbeabteilung

1) Ob die Werbeabteilung die Grenze erreicht
2) Wenn wir die Grenze erreichen, stellen wir die Geschwindigkeit so ein, dass wir uns in die entgegengesetzte Richtung bewegen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
 position:absolute;
}
img{
 position:absolute; 
 filter:alpha(opacity=100);/* IE */
 -moz-opacity:1;/* Moz + FF */
 opacity: 1;/* 支持CSS3的浏览器（FF 1.5也支持）*/
}
</style>
</head>
<body>
<div id="divimg"><img src="123.jpg" width="100" height="150"></div>
<script language="JavaScript" type="text/javascript">
 //获取图片所在的div对象
 var img=document.getElementById("divimg");
 //设置div 左上角坐标 ，起始点的坐标
 var x=10,y=10;
 //设置图片的行进速度
 var xSpeed=2,ySpeed=1;
 //设置图片的最大浮动的高度和宽度
 var w=document.documentElement.clientWidth-110,h=document.documentElement.clientHeight-160;
 function floatimg(){
  //比较图盘是否到达边界 
  //如果到达边界以后，我们控制图片改变方向
  if(x>w||x<0){ xSpeed= -xSpeed; }
  if(y>h||y<0){ ySpeed= -ySpeed; }
  //如果没有达到边界，设置图片的左上角的坐标
  //设置坐标值 起始坐标+速度
  x+=xSpeed;
  y+=ySpeed;
 img.style.top=y+"px";
 img.style.left=x+"px";
 //延迟调用函数floatimg()，每个40毫秒调用一次
 setTimeout("floatimg()",40);
 }
 floatimg();
</script>
</body>
</html>

Leser, die an mehr JavaScript-bezogenen Inhalten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der JavaScript-Umschalteffekte und -Techniken“, „Zusammenfassung der JavaScript-Suchalgorithmustechniken", "Zusammenfassung der Spezialeffekte und Techniken der JavaScript-Animation", "Zusammenfassung der JavaScript-Fehler und Debugging-Fähigkeiten", "Zusammenfassung der JavaScript-Datenstrukturen und Algorithmustechniken“, „JavaScript-Traversal-Zusammenfassung von Algorithmen und Techniken“ und „Zusammenfassung der Verwendung mathematischer JavaScript-Operationen“

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

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：Empfohlene Methoden, um sich das Passwort zu merken und den Schlüssel zum Anmelden mit JS einzugeben, um Anmeldeseiten-Javascript-Kenntnisse zu implementierenNächster Artikel：Empfohlene Methoden, um sich das Passwort zu merken und den Schlüssel zum Anmelden mit JS einzugeben, um Anmeldeseiten-Javascript-Kenntnisse zu implementieren

In Verbindung stehende Artikel

Mehr sehen