ホームページ > 記事 > ウェブフロントエンド > js_javascript スキルによって実装された単純な画像フローティング効果の完全な例

js_javascript スキルによって実装された単純な画像フローティング効果の完全な例

WBOYオリジナル: 2016-05-16 09:00:003806ブラウズ

この記事の例では、js で実装された単純な画像のフローティング効果について説明します。参考のために全員と共有してください。詳細は次のとおりです。

ウィンドウオブジェクトを使用して、画像の浮遊効果を実現します

1. 制御したい既存の広告 div があり、その開始点 (0,0)

2. 水平速度と垂直速度を設定します

3. 広告部門の動きをコントロールする

1) 広告部門が境界線に達しているかどうか
2) 境界に到達したら、反対方向に移動する速度を設定します。

<!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"    style="max-width:90%"  style="max-width:90%" alt="js_javascript スキルによって実装された単純な画像フローティング効果の完全な例" ></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>

この記事が javascript プログラミングのすべての人に役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JSを使用してログインpage_javascriptスキルを実装するためにパスワードを覚えてキーを入力してログインするための推奨方法次の記事：JSを使用してログインpage_javascriptスキルを実装するためにパスワードを覚えてキーを入力してログインするための推奨方法

続きを見る

js_javascript スキルによって実装された単純な画像フローティング効果の完全な例

関連記事