如何利用 CSS 定位属性制作简单的边角旗帜广告

html-css021

如何利用 CSS 定位属性制作简单的边角旗帜广告,第1张

CSS 定位属性制作简单的边角旗帜广告:

用position的fixed的属性,优点是可跟随滚动条,fixed是相对上级有定位属性的来定位的,如果上级没有position就以body来定位。

写法:position:fixed

楼主咋能这样说捏…………这是个很简答的东西…………

自己看最后一个javascript函数的注释,页面上的展示是一个DNA式的展示,其实就是两个楼主要求的东西向不同方向开始震动…………

很郁闷,20分钟完成功能,花了一个小时来优化了下代码…………

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>旗帜飘扬.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/htmlcharset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">

.flaggingStyle {

color: #0066ff

font-family: 隶书

font-size: 24pt

font-weight: normal

}

</style>

<script type="text/javascript">

function flaggingMove(strTargetName, flaggingPosNo, flaggingVolatility, messageLength) {

for (var i = messageLength - 1i >= 1i--) {

document.getElementById("Flag_" + strTargetName + i).style.top = document.getElementById("Flag_" + strTargetName + (i - 1)).offsetTop

}

var target = document.getElementById(strTargetName)

var nowPos = parseInt(target.getAttribute("flaggingPosition"))

var nowDir = parseInt(target.getAttribute("flaggingDrection"))

if (nowPos == flaggingPosNo || nowPos == flaggingPosNo * -1) {

nowDir = nowDir * -1

target.setAttribute("flaggingDrection", nowDir)

}

nowPos = nowPos + nowDir

target.setAttribute("flaggingPosition", nowPos)

document.getElementById("Flag_" + strTargetName + "0").style.top = target.offsetTop + flaggingVolatility * Math.sin(Math.PI * nowPos / 2 / flaggingPosNo)

}

function flaggingReColor(strTargetName, messageLength) {

for (var i = messageLength - 1i >= 1i--) {

document.getElementById("Flag_" + strTargetName + i).style.color = document.getElementById("Flag_" + strTargetName + (i - 1)).style.color

}

document.getElementById("Flag_" + strTargetName + "0").style.color = Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255

}

function startFlagging(strCtrlName, flaggingPosNo, flaggingVolatility, messageLength, flaggingTerm, reColorTerm){

window.setInterval("flaggingMove('" + strCtrlName + "', " + flaggingPosNo + ", " + flaggingVolatility + ", " + messageLength + ")", flaggingTerm)

window.setInterval("flaggingReColor('" + strCtrlName + "', " + messageLength + ")", reColorTerm)

}

/**

* strFlaggingMessage 字符串,信息内容

* textwidth 数字,信息字符的宽度

* flaggingPosNo 数字,半周期变化位置的次数

* startPos 数字,小于等于flaggingPosNo,开始位置

* startDir 数字,1或-1,开始时字符移动的方向(向上或向下)

* flaggingVolatility 数字,字符每次移动的距离,flaggingVolatility*flaggingPosNo*2=字符震动的幅度

* flaggingTerm 数字,字符每隔多少毫秒移动一次,flaggingTerm*flaggingPosNo*4=字符震动的周期

* reColorTerm 数字,字符颜色每隔多少毫秒变化一次

* flaggingClass 字符串,定义字符的css的classname

*/

function flaggingCtrl(strFlaggingMessage, textwidth, flaggingPosNo, startPos, startDir, flaggingVolatility, flaggingTerm, reColorTerm, flaggingClass) {

var strCtrlName = "FlaggingMessageCtl"

if(document.getElementById(strCtrlName)){

var i = 0

while(document.getElementById(strCtrlName + "_" + i)){

i = i + 1

}

strCtrlName = strCtrlName + "_" + i

}

document.write("<span id=\"" + strCtrlName + "\"></span>")

var target = document.getElementById(strCtrlName)

var x = target.offsetLeft

var y = target.offsetTop

target.style.position = "absolute"

target.setAttribute("flaggingPosition", startPos)

target.setAttribute("flaggingDrection", startDir)

var messageArr = strFlaggingMessage.split("")

for (i = 0i <= messageArr.length - 1i++) {

var newSpan = document.createElement("span")

newSpan.innerText = messageArr[i]

newSpan.setAttribute("id", "Flag_" + strCtrlName + i)

newSpan.className = flaggingClass

newSpan.style.position = "absolute"

newSpan.style.top = y

newSpan.style.left = x + i * textwidth

document.body.appendChild(newSpan)

}

startFlagging(strCtrlName, flaggingPosNo, flaggingVolatility, messageArr.length, flaggingTerm, reColorTerm)

}

</script>

</head>

<body>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<script type="text/javascript">

flaggingCtrl("准备要像旗帜飘扬般晃动的信息1………………", 35, 4, 0, -1, 50, 35, 300, "flaggingStyle")

</script>

<script type="text/javascript">

flaggingCtrl("准备要像旗帜飘扬般晃动的信息2………………", 35, 4, 0, 1, 50, 35, 300, "flaggingStyle")

</script>

</body>

</html>

将banner外面加个DIV,调用样式类nav,然后设置banner为1000像素宽,nav的设置自动:

【CSS部分】

<style>

.nav{width:autoheight:30pxbackground:url(img/bg.jpg) center center no-repeat}即可。

横幅广告,一个表现商家广告内容的图片,放置在广告商的页面上,是互联网广告中最基本的广告形式,尺寸是宽度满屏*500到700像素的高度,一般是使用GIF格式的图像文件,可以使用静态图形,也可用多帧图像拼接为动画图像。除普通GIF格式外,新兴的Rich Media Banner(丰富媒体Banner)能赋予Banner更强的表现力和交互内容。

Internet Advertising Bureau (IAB,国际广告局)的"标准和管理委员会"联合Coalition for Advertising Supported Informatiln and Entertainment(CASIE,广告支持信息和娱乐联合会)联合推出了一系列网络广告宣传物的标准尺寸。这些尺寸作为建议,提供给广告生产者和消费者,使大家都能接受。截止至2014年4月15日网站上的广告几乎都遵循IAB/CASIE标准。