javascript网页特效——div的应用

实例一：从下往上的信息滚动特效

<div id="container" style="overflow:hidden;height:100px;">
<table align="left" cellpadding="0" cellspace="0" border="0">
<tr>
<td id="con1" valign="top">
<img src="1.jpg"><img src="1.jpg"><img src="1.jpg">
</td>
</tr>
<tr>
<td id="con2" valign="top"></td>
</tr>
</table>
</div>

<script type="text/javascript">
var timer = null;               //定时器
//页面加载完成的事件回调
function init(){
var time = 30;      //定义滚动的时间间隔，毫秒
//获取容器的DOM
var container = document.getElementById('container');
var d1 = document.getElementById('con1');
var d2 = document.getElementById('con2');
d2.innerHTML = d1.innerHTML //把第二个容器的内容填充为第一个
function MyMarquee(){           //定义滚动的函数
//如果d2的高度已经超过最大的限制
if(d2.offsetHeight <= container.scrollTop)
//把容器的滚动条恢复到最初的位置
container.scrollTop -= d1.offsetHeight;
else{
//滚动条的位置往top移动一个像素
container.scrollTop++;
}
}
timer = setInterval(MyMarquee,time);//开始一个定时执行
container.onmouseover=function() {  //定义鼠标放上事件
clearInterval(timer);           //结束滚动
}
container.onmouseout=function() {   //定义鼠标移出事件
timer=setInterval(MyMarquee,time);//再次开始
}
}
</script>

实例二：灯箱效果

<script type="text/javascript">
//监听显示灯箱层的按钮事件
function showLightBox(){
//获取层box的DOM
var box = document.getElementById('box');
box.style.display = 'block';    //显示层
h = box.offsetHeight;       //计算得到层的实际高度
var img = document.getElementById('pic1');//得到中心图片的DOM
img.style.top = (h/2)+'px';     //把它的高度居中
}
//关闭事件的函数
function closeLightBox(){
//获取层box的DOM
var box = document.getElementById('box');
box.style.display = 'none';//隐藏层
}
</script>

<p>
<input type="button" value="show" onclick="showLightBox()"/>
</p>
<div id="box">
<img src="1.jpg" id="pic1"/>
<a href="####" id="closeBtn" onload="closeLightBox()" onclick="closeLightBox()">关闭</a>
</div>

<style>
#box{
position: absolute;
left:0;
top:0;
/*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
z-index: 99;
border: 1px solid red;
width:100%;
height:100%;
background-color: gray;
margin: 0 auto;
display: none;
}
#box img{
position: relative;
}
#closeBtn{
position: absolute;
top: 5px;
right: 5px;
}
</style>

实例三：让层的叠放层次分明

<script type="text/javascript">
function change(x){
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
if(con1.style.zIndex == 1){
con2.style.zIndex = 1;
con1.style.zIndex = 2;
}else{
con1.style.zIndex = 1;
con2.style.zIndex = 2;
}
}
</script>

<style>
div{
width:100px;
height:100px;
position: absolute;
}
#con1{
background-color:gray;
left: 50px;
top: 50px;
z-index = 1;
}
#con2{
background-color:pink;
left: 100px;
top: 100px;
z-index  = 2;
}
</style>

<div id="con1">
这是一个层
</div>
<div id="con2">
这是一个层
</div>

实例四：由左向右的滚动广告

<script type="text/javascript">
var timer = null;               //定时器
//页面加载完成的事件回调
function init(){
var time = 30;              //定义滚动的时间间隔，毫秒
//获取容器的DOM
var con_ul = document.getElementById('con_ul');
function MyMarquee(){
//滚动条的位置往左边移动一个像素
var left = con_ul.style.left;//得到当前的坐标坐标
left = parseInt(left);      //得到数字的值
con_ul.style.left = (left-1)+'px';//把左坐标向左移动
//如果移动到了头
if(left*-2 == parseInt(con_ul.style.width)){
con_ul.innerHTML += con_ul.innerHTML;//自我内容拷贝一份
}
}
timer = setInterval(MyMarquee,time);//开始一个定时执行
con_ul.onmouseover=function() { //定义鼠标放上事件
clearInterval(timer);           //结束滚动
}
con_ul.onmouseout=function() {  //定义鼠标移出事件
timer=setInterval(MyMarquee,time);//再次开始
}
}
</script>

<div id="container" style="width:800px;visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px;">
<ul id="con_ul" style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 3886px; left: 0px;">
<li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
<li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
<li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
<li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
<li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
<li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
<li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
<li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
<li><a target="_blank" href="#"><img src="1.jpg"><br>123123</a></li>
</ul>
</div>