CSS+JS上下浮动左右对联广告特效

html-css019

CSS+JS上下浮动左右对联广告特效,第1张

给你个思路吧

左右对联浮动只用css就可以实现了

设置两个div,设置position属性为fixed

左侧浮动的div,left为0,top设置一定的值

右侧浮动的div,right为0,top设置一定的值

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>悬浮广告</title>

</head>

<body>

<div style="height:900pxdisplay:block"></div>

<div id="AdLayer1" style='position: absolutez-index:1left:100pxborder:1px #DDD solidwidth:36pxheight:200pxbackground-color:#CCC'></div>

<div id="AdLayer2" style='position: absolutez-index:1right:100pxborder:1px #DDD solidwidth:36pxheight:200pxbackground-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>

最快捷的是直接在header.php页头或footer.php页脚引入,如果是指正对指定版块的可以搜索一下Discuz!2.5的目录模块或模板文件目录,查看对应的版块文件:

若样式比较少,也可以直接添加要对应的模块css文件中:

footer.php页脚

header.php页头

/source/archiver/forum

discuz.php论坛首页

forumdisplay.php论坛列表页

viewthread.php帖子内容页

/source/class核心类库

/source/class/adv程序广告功能库

adv_article.php门户文章页

adv_articlelist.php门户文章列表页

adv_blog.php空间日志

adv_cornerbanner.php全局 右下角广告

adv_couplebanner.php全局 对联广告

adv_custom.php自定义广告

adv_feed.php空间 动态广告

adv_float.php全局 漂浮广告

adv_footerbanner.php全局 页尾通栏广告

adv_headerbanner.php全局 页头通栏广告

adv_intercat.php论坛 分类间广告

adv_interthread.php论坛/群组 帖间通栏广告

adv_search.php搜索 右侧广告

adv_subnavbanner.php全局 页头二级导航栏广告

adv_text.php门户/论坛/群组/空间 格子广告

adv_thread.php论坛/群组 帖内广告

adv_threadlist.php论坛/群组 帖子列表帖位广告

/source/class/block/forumDIY模块-论坛功能库

blockclass.phpDIY模块语言包加载

block_activity.php活动模块

block_activitycity.php同城活动

block_activitynew.php最新活动

block_forum.php版块调用

block_thread.php主题调用

block_threaddigest.php精华主题

block_threadhot.php热门主题

block_threadnew.php最新主题

block_threadspecial.php特殊主题

block_threadspecified.php指定帖子

block_threadstick.php置顶帖

block_trade.php商品模块

block_tradehot.php热门商品

block_tradenew.php新商品

block_tradespecified.php指定商品

/source/class/block/groupDIY模块-群组功能库

blockclass.phpDIY模块语言包加载

block_group.php群组模块

block_groupactivity.php群组活动

block_groupactivitycity.php同城活动

block_groupactivitynew.php最新活动

block_grouphot.php热门群组

block_groupnew.php最新群组

block_groupspecified.php指定群组

block_groupthread.php群组帖子

block_groupthreadhot.php群组热门贴

block_groupthreadnew.php群组最新贴

block_groupthreadspecial.php群组特殊主题

block_groupthreadspecified.php群组指定贴

block_grouptrade.php群组商品

block_grouptradehot.php群组热门商品

block_grouptradenew.php群组最新是行频

block_grouptradespecified.php群组指定商品

/source/class/block/htmlDIY模块-静态模块功能库

blockclass.phpDIY模块语言包加载

block_adv.php站点广告

block_announcement.php站点公告模块

block_banner.php图片横幅

block_blank.php自定义HTML

block_forumtree.php版块列表

block_friendlink.php友情链接

block_google.phpGOOGLE

block_line.php分割线

block_myapp.php漫游模块

block_search.php搜索条

block_sort.php分类信息

block_stat.php数据统计

block_vedio.php网络视频

commonblock_html.php

/source/class/block/memberDIY模块-会员模块功能库

blockclass.phpDIY模块语言包加载

block_member.php会员模块

block_membercredit.php积分排行

block_membernew.php最新会员

block_memberposts.php发帖排行

block_membershow.php竞价排行

block_memberspecial.php特殊会员

block_memberspecified.php指定会员

/source/class/block/otherDIY模块-其他类模块功能库

blockclass.phpDIY模块语言包加载

block_otherfriendlink.php友情链接

block_otherstat.php统计模块

/source/class/block/portalDIY模块-门户模块功能库

blockclass.phpDIY模块语言包加载

block_article.php文章模块

block_articlehot.php热门文章

block_articlenew.php最新文章

block_articlespecified.php指定文章

block_portalcategory.php频道栏目

block_topic.php专题

block_topichot.php热门专题

block_topicnew.php最新专题

block_topicspecified.php指定专题

/source/class/block/spaceDIY模块-空间类模块功能库

blockclass.phpDIY模块语言包加载

block_album.php相册模块

block_albumnew.php最新相册

block_albumspecified.php指定相册

block_blog.php日志模块

block_bloghot.php热门日志

block_blognew.php最新日志

block_blogspecified.php指定日志

block_doing.php记录模块

block_doinghot.php热门记录

block_doingnew.php最新记录

block_pic.php图片模块

block_pichot.php热门图片

block_picnew.php最新图片

等等......