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

感觉在公司呆久了,业务逻辑写的多,js的操作都快全忘了,今天帮别人写了一个纯的javaScript效果,类似于腾讯新闻的弹出效果。

html代码:

 <body style="width:800px; height:800px">
    This is my JSP page. <br>
    <!--  <div id="jsTest01" οnmοuseοver="MouseIn()" οnmοuseοut="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 οnclick="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的用法 没个一段时间相应某个方法});


发布了47 篇原创文章 · 获赞 4 · 访问量 5万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章