网页右侧加悬浮图片的代码
C++ Builder实现飘浮广告图片
C++ Builder实现飘浮广告图片网页上到处能见到飘浮广告，任意在窗口内移动，用C++ Builder也能实现，增添程序的色彩，原理很简单，就是不断改变对象的坐标，即Left和Top属性。
下面以飘浮的图片为例。
新建一个工程，窗口Name属性为Form1，窗口宽度Width设为500，高度Height 设为400。
在窗口中添加一个Timage（在Additional页下），Name属性默认为Image1，点击Image1的Piceure属性，加载一张图片。
再在窗口中添加一个TTimer，Name默认为Timer1，Interval值设为1，Enabled设为true。
首先包含头文件并定义变量：#include "math.h" //后面要用到浮点数绝对值bool j=true;int x,y,x1,y1,x2,y2;然后在FormCreate里初始化变量：void__fastcall TForm1::FormCreate(TObject *Sender){//漂浮图片参数初始化x1=Image1->Left;y1=Image1->Top;x2=random(500);//随机获得一个坐标y2=random(400);Form1->DoubleBuffered=true;//让图片移动时不闪烁}接下来定义两个函数：int gety(int x1,int x2,int y1,int y2,int x){float y;y=(x-x1)*(y2-y1)/(x2-x1)+y1;y=(int)y;return y;}//求直线方程的y值int xie(int x1,int x2,int y1,int y2){float xielv=fabs((y2-y1)/(x2-x1));return xielv>1?1:0;}//判断斜率是否大于1最后一步，双击Timer1，写下如下代码：void__fastcall TForm1::Timer1Timer(TObject *Sender)//控制飘浮图片的移动{if(j){x=x1;j=false;}int xl=xie(x1,x2,y1,y2);if(xl)//如果斜率大于1，x随着y的值变化而变化{y=y+(y2-y1)/abs(y2-y1);x=gety(y1,y2,x1,x2,y);}else//如果斜率小于1，y随着x的值变化而变化{x=x+(x2-x1)/abs(x2-x1);y=gety(x1,x2,y1,y2,x);}//如果图片移动到边界，则将此时的坐标给x1和y1if(x>500||y>400||x<0||y<0){ x1=x;y1=y;x2=random(500);//随机获得下一个点的坐标y2=random(400);j=true;}//如果图片还没有移动到边界，则改变图片的坐标，即移动图片else{Image1->Left=x;Image1->Top=y;}}。
常用网页漂浮广告代码
常用网页漂浮广告代码代码:1.<body bgcolor="#F7F7F7"><!--图片漂浮广告代码开始--><div id="www_qpsh_com" style="position:absolute"> <!--链接地址--><a href="链接地址"target="_blank"><!--图片地址--><img src="图片地址" border="0"> </a></div><script>var x = 50,y = 60var xin = true, yin = truevar step = 1var delay = 10var obj=document.getElementById("www_qpsh_com") function floatwww_qpsh_com() {var L=T=0var R= document.body.clientWidth-obj.offsetWidthvar B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeftobj.style.top = y + document.body.scrollTopx = 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("floatwww_qpsh_com()", delay)obj.onmouseover=function(){clearInterval(itl)}obj.onmouseout=function(){itl=setInterval("floatwww_qpsh _com()", delay)}</script><!--图片漂浮广告代码结束--></body>2.<body bgcolor="#F7F7F7"><!--图片漂浮广告代码开始--><div id="www_qpsh_com" style="position:absolute"> <!--链接地址--><a href="链接地址"target="_blank"><!--图片地址--><img src="图片地址" border="0"> </a></div><script>var x = 50,y = 60var xin = true, yin = truevar step = 1var delay = 10var obj=document.getElementById("www_qpsh_com") function floatwww_qpsh_com() {var L=T=0var R= document.body.clientWidth-obj.offsetWidthvar B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeftobj.style.top = y + document.body.scrollTopx = 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("floatwww_qpsh_com()", delay)obj.onmouseover=function(){clearInterval(itl)}obj.onmouseout=function(){itl=setInterval("floatwww_qpsh _com()", delay)}</script><!--图片漂浮广告代码结束--></body>。
在网页中添加全屏飘动的图片
在网页中添加全屏飘动的图片一、无链接飘动图片效果代码（即点击飘动图片时并不能打开某些网址）：1、中速全屏代码：<DIV style='BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-900);BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-580); TEXT-ALIGN: center'><img src='图片地址' name='JPG1'style='LEFT: 700px; POSITION: absolute; TOP: 500px' width='90' height='110'> <objectalign='baseline' classid='CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6' height='10'id='pthl' style='LEFT: 0px; TOP: 2px' width='10' border='0'><param name='Autostart' value='-1'><param name='Bounce' value='-1'><param name='Direction' value='0'><param name='Duration' value='20'><param name='Repeat' value='-1'><param name='Target' value='JPG1'><param name='Relative' value='0'><param name='TimerInterval' value='0.1'><param name='Shape' value='polyline(208,200,220,210,500,830,200,300,200,200,200,200,250)' target='_blank'></A></DIV>2、慢速全屏代码：<img src='图片地址' name='JPG1'style='LEFT: 700px; POSITION: absolute; TOP: 500px' width='32' height='32'><objectalign='baseline' classid='CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6' height='10'id='pthl' style='LEFT: 0px; TOP: 2px' width='10' border='0'><param name='Autostart' value='-1'><param name='Bounce' value='-1'><param name='Direction' value='0'><param name='Duration' value='50'><param name='Repeat' value='-1'><param name='Target' value='JPG1'><param name='Relative' value='0'><param name='TimerInterval' value='0.1'><param name='Shape' value='polyline(7,600,0,550,250,450,170,350,200,160,170,250,330,400,250)' target='_blank'>二、有链接飘动图片效果代码（即点击飘动图片时可打开你想要链接的网址）：1、中速全屏：<DIV style='BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-900);BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-580);TEXT-ALIGN: center'><A href='链接网址' target=_blank><img src='图片地址' border=0 name='JPG1'style='LEFT: 700px; POSITION: absolute; TOP: 500px' width='90' height='110'> <objectalign='baseline' classid='CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6' height='10'id='pthl' style='LEFT: 0px; TOP: 2px' width='10' border='0'><param name='Autostart' value='-1'><param name='Bounce' value='-1'><param name='Direction' value='0'><param name='Duration' value='20'><param name='Repeat' value='-1'><param name='Target' value='JPG1'><param name='Relative' value='0'><param name='TimerInterval' value='0.1'><param name='Shape' value='polyline(208,200,220,210,500,830,200,300,200,200,200,200,250)' target='_blank'></A></DIV>2、慢速全屏：<DIV style='BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-900);BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-580); TEXT-ALIGN: center'><A href='链接网址' target=_blank><img src='图片地址' border=0 name='JPG1'style='LEFT: 700px; POSITION: absolute; TOP: 500px' width='90' height='110'> <objectalign='baseline' classid='CLSID:D7A7D7C3-D47F-11D0-89D3-00A0C90833E6' height='10'id='pthl' style='LEFT: 0px; TOP: 2px' width='10' border='0'><param name='Autostart' value='-1'><param name='Bounce' value='-1'><param name='Direction' value='0'><param name='Duration' value='50'><param name='Repeat' value='-1'><param name='Target' value='JPG1'><param name='Relative' value='0'><param name='TimerInterval' value='0.1'><param name='Shape' value='polyline(7,600,0,550,250,450,170,350,200,160,170,250,330,400,250)'target='_blank'></A></DIV>三、代码说明：1、TOP: 500px指图片上下位置（不必调整）。
图片漂浮代码
将div内的<a href="cn/index.html"; target="_blank">
<img src="ly.jpg"; border="0"></a>修改一下，cn/index.html，是点击漂浮图片后跳转到哪个页面；src="ly.jpg"是图片路径。
图片漂浮代码：
<div id="img" style="position:absolute;">
ction changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
xon = 0;
xPos = (width - Woffset);
}
}
function www_helpor_net() {
img.visibility = "visible";
interval = setInterval('changePos()', delay);
}
www_helpor_net();
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
网页里实现图片滚动代码
章，点击“显示源代码”。
2，在以红色为标记的图片地址换成你所链接图片的地址，当然了，本地址也可以用！ 3，在
和
GIF）下面的代码是让图片
实现步骤如下： 1，打开发表文章，点击“显示源代码”。
2，在以红色为标记的图片地址换成你所链接图片的地址，当然了，本地址也可以用！ 3，在
和
之间粘贴上面代码！（注：图片格式为JPG或者GIF）下面的图片是让图片向下移动！、
步骤如上！下面是滚
:
步骤如下： 1，首先打开控制面板，打开我的首页维护，进入自定义面板，新增一个面板。
2，打开新增的面板，点击
显示源代码！ 3，在代码
间插入如如上代码把以上图片链接地址换成自己的图片地址即可。
代码中可以修改的地方 direction=right 是移动的方向上：up 下：down 左：right 右：left scrollamount=5 是向下移动速度，可以调整，一般设置在1---15的
范围内比较好. 悬浮图片代码很多的网站都在两边空白处悬浮两个广告.随着滚动条的移动,图片也会向下移.那么我们blog不打广告.就来两个好看的动画
或图片吧! 左侧代码：
参数说明： 1、clientWidth 2、clientHeight后面负数的绝对值越大，图片越靠近上部 3、“图片地址”处加入你想用到的图片地址即可，你可以在网上找找.。
网页两边悬浮窗广告代码
<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>悬浮广告</title></head><body><div style="height:900px; display:block;"></div><div id="AdLayer1" style='position: absolute; ;z-index:1; left:100px; border:1px #DDD solid; width:36px; height:200px; background-color:#CCC;'></div><div id="AdLayer2" style='position: absolute; ;z-index:1; right:100px; border:1px #DDD solid; width:36px; height:200px; background-color:green;'></div><script type="text/javascript">// 页面初始化function initEcAd() {document.all.AdLayer1.style.posTop = 200;document.all.AdLayer1.style.visibility = 'visible'document.all.AdLayer2.style.posTop = 200;document.all.AdLayer2.style.visibility = 'visible'MoveLeftLayer('AdLayer1');MoveRightLayer('AdLayer2');}// 移动左面的广告层function MoveLeftLayer(layerName) {var x = 100;var y = 100;// 左侧广告距离页首高度var diff = (document.body.scrollTop + y - document.all.AdLayer1.style.posTop)*.40;var y = document.body.scrollTop + y - diff;eval("document.all." + layerName + ".style.posTop = parseInt(y)");eval("document.all." + layerName + ".style.posLeft = x");setTimeout("MoveLeftLayer('AdLayer1');", 20);}// 移动右边的广告层function MoveRightLayer(layerName) {var x = 100;var y = 100;// 右侧广告距离页首高度var diff = (document.body.scrollTop + y - document.all.AdLayer2.style.posTop)*.40;var y = document.body.scrollTop + y - diff;eval("document.all." + layerName + ".style.posTop = y");eval("document.all." + layerName + ".style.posRight = x");setTimeout("MoveRightLayer('AdLayer2');", 20);}initEcAd()</script> </body> </html>。
兼容性非常好的js右下角与漂浮广告代码
兼容性⾮常好的js右下⾓与漂浮⼴告代码兼容ie6 7 8 ,ff3.5 3.6,chrome 4.1.2,safari重新修正1.滚动时抖动的问题，主要体现在ff3.6上2.加⼊了ie6下的固定3.分成了两个块，xhtml,html解析4.随着屏幕⼤⼩⽽变动兼容ie6 7 8ff3.5 3.6chrome 4.1.2safari"/TR/xhequiv="Content-Type"/> <title>Untitled Document</title> <style> html,body{ padding:0; margin:0; } </style> <div id="aa"style="width:100px;heigh t:100px;background:#c0c 0c0;">我在随平滚</div> <div id="bb"style="width:100px;heigh t:100px;background:#c0c 0c0;">我静⽌不动</div> <divstyle="width:100%;height :1500px;background:#00 0"></div> <div:1500px;background:gre en"></div> <div:1500px;background:red" ></div> <script> function scrollx(p){ var d = document,dd =d.documentElement,db = d.body,w = window,o =d.getElementById(p.id),ie6 = /msie6/i.test(erAg ent),style,timer; if(o){o.style.cssText+=";position:"+(p.f&&!ie6?'fixed':'absolut e')+";"+(p.l==undefined?'right:0;':全选注:引⼊外部Js需再刷新⼀下页⾯才能执⾏]<metacontent="text/html;charset=utf-8" http-equiv="Content-Type"/><title>UntitledDocument</title> <style>html,body{ padding:0;margin:0; } </style> <divid="aa"style="width:100px;height:100px;background:#c0c0c0;">我在随平滚</div><div id="bb"style="width:100px;height:100px;background:#c0c0c0;">我静⽌不动</div><divstyle="width:100%;height:1500px;background:#000"></div> <divstyle="width:100%;height:1500px;background:green"></div> <divstyle="width:100%;height:1500px;background:red"></div> <script> functionscroll(p){ var d =document,dd =d.documentElement,db =d.body,w = window,o =d.getElementById(p.id),ie=/msie/i.test(erAgent),style,timer; if(o){//ie8下position:fixed下topleft失效 o.style.cssText全选注:引⼊外部Js需再刷新⼀下页⾯才能执⾏]。
带关闭的悬浮于右下角的图片窗口代码-兼容所有浏览器
}
this.element.style.position = 'absolute';
this.toDo();
setInterval(this.toDo.bind(this),this.dely)
}
}
var f = new Float('china_ads_div405',{dely:100,
document.write('<div><a href="http://" target="_blank"><img src="/p/2008/0907/241999/m_7A1926A283D0017BD57D8B01FFC9AA26.jpg" width="109" height="87" alt="漂亮" /></a></div>');
var results = [];
for (var i = 0; i < iterable.length; i++)
results.push(iterable[i]);
return results;
}
}
var Float = Class.create();
Float.prototype = {
initialize: function(elem, options) {
this.toDo = options.toDo || function(){},
this.bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在网页右侧加悬浮代码，其实非常简单
①、在广告的管理模块里新增加一个广告
②、广告代码在下面：
<div id="ad" style="position:absolute"><a href=" （广告地址处）">
<img src="/templets/tupian/漂浮.jpg（图片地址处）" border="0"></a>
</div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementByIdx_x_x("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)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)}
</script>
③、把上面代码的广告网址替换成你的广告网址就行了
④、把上面代码的src="/templets/tupian/漂浮.jpg （图片地址），代码换成你的图片地址
⑤、然后生成广告代码
⑥、最后Ctrl+C Ctrl+V 放到你的首页或者其他模板BODY内，就好啦
不明白可以先参考衬衫搭配爱shirt网
教程由爱shirt网编辑。