编程 Javascript

js浮动图片的动态效果

Posted in Javascript onJuly 10, 2013

<!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="//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()"/><!-- 适用于IE浏览器 -->
</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>

js浮动图片的动态效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript的offset、client、scroll使用方法详解

Dec 25 Javascript

js实现的切换面板实例代码

Jun 17 Javascript

JavaScript获取flash对象与网上的有所不同

Apr 21 Javascript

基于jQuery通过jQuery.form.js插件实现异步上传

Dec 13 Javascript

jquery checkbox的相关操作总结

Oct 17 Javascript

jquery 实现回车登录详解及实例代码

Oct 23 Javascript

jQuery实现两个select控件的互移操作

Dec 22 Javascript

js 性能优化之快速响应的用户界面

Feb 15 Javascript

Vue项目webpack打包部署到服务器的实例详解

Jul 17 Javascript

js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

Sep 21 Javascript

基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

Apr 04 Javascript

vue-cli history模式实现tomcat部署报404的解决方式

Sep 06 Javascript

JS文本框默认值处理详解

Jul 10 #Javascript

JS实现点击下载的小例子

Jul 10 #Javascript

javascript 得到文件后缀名的思路及实现

May 09 #Javascript

让js弹出窗口居前显示的实现方法

Jul 10 #Javascript

JavaScript:new 一个函数和直接调用函数的区别分析

Jul 10 #Javascript

浅析onsubmit校验表单时利用ajax的return false无效问题

Jul 10 #Javascript

JavaScript 模拟类机制及私有变量的方法及思路

Jul 10 #Javascript