源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js浮动图片的动态效果

  • 时间:2021-09-02 11:56 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js浮动图片的动态效果
[url=#] <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>
浮动广告
[u]复制代码[/u] 代码如下:
<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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部