您的位置：首页 > Web前端 > JavaScript

使用纯的javaScript制作右下角类似腾讯新闻弹出框效果

2014-08-06 21:32 501 查看
感觉在公司呆久了，业务逻辑写的多，js的操作都快全忘了，今天帮别人写了一个纯的javaScript效果，类似于腾讯新闻的弹出效果。

html代码：
<body style="width:800px; height:800px">
This is my JSP page. <br>
<!--  <div id="jsTest01" onmouseover="MouseIn()" onmouseout="MouseOut()" style="height:200px;width:100px;padding:30px;">nouse in</div>-->

<div id="jsTest02" style="width:200px;height:0px ;border-color:#cc0000;position:absolute;right:0px;bottom:0px;background-color: red">
<table height="200px" width="200px">
<tr height="20%">
<td>新闻头条</td>
<td><a onclick="closeM()">X</a></td>
</tr>
<tr height="80%">
<td colspan="2">新闻内容</td>
</tr>
</table>

</div>
</body>
js代码，使用jquery的初始化方法：
$(document).ready(function(){
move=window.setInterval(moveUp,"15"); // 每次隔一段时间调用高度自增函数，定义全局变量move<pre name="code" class="javascript">function moveUp(){
var d=document.getElementById("jsTest02");  // 得到div
var h=0;  // 当前的div的高度
if((h=parseInt(d.style.height))<200){ // 如果当前的高度小于100px

d.style.height=(h+4)+'px';  // 每次让高度增长两个单位
}
else
window.clearInterval(move);
}

function moveDown(){
var d=document.getElementById("jsTest02");  // 得到div
var h=0;  // 当前的div的高度
if((h=parseInt(d.style.height))>=0){ // 如果当前的高度大于0px

d.style.height=(h-4)+'px';  // 每次让高度减小
}
else
window.clearInterval(down);
}

function closeM(){
down=window.setInterval(moveDown,"15");  // 使用全局变量down
}
// setTimeout(function(){alert("Hello")},3000);// timeOut的用法 没个一段时间相应某个方法});


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航