扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
当然是引用的外部 .CSS 文件,如果是在当页面直接写的话,那只能当页修改。
成都创新互联长期为近千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为大余企业提供专业的成都网站设计、做网站、成都外贸网站建设公司,大余网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
script language="javascript"
function repos(x,y){ //x、y分别是你广告框的宽度和高度
layid = document.getElementById("ddiv"); //ddiv的广告框div的id
layid.style.left = (document.documentElement.scrollLeft + document.documentElement.clientWidth - x)+"px";
layid.style.top = (document.documentElement.scrollTop + document.documentElement.clientHeight - y)+"px";
}
/script
这是广告框的css:style="position:absolute; z-index:1; width:175px; height:80px"
然后把上面这个repos(x,y)函数同时用到onload、onscroll、onresize的事件中
css只能实现广告漂浮在一个指定的地方,不能动的,如果需要移动的广告就必需用js代码实现的
css漂浮代码为:position:absolute;
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
meta name="Copyright" content="#" /
meta name="description" content="#" /
meta content="#" name="keywords" /
title11/title
/head
BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
div id=duilian01 style="POSITION: absolute; TOP: 100px; HEIGHT: 300px; background-color: #069; width: 100px; left: 6px;"/div
div id=duilian02 style="POSITION: absolute; TOP: 100px; HEIGHT: 300px; background-color: #069; width: 100px; left: 896px;"/div
script language=JavaScript src="js/scrolljs.js" type=text/javascript/script
table width="778" height="1000" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4"
tr
td/td
/tr
/table
/BODY/HTML
---------------------------------------下面是JS代码:命名scrolljs.js------------------------------------------
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
var tmp1= tmp2= tmp3 =0;
tmp1 = document.body.clientHeight;
var isArrayRightBanner = false;
var has2ndScraper = false;
if (typeof(duilian02.length) == "number") isArrayRightBanner = true;
if (typeof(duilian01) == "object") has2ndScraper = true;
function makewing()
{
tmp2 = document.body.clientHeight;
if(tmp1 != tmp2){
tmp3 = tmp2 - tmp1;
tmp1 = tmp2;
if(tmp30){}
}
if(IE)
{
diffY = document.body.scrollTop;
diffX = 0;
}
else if(NS)
{
diffY = self.pageYOffset;
diffX = self.pageXOffset;
}
if(diffY != lastScrollY)
{
percent = .1 * (diffY - lastScrollY);
if(percent 0)
percent = Math.ceil(percent);
else
percent = Math.floor(percent);
if(IE)
{
if (isArrayRightBanner)
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelTop += percent;
}
document.all.duilian02[0].style.pixelTop += percent;
document.all.duilian02[1].style.pixelTop += percent;
}
else
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelTop += percent;
}
document.all.duilian02.style.pixelTop += percent;
}
if (has2ndScraper) document.all.duilian01.style.pixelTop += percent;
}
else if(NS)
{
if (isArrayRightBanner)
{
document.skyflash.top += percent;
document.duilian02[0].top += percent;
document.duilian02[1].top += percent;
}
else
{
document.skyflash.top += percent;
document.duilian02.top += percent;
}
if (has2ndScraper) document.duilian01.top += percent;
}
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX)
{
percent = .1 * (diffX - lastScrollX);
if(percent 0)
percent = Math.ceil(percent);
else
percent = Math.floor(percent);
if(IE)
{
if (isArrayRightBanner)
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelLeft += percent;
}
document.all.duilian02[0].style.pixelLeft += percent;
document.all.duilian02[1].style.pixelLeft += percent;
}
else
{
if (document.all.skyflash != null) {
document.all.skyflash.style.pixelLeft += percent;
}
document.all.duilian02.style.pixelLeft += percent;
}
if (has2ndScraper) document.all.duilian01.style.pixelLeft += percent;
}
else if(NS)
{
if (isArrayRightBanner)
{
document.skyflasy.top += percent;
document.duilian02[0].top += percent;
document.duilian02[1].top += percent;
}
else
{
document.skyflash.top += percent;
document.duilian02.top += percent;
}
if (has2ndScraper) document.duilian01.top += percent;
}
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("makewing()",1);
单独建一个文件夹命名js,把js文件放入文件夹内,防止路径不对出错。
其实蛮简单的,你理解了他的原理就会了,简单说一下吧,首先这个广告正常显示同样不影响网页其他的内容的布局,那么他应该是突出来的对吧?这个可以用相对文档的绝对定位或者相对浏览窗口的固定定位,这个会把?
然后再说下弹出效果,这个广告本身是display:none;隐藏的,然后通过js或者jq控制当打开该网页的时候添加display:block就弹出了(显示);复杂点的,有时候弹出来之后别人把他关闭了(或者直接没有关闭按钮,那么这里直接忽略),但是你又想广告过一会又弹出来,这个怎么实现呢?
这里就用到了定时器setInterval,里面加个判断 当该广告的display是none的时候把他改为block,再设置个时间多久循环一次,比如两秒,当广告被关闭,两秒之后会判断一次,因为广告广告是关闭的(display:none)所以他会给广告更改样式(改为display:block),这样广告又出来了
怎么样这样说能够理解吧?剩下的代码就需要你来写了,只把大概思路和你说下
一般来说,广告是选择当前页面模拟弹窗的,而它们的代码一般是加在body标签最后的,所以,我们就有机会屏蔽掉它们了。。。。
1.将你自己的所有代码用一个div包围起来;
2.设置这个div的定位为position:absolute;
3.再设置这个div居中,{...top:0;left:50%;margin-left:/*你页面宽度的一半的负值*/;width:/*页面宽度*/}
4.设置这个div的z-index,因为一般弹窗的z-index是用999、9999居多,所以你设置一个比这个大很多的z-index即有机会覆盖广告。。。。(你可以查看具体的广告的z-index后再针对性地设置)
5.所有代码,相信你可以搞定的。。。。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流