css弹出窗口怎么做,就是鼠标移上去,就弹出一个可以选择的小窗口。

html-css06

css弹出窗口怎么做,就是鼠标移上去,就弹出一个可以选择的小窗口。,第1张

css 很难实现这个应为css都是设定好后不能被改变的 ,只能通过js重新赋值 ,这种方式就是js里面的多层 jquery ui 里面也有这个插件 自己写个也可以 就是当鼠标移动到指定标签上 触发js效果

把原先的div display:none 该变让他显示或者直接写入个div 位置就是当前鼠标的位置 也可以 这个比较好用 。

你可以试试改,因为不会有人一直告诉你答案

<html>

<head>

<style>

</style>

<script language="javascript">

function showpos()

{

var pos=document.body.scrollTop

pos=pos

if(pos==0)

paddingB.style.display="none"

else

paddingB.style.display="block"

paddingB.style.height=pos+"px"

document.title=pos

}

function closead()

{

addiv.style.display="none"

}

</script>

</head>

<body onscroll="javascript:showpos()" style="margin:0px">

<div id="addiv" style="position:absolutetop:200pxleft:0pxwidth:100%overflow:hidden" align="center"><div id="paddingB" style="overflow:hidden"></div><div style="font-size:12pxpadding:2pxwidth:400px" align="right"><a href="javascript:closead()">关闭</a></div><iframe src="http://www.baidu.com" scrolling="no" name="I1" border="0" frameborder="0" style="border:1px solid #ACACAC" width="400" height="300"></iframe></div>

<div style="height:1000px"></div>

</body>

</html>

其实蛮简单的,你理解了他的原理就会了,简单说一下吧,首先这个广告正常显示同样不影响网页其他的内容的布局,那么他应该是突出来的对吧?这个可以用相对文档的绝对定位或者相对浏览窗口的固定定位,这个会把?

然后再说下弹出效果,这个广告本身是display:none;隐藏的,然后通过js或者jq控制当打开该网页的时候添加display:block就弹出了(显示);复杂点的,有时候弹出来之后别人把他关闭了(或者直接没有关闭按钮,那么这里直接忽略),但是你又想广告过一会又弹出来,这个怎么实现呢?

这里就用到了定时器setInterval,里面加个判断 当该广告的display是none的时候把他改为block,再设置个时间多久循环一次,比如两秒,当广告被关闭,两秒之后会判断一次,因为广告广告是关闭的(display:none)所以他会给广告更改样式(改为display:block),这样广告又出来了

怎么样这样说能够理解吧?剩下的代码就需要你来写了,只把大概思路和你说下