首页
所有分类
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 图片 上一张 下一张 链接效果（续篇）
Apr 20 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
vue中使用rem布局代码详解
Oct 30 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
埃及购物网站(2) 俄罗斯购物网站(137) 西班牙购物网站(115) 印尼购物网站(37) 瑞士购物网站(28) 印度购物网站(45) 日本购物网站(72) 墨西哥购物网站(16) 马来西亚购物网站(41) 德国购物网站(227)
You might like
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
PHP中的float类型使用说明
2010/07/27 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
Opacity.js
2007/01/22 Javascript
js DOM模型操作
2009/12/28 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
Columbia美国官网：美国著名的户外服装品牌
2016/11/24 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
护理个人求职信范文
2014/01/08 职场文书
师德师风承诺书
2014/05/23 职场文书
毕业证明书
2015/06/19 职场文书
汽车销售合同文本
2019/08/08 职场文书
在js中修改html body的样式
2021/11/11 Javascript
Golang 并发编程 SingleFlight模式
2022/04/26 Golang