js浮动图片的动态效果

时间:2020-05-13 人气:0

<!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="https://img.jbzj.com/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;
x0 = Math.round(x0 + Math.cos(y0 / 15) * p) + xx;
y0+= yy - v;
if(y0 < -h * 2 || x0 < -w * 2 || x0 > nx + w * 2){
   y0 = ny + N + h * 2;
   x0 = nx/2-100 + Math.random() * 100;
   ec = 0;
}
obj.style.top = y0 - h;
obj.style.left = x0 - w;
}
}
function CObj(N,img,w,h){
this.obj = document.createElement("img");
this.obj.src = img.src;
this.obj.style.position = "absolute";
this.obj.style.left = -1000;
document.body.appendChild(this.obj);
this.N = N;
this.x0 = 0;
this.y0 = -1000;
this.v = 1 + Math.round((80 / h) * Math.random());
this.p = 1 + Math.round((w / 8) * Math.random());
this.xx = 0;
this.yy = 0;
this.ec = 0;
this.w = w;
this.h = h;
this.movbulb = movbulb;
}
function resize(){
nx = document.body.offsetWidth;
ny = document.body.offsetHeight;
}
onresize = resize;
document.onmousemove = function(e){
if (window.event) e = window.event;
xm = document.body.scrollLeft+(e.x || e.clientX);
ym = document.body.scrollTop+(e.y || e.clientY);
}
function run(){
for(i in object)object[i].movbulb();
setTimeout(run, 16);
}
onload = function() {
PIC = document.getElementById("bubbles").getElementsByTagName("img");
resize();
for(nbf=0;nbf<nbfm;nbf++){
sf = PIC[nbf%PIC.length];
object[nbf] = new CObj(nbf,sf,sf.width/2,sf.height/2);
}
run();
}
</script>
</head>
<body>
<div id="bubbles" style="visibility:hidden">
<img src="smile.gif">
<img src="biggrin.gif">
<img src="eek.gif">
<img src="rolleyes.gif">
</div>
</body>
</html>

浮动广告

复制代码代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>浮动广告</title>
</head>
<body style="background-color:pink">
<div id="ad" style="position:absolute">
<a href=http://www.baidu.com target="_blank">
<img src="2.gif" border="0" width="120" heigth="80">
<input type="button" value="关闭窗口" onclick="closeWindow()"/>
</a>
</div>
<script type="text/javascript">
var x = 400,y = 300
var xin = true, yin = true
var step = 1
var delay = 25
var obj=document.getElementById("ad")
function floatAD()
{
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("floatAD()", delay)
function closeWindow()
{
                      window.close();
                   }
</script>
<style type="text/css">
input{
   background-image:url(638.jpg);
   border:0px;
   margin:0px;
   padding:0px;
   height:23px;
   width:82px;
   font-size:14px;
}
</style>
</body>
</html>

加载全部内容