jQuery 文本无缝循环滚动特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

15 58 20



特效描述:文本无缝循环滚动。txtscroll.js是一个基于jQuery文本无缝循环滚动插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/txtscroll.js"></script>

3. HTML代码

	<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>
				</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>
				</li>
				<li>
					<h3>使用</h3>
					<div class="txt">
<pre>
&lt;div class="txt-scroll"&gt;
    &lt;div class="scrollbox"&gt;
        &lt;div class="txt"&gt;
           深圳市移联天下电子商务有限公司成立于2014年
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script src="js/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
&lt;script src="js/txtscroll.js"&gt;&lt;/script&gt;
&lt;script&gt;
  $('.txt-scroll').txtscroll({
	'speed': 50
  });
&lt;/script&gt;
</pre>
					</div>
				</li>
			</ul>
		</div>
		<div class="demolist">
			<ul class="ul">
				<li>
					<h4>示例1 - 无滚动效果</h4>
					<div class="demo-cont">
						<div class="txt-scroll txt-scroll-default">
						    <div class="scrollbox">
						        <div class="txt">
						           深圳市移联天下电子商务有限公司
						        </div>
						    </div>
						</div>
					</div>
					<div class="jsset">
<pre>
$('.txt-scroll').txtscroll({ 'speed': 50 });
//说明:文本长度不够无滚动效果
</pre>
					</div>
				</li>
				<li>
					<h4>示例2 - 默认参数配置</h4>
					<div class="demo-cont">
						<div class="txt-scroll txt-scroll-default">
						    <div class="scrollbox">
						        <div class="txt">
						           深圳市移联天下电子商务有限公司成立于2014年, 是集移动互联网新消费模式、品质消费体验、社交分享于一体的会员权益服务平台。基于移动互联网消费升级新需求,连接线上线下消费新场景,通过大数据、人工智能及云计算等技术手段,致力于为用户连接优质服务、快乐分享、成就美好生活。
						        </div>
						    </div>
						</div>
					</div>
					<div class="jsset">
<pre>
$('.txt-scroll').txtscroll({ 'speed': 50 });
</pre>
					</div>
				</li>
				<li>
					<h4>示例2 - 自定义参数配置</h4>
					<div class="demo-cont">
						<div class="txt-scroll txt-scroll-curs">
						    <div class="scrollbox">
						        <div class="txt">
						           深圳市移联天下电子商务有限公司成立于2014年, 是集移动互联网新消费模式、品质消费体验、社交分享于一体的会员权益服务平台。基于移动互联网消费升级新需求,连接线上线下消费新场景,通过大数据、人工智能及云计算等技术手段,致力于为用户连接优质服务、快乐分享、成就美好生活。
						        </div>
						    </div>
						</div>
					</div>
					<div class="jsset">
<pre>
$('.txt-scroll').txtscroll({ 'speed': 20 });
</pre>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<script>
	  //默认案例
	  window.onload = function () {
	  	$('.txt-scroll-default').txtscroll({
	  			'speed': 50
	  		  });
	  };
	  //自定义参数案例
	  $('.txt-scroll-curs').txtscroll({
	  	'speed': 10
	  });
	</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到