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

最新推荐文章于 2021-12-03 09:32:10 发布

码农小旋风

最新推荐文章于 2021-12-03 09:32:10 发布

阅读量995

点赞数

分类专栏： javaScript使用总结文章标签： javascript 右下角新闻弹出框使用javaScript操作样式 jquery html

本文链接：https://blog.csdn.net/u010785969/article/details/38407009

版权

javaScript使用总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

感觉在公司呆久了，业务逻辑写的多，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的用法没个一段时间相应某个方法});