Exemple complet d'effet flottant d'image simple implémenté par les compétences js

Exemple complet d'effet flottant d'image simple implémenté par les compétences js_javascript

WBOY

Libérer： 2016-05-16 09:00:00

original

3830 Les gens l'ont consulté

L'exemple de cet article décrit l'effet flottant d'image simple implémenté par js. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Utilisez l'objet fenêtre pour obtenir l'effet flottant d'une image

1. Il existe un div publicitaire existant, que nous souhaitons contrôler, son point de départ (0,0)

2. Réglez la vitesse horizontale et verticale

3. Contrôler le mouvement des divisions publicitaires

1) Si la division publicitaire atteint la frontière
2) Si on atteint la limite, on fixe la vitesse pour se déplacer dans la direction opposée

<!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>

Copier après la connexion

Les lecteurs intéressés par davantage de contenu lié à JavaScript peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets et techniques de commutation JavaScript", "Résumé des techniques d'algorithme de recherche JavaScript", "Résumé des effets spéciaux et techniques d'animation JavaScript", "Résumé des erreurs JavaScript et des compétences de débogage", "Résumé des structures de données JavaScript et des techniques d'algorithme", "Résumé des algorithmes et techniques de traversée JavaScript" et "Résumé de l'utilisation des opérations mathématiques JavaScript"

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.