`
104zz
  • 浏览: 1503951 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

js 浮动效果，漂浮广告

js 浮动效果js漂浮广告js 
阅读更多

<html>

<head>

<title>js漂浮窗口</title>

<body>

<div id="codefans_net" style="position:absolute">

<!--链接地址--><a href="#" target="_blank">

<!--图片地址--><img src="android12.jpg" border="0">

</a>

</div>

<script> 

//x和y开始移动的位置

var x = 50,y = 60 

//xin和yin标识正反方向移动的判断

var xin = true, yin = true 

//每次移动的位移为10px

var step = 10 

//每隔0.5秒移动一次

var delay = 500 

//根据层ID获取要移动的层的对象

var obj=document.getElementById("codefans_net") 

//浮动的函数

function float() { 

//L和T表示浏览器窗口左边和顶部开始的坐标

var L=T=0

//R和B表示浏览器窗口右边和底部部减去浮动层宽和高的交点的坐标

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 = x + step*(xin?1:-1) 

if (x < L) {//表示浮动层的x坐标位置小于浏览器窗口最左边的位置设置xin为正向，x=L=0;

xin = true;

x = L

} 

if (x > R){//表示浮动层的x坐标位置大于浏览器窗口最右边的位置设置xin为反向，x=R;

xin = false;

x = R

} 

//计算y的位置

y = y + step*(yin?1:-1) 

if (y < T) { //表示浮动层的x坐标位置小于浏览器窗口最顶部的位置设置yin为正向，y=T=0;

yin = true;

y = T 

} 

if (y > B) { //表示浮动层的x坐标位置大于浏览器窗口最底部的位置设置yin为反向，y = B;

yin = false; 

y = B 

} 

} 

// setInterval() 方法按照指定的delay毫秒为周期来调用执行浮动方法float()。

var itl= setInterval("float()", delay) 

// clearInterval() 方法可以取消该周期性的方法调用。

obj.onmouseover=function(){clearInterval(itl)} 

// setInterval() 方法按照指定的delay毫秒为周期来调用执行浮动方法float()。

obj.onmouseout=function(){itl=setInterval("float()", delay)} 

</script>

</body>

</html>

  • 1.zip (84.9 KB)
  • 下载次数: 29
分享到：
| Android Animation 动画的使用方法和介绍
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics