javascript 文字滚动效果

最新推荐文章于 2023-05-22 18:20:45 发布

SuperMan-zhang

最新推荐文章于 2023-05-22 18:20:45 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： java 文字滚动文件居中 div居中

本文链接：https://blog.csdn.net/fly_zxy/article/details/21295373

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!-- 最近项目页面要实现一个文字滚动显示的特效，综合了网上的一些例子。顺便实现了一下 CSS使文字横向和垂直居中。div横向居中 -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    
    <title>My JSP 'test.jsp' starting page</title>
   	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style>
	ul {
		width: 25%;
		height: 64px;
		margin: 0;
		padding: 0;
		overflow-y: scroll;
		overflow-x: hidden;
		list-style: none;
		border: 2px solid #f1f;
	}
	li {
		width: 98%;
		margin: 2px;;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border: 1px solid red;
	}
</style>

  </head>
  
  <body>
    <ul id="ul_id">
    	<li>第一行</li>
    	<li>第二行</li>
    	<li>第三行</li>
    	<li>第四行</li>
    </ul>
    <br/>
    
    <!-- 在完成滚动文字特效后,在这里普及一个小知识：
    	 text-align: center;只的是盒子内文字居中。比如：下面div中的文字横向居中。
    	 让文字垂直居中方法一：height: 30px;:line-height: 30px;方法二：vertical-align: middle;
    	 margin: auto;或margin: 0 auto;只得是盒子左右居中，不是指盒子内的文字。
     -->
    <div style="border: 1px solid red;width: 50%;margin:0  auto;text-align: center;">
[DatabaseTemplate] 获取 data_source.properties配置文件连接池中 连接Connection#org.apache.commons.dbcp.PoolableConnection@64e5b2
[DatabaseTemplate] 关闭PreparedStatement
[DatabaseTemplate] 关闭
		Connection
[DatabaseTemplate] 关闭ResultSet
[DatabaseTemplate] 关闭
		PreparedStatement
[DatabaseTemplate] 关闭Connection
[DatabaseTemplate] 获取 data_source.properties配置文件连接池中 连接Connection#org.apache.commons.dbcp.PoolableConnection@c80e21
[DatabaseTemplate] 关闭ResultSet
[DatabaseTemplate] 关闭PreparedStatement
    </div>
    
  </body>
  	<script type="text/javascript">
	/*
* spend 滚动速度
* delay 滚到到 h 时,停顿的时间
*   h 	滚动高度
* topOrBottom 滚动的方向 ,1 向上 -1 向下
*/
function wzgd(id, speed, delay, h, topOrBottom) {
	var box = document.getElementById(id);
	//没有传递实参的时候初始化参数
	var speed=speed||10,delay=delay||1500,h=h||30,topOrBottom=topOrBottom<0?-1:1;can = true;

	box.οnmοuseοver=function (){can = false;};
	box.onmouseout = function () {can = true;};
	
	box.innerHTML += box.innerHTML;//复制一份相同的内容，在视觉上造成持续滚动
	
	var max = parseInt(box.scrollHeight / 2);//取整
	
	new function () {
		//下几行代码的易理解版
		/*if(topOrBottom > 0){
			if (box.scrollTop + boxHeight  >= box.scrollHeight ) {
				box.scrollTop = 0;
			} else if(can) {
				box.scrollTop += 1;
			}
		}
		if(topOrBottom < 0){
			if(box.scrollTop == 0){
				box.scrollTop = box.scrollHeight - boxHeight;
			}else{
				box.scrollTop -= 1;
			}
		}*/
		
		if(can){
			var set = topOrBottom==-1?[0,max]:[max,0];
			box.scrollTop == set[0]?box.scrollTop = set[1]:box.scrollTop+=topOrBottom;
		}
		setTimeout(arguments.callee, box.scrollTop%h!=0?speed:delay);
	};
}
wzgd("ul_id",10,1500,34,-1);
	</script>
</html>