jQuery跑马灯特效代码下载



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

41 160 54



特效描述:跑马灯。jQuery跑马灯特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/liMarquee.css">

2. 引入JS

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

3. HTML代码

<div class="jq22-container">
	<header class="jq22-header">
		<h1>jQuery跑马灯支持任何DOM元素 <span>A jQuery MARQUEE Plugin</span></h1>
		<div class="jq22-demo center">
		  <a href="index.html" class="current">Default</a>
		  <a href="index2.html">垂 直</a>
		  <a href="index3.html">图片和HTML元素</a>
		  <a href="index4.html">从XML中获取数据</a>
		</div>
	</header>
	<div class="jq22-content">
		<h3>Default</h3>
		<div class="str1 str_wrap">
			Javascript是一种通用的脚本编程语言,也是一种基于(Object)和事件驱动并具有安全性能的脚本语言。 
		</div>
		<h3>从左到右显示</h3>
		<div class="str2 str_wrap">
			Javascript代码嵌入在HTML页面中,它把静态页面转变为支持用户交互并响应事件的活页面。
		</div>
		<h3>修改速度</h3>
		<div class="str3 str_wrap">
			Javascript最早称作LiveScript,由Netscape Communications 和 Sun Microsystems联合开发。
		</div>
		<section class="jq22-demo">
			<a class="speedChange" data-scrollamount="30" href="#">慢速 (30px/sec)</a>
			<a class="speedChange" data-scrollamount="90" href="#">中等速度 (90px/sec)</a>
			<a class="speedChange" data-scrollamount="250" href="#">快速 (250px/sec)</a>
		</section>
		<h3>禁止使用鼠标拖动文本</h3>
		<div class="str4 str_wrap">
			上面的跑马灯文本可以使用鼠标来拖动,这里的被禁止了!
		</div>
		<h3>禁用鼠标滑过时暂停文本动画</h3>
		<div class="str5 str_wrap">
		   这里的跑马灯文字在鼠标滑过或悬停时不会暂停。。。
		</div>
		<h3>暂停和播放功能</h3>
		<div class="str6 str_wrap">
			Javascript和HTML关系密切,它们都由浏览器来处理。
		</div>
		<section  class="jq22-demo">
			<button class="btnPause">暂 停</button>
			<button class="btnPlay">播 放</button>
		</section>
	</div>
</div>
<script>
$(window).load(function(){
	$('.str1').liMarquee();
	$('.str2').liMarquee({
		direction: 'right'	
	});
	var stringEl = $('.str3').liMarquee();
	$('.speedChange').on('click',function(){
		var speedChange = $(this);
		var dataSpeed = speedChange.data('scrollamount');
		stringEl.trigger('mouseenter');
		stringEl.data({scrollamount:dataSpeed});
		stringEl.trigger('mouseleave');
		return false;	
	});
	$('.str4').liMarquee({
		drag: false	
	});
	$('.str5').liMarquee({	
		hoverstop: false
	});
	$('.str6').liMarquee();
	$('.btnPause').on('click',function(){
		$('.str6').liMarquee('pause');
	});
	$('.btnPlay').on('click',function(){
		$('.str6').liMarquee('play');
	})
	});
</script> 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 滚动导航菜单 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

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

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