집 > 기사 > 웹 프론트엔드 > js_javascript 기술로 구현된 간단한 그림 플로팅 효과의 전체 예

js_javascript 기술로 구현된 간단한 그림 플로팅 효과의 전체 예

WBOY원래의: 2016-05-16 09:00:003780검색

이 글의 예시에서는 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" 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>

더 많은 JavaScript 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다: "JavaScript 전환 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 특수효과 및 기법 요약", "JavaScript 오류 및 디버깅 기술 요약", "JavaScript 데이터 구조 및 알고리즘 기법 요약", "JavaScript 순회 알고리즘 및 기법 요약" 및 "JavaScript 수학적 연산 사용법 요약"

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：로그인 page_javascript 기술을 구현하기 위해 JS를 사용하여 로그인하기 위해 비밀번호를 기억하고 키를 입력하는 권장 방법다음 기사：로그인 page_javascript 기술을 구현하기 위해 JS를 사용하여 로그인하기 위해 비밀번호를 기억하고 키를 입력하는 권장 방법

js_javascript 기술로 구현된 간단한 그림 플로팅 효과의 전체 예

관련 기사