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>
Javascript 相关文章推荐
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
JsRender实用入门教程
Oct 31 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
Vue.js对象转换实例
Jun 07 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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
You might like
PHP 地址栏信息的获取代码
2009/01/07 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
Python多线程下载文件的方法
2015/07/10 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
酒店管理求职信范文
2014/04/06 职场文书
婚前财产公证书
2014/04/10 职场文书
2014教师研修学习体会
2014/07/08 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
1000字打架检讨书
2014/11/03 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL