txtscroll实现文字滚动效果代码-html代码-BFW代码库

代码语言：html

代码描述：txtscroll实现文字滚动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title></title>
<style>
    @charset "utf-8";
/*全局初始化样式*/
*{ outline: none;}
*,
*:before,
*:after{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html,body{ overflow-x: hidden; }
html{
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body{ padding: 0; margin: 0 auto; font-size: 14px; line-height: 1.5; font-family: arial, Microsoft YaHei, '微软雅黑', '宋体'; color: #333; width: 100%; zoom: 1; 

/*禁用Webkit内核浏览器的文字大小调整功能*/
-webkit-text-size-adjust: none;

/*取出点击出现半透明的灰色背景*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight: rgba(0, 0, 0, 0);
        
/*设置字体的抗锯齿或者说光滑度*/
-webkit-font-smoothing: antialiased;
}
.ul,
.ul li{ margin: 0; padding: 0; }
pre{ background-color: #666; padding: 1%; color: #fff; }

.demo{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 2% 5%;}
.demo .tibox{ font-size: 40px; margin: 0; padding-bottom: 30px; }
.demo .tibox sub{ color: #999; font-size: 12px; }
.demo .instro li{ padding-top: 3%; }
.demo .instro li:first-child{ padding-top: 0; }
.demo .instro li h3{ font-size: 20px; margin:  0; padding: 0 0 .5% 0; }
.demo table{ border-collapse: collapse; }
.demo td,
.demo th{ border: 1px solid #666; padding: 1%; line-height: 20px; }
.demo .td1,
.demo .td2{ width: 15%; text-align: center; }
.demo .td3{ width: 70%; }


.demolist{ padding-top: 3%; }
.demolist li{ padding-top: 3%; }
.demolist li:first-child{ padding-top: 0; }

.txt-scroll{background-color:black; background-image: url(//repo.bfw.wiki/bfwrepo/image/609364c69fd85.png); background-repeat: no-repeat; background-size: 20px 20px;  background-position: 6px center;
   font-weight: bold; color:#3477f5;}


/*txt-scroll*/
.txt-scroll{ width: 100%; height: 30px; line-height: 30px; padding: 0 5px 0 30px; }
.txt-scroll .scrollbox{ width: 100%; white-space: nowrap; overflow:hidden; transition: all .2s; }
.txt-scroll .txt,
.txt-scroll .txt-clone{ display: inline; position: relative; }
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/txtscroll.js"></script>
</head>

<body>
	<div class="demo">
		<h1 class="tibox">txtscroll.js <sub>v1.0</sub></h1>

		<div class="instro">
			<ul class="ul">
				<li>
					<h3>简介</h3>
					<div class="txt">
						txtscroll.js是一个基于jQuery的文本无缝循环滚动插件，使用插件之前需要引入jQuery。
					</div>
						<div class="txt-scroll txt-scroll-default">
						    <div class="scrollbox">
						        <div class="txt">
						           ×××××××××电子商务有限公司成立于2014年， 是集移动互联网新消费模式、品质消费体验、社交分享于一体的会员权益服务平台。基于移动互联网消费升级新需求，连接线上线下消费新场景，通过大数据、人工智能及云计算等技术手段，致力于为用户连接优质服务、快乐分享、成就美好生活。
						        </div>
						    </div>
						</div>
				</li>
				<li>
					<h3>特性</h3>
					<div class="txt">
						支持jQuery3.3+ <br />
						支持移动端 <br />
						支持响应式 <br />
						支持鼠标悬浮停止
					</div>
				</li>
				<li>
					<h3>参数</h3>
					<div class="txt">
						<table width="100%" cellpadding="0" cellspacing="0">
							<tr>
								<th class="td1">参数</th>
								<th class="td2">默认值</th>
								<th class="td3">说明</th>
							</tr>
							<tr>
								<td class="td1">speed</td>
								<td class="td2">50</td>
								<td class="td3">
									滚动间隔时间，每次滚动距离为1px
								</td>
							</tr>
						</table>
					</div>
				&l.........完整代码请登录后点击上方下载按钮下载查看