萬盛學電腦網 >> 腳本專題 >> javascript >> js浮動圖片的動態效果
js浮動圖片的動態效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>浮動圖片</title>
<script type="text/javascript">
var step = 1; // 移動的像素
var y = -1; // 垂直移動的方向，-1表示向上，1表示向下
var x = 1; // 水平移動的方向，-1表示向左，1表示向右
function myFloat()
{
var img = document.getElementById("myImg");
// 獲取圖片和當前浏覽器窗口上邊距，由於img.style.top獲取的值帶px單位
var top = img.style.top.replace("px", "");
// top = top - 100;
// img.style.top = top + "px";
// 獲取圖片和當前浏覽器窗口左邊距
var left = img.style.left.replace("px", "");
// left = left - 100;
// img.style.left = left + "px";
// 上下移動
if(top <= 0)
{
y = 1;
}
if(top >= document.body.clientHeight)
{
y = -1;
}
top = (top*1) + (step * y);
img.style.top = top + "px";
// 左右移動
if(left <= 0)
{
x = 1;
}
// alert(img.clientWidth);
if(left >= (document.body.clientWidth - img.clientWidth))
{
x = -1;
}
left = (left*1) + (step * x);
img.style.left = left + "px";
setTimeout("myFloat()", 20);
}
</script>
</head>
<body onload="myFloat();" style="height: 400px;">
<img id="myImg" src="http://files.jb51.net/file_images/article/201307/2013071009420928.png"
style="position: absolute; left: 500px; top: 400px; border: solid 1px black;" />
</body>
</html>
另一種的實現方式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浮動廣告實例</title>
<script type="text/javascript">
var pos = 10;
function toueme() {
document.getElementById("toubiao").style.display = "none";
}
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var col = new initArray("4b", "5b", "8b", "8b");
col[0] = "yellow";
col[1] = "coral";
col[2] = "orange";
col[3] = "red";
col[4] = "greenyellow";
col[5] = "lime";
col[6] = "turquoise";
col[7] = "coral";
col[8] = "blueviolet";
col[9] = "violet";
function chgCol() {
pos++;
if (pos < 0 || pos > 9) {
pos = 0;
}
document.bgColor = col[pos];
setTimeout("chgCol()", 500);
}
</script>
</head>
<body bgColor="#ffffff" onload="chgCol();pingpong();">
<DIV id=img1
style="Z-INDEX: 100;
LEFT: 12px;
WIDTH: 159px;
POSITION: absolute;
TOP: 143px;
HEIGHT: 161px;
visibility: visible;">
<div id=toubiao>
<a style="CURSOR: hand" onClick=toueme()>
<img
src="close.gif"
width=84 height=11 hspace="6" border=0></a>
</div>
<a href="#" target="_blank">
<img src="1.jpg" width="280" height="280" border="0">
</a>
</DIV>
<SCRIPT>
var xPos = 0;
var yPos = 0;
var step = 3;
var delay = 100;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos()
{
width = document.body.clientWidth; //獲取浏覽器的寬度
height = document.body.clientHeight; //獲取浏覽器的高度
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + document.body.scrollLeft;
img1.style.top = yPos + document.body.scrollTop;
if (yon)
{yPos = yPos + step;}
else
{yPos = yPos - step;}
if (yPos < 0)
{yon = 1;yPos = 0;}
if (yPos >= (height - Hoffset))
{yon = 0;yPos = (height - Hoffset);}
if (xon)
{xPos = xPos + step;}
else
{xPos = xPos - step;}
if (xPos < 0)
{xon = 1;xPos = 0;}
if (xPos >= (width - Woffset))
{xon = 0;xPos = (width - Woffset); }
}
function start()
{
img1.visibility = "visible";
interval = setInterval('changePos()', delay);
//interval = setTimeout("changePos()", delay);
}
function pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;}
else
{
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();
</SCRIPT>
</body>
</html>
JS實現氣泡從水中急速上升效果
<html>
<head>
<title>JS實現氣泡從水中急速上升效果</title>
<style type="text/css">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#FFF; left:0; top:0; width:100%; height:100%;}
</style>
<script type="text/javascript">
var object = new Array();
nbfm = 60;
var xm = 0;
var ym = 9999;
var nx = 0;
var ny = 0;
function movbulb(){
with (this) {
if(ec < 20){
if(Math.abs(x0 - xm) < 100 && Math.abs(y0 - ym) < 100){
xx = (xm - x0) / 8;
yy = (ym - y0) / 8;
ec++;
}
}
xx *= 0.99;
yy *= 0.99;
javascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved