首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
jQuery侧边栏实现代码
May 06 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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
delete in(1) REGEXP(1) Simhash(1) 表结构(1) RecyclerView(1) 九宫格(5) 查询效率(1) 字段分割(1) Hadoop(1) 控制流(1)
You might like
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
layui分页效果实现代码
2017/05/19 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
python机器学习之神经网络（三）
2017/12/20 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python使用Matplotlib画条形图
2020/03/25 Python
Python3 max()函数基础用法
2019/02/19 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
微软澳洲官方网站：Microsoft Australia
2017/01/10 全球购物
应届硕士毕业生自荐信
2014/05/26 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
项目投资合作意向书
2014/07/29 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
师德师风个人整改措施
2014/10/27 职场文书
委托收款证明
2015/06/23 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android