<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>漂浮广告代码-蚂蚁部落</title>
<style type="text/css">
#thediv
{
z-index:100;
position:absolute;
top:43px;
left:2px;
height:100px;
width:100px;
background-color:red;
}
</style>
<script type="text/javascript">
var xPos=300;
var yPos=200;
var step=1;
var delay=8;
var height=0;
var Hoffset=0;
var Woffset=0;
var yon=0;
var xon=0;
var pause=true;
var interval;
function changePos()
{
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
Hoffset=thediv.offsetHeight;
Woffset=thediv.offsetWidth;
thediv.style.left=(xPos+document.body.scrollLeft+document.documentElement.scrollLeft)+"px";
thediv.style.top=(yPos+document.body.scrollTop+document.documentElement.scrollTop)+"px";
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()
{
thediv.visibility="visible";
interval=setInterval(‘changePos()‘,delay);
}
function pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;
}
else
{
interval = setInterval(changePos,delay);
pause = true;
}
}
window.onload=function()
{
thediv.style.top=yPos;
start();
}
</script>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
随机漂浮图片广告实例代码
时间： 2024-08-07 21:18:08
随机漂浮图片广告实例代码的相关文章
java随机动态生成汉字验证码图片的实例代码分享
原创不易,转载请注明出处:java随机动态生成汉字验证码图片的实例代码分享 代码下载地址:http://www.zuidaima.com/share/1809721113234432.htm 汉字验证码实现原理 将汉字和干扰线生成图片并将汉字保存到session,前台获取每次生成验证码图片并用文本框值和session值比较,功能相对来说还是比较简单的. 效果图,如下: 验证成功后: java随机动态生成汉字验证码图片的实例代码分享
经典的js物理弹性漂浮图片广告代码
比较经典通用的Js物理弹性漂浮广告代码,漂浮速度适中.大小适中,是最经典最标准的漂浮广告代码了,推荐给大家使用.不过漂浮广告在一个页面上最好不要放太多,否则很影响网站浏览体验,得不偿失. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>经典的js物理弹性漂浮图片广告代码丨kiddy&l
页面上无法屏蔽的左右两侧的漂浮图片广告
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>页面上无法屏蔽的左右两侧的漂浮图片广告丨电
PHP结合JQueryJcrop实现头像图片裁切实例代码
看到一些网站上有图片剪切的功能,觉得挺炫,后来找了一款专用于图片裁切的插件,jquery.Jcrop.min.js,用这个插件可以方便的实现这个功能,使用时鼠标在图片上圈选出选区,即可把图片裁切成所选部分,非常适合用于头像的裁切编辑功能.前端UI分享 演示分为HTML和php两部分: 第一部分,HTML代码: .代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
PHPThumb图片处理实例代码
PHPThumb图片处理实例,例如生成缩略图.图片尺寸调整.图片截取.图片加水印.图片旋转等. 下载地址(github.com/masterexploder/PHPThumb).注意这个类库有一个重名的叫phpThumb,只是大小写的差别,所以查找文档的时候千万注意.在网站建设过程中,需要处理图片的地方多不胜数,用PHP的图片函数处理图片,十分繁琐. 而且对新手来讲十分不好掌握.现在我们可以用PHPThumb类库来处理图片,包括,图片尺寸调整,图片截取,图片加水印,图片旋转等等功能. 例子: <
自定义属性之图片切换实例——代码简化、函数合并——JS学习笔记2015-5-30（第43天）
鉴于for循环的重要性,今天再来回顾下什么时候想到使用for循环: 1.重复执行某些代码:2.每次执行的时候有个数字在变化: 说道代码简化,函数合并 这里要去观察自己的代码,当发现自己写的代码,在功能上存在相似的代码段时,看看他们能不能合并 也就是函数的使用思想,就是被用来重复调用:让程序的整体代码变得简洁: 和合并的过程中,注意调试效果,看看有没有影响到原来效果的执行: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta ht
jquery实现的随机显示图片效果代码
jquery实现的随机显示图片效果代码:下面介绍一下,点击按钮就可以实现图片的随机切换效果,代码实现非常的简单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <head> <tit
无法屏蔽的左右漂浮图片对联广告
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无法屏蔽的左右漂浮图片对联广告丨河北塑胶地
去除博客园底部图片广告的CSS代码
博客园是一个很不错的程序开发站,估计大家也发现了现在文章详情页底部也出现了广告,如果不想看到怎么办呢? 不要急,博客园后台是留了自定义css样式的代码入口的,这里就成了干掉广告的入口了.通过浏览器,仔细观察发现,图片广告外面的id竟然使用JS写成了活的,还没办法使用一个#id名去掉呢!这招虽然高,不过还是有细心地小伙伴们发现了规律:这个广告的类名分别是以下几个的随机取值:#cnblogs_click.#cnblogs_c1.#cnblogs_send. #cnblogs_event.#cnblo