jQuery css3 文字走马灯3D特效



262 1045 349



特效描述:jQuery css3 文字走马灯 3D特效,jQuery css3 文字走马灯3D特效

代码结构

1. 引入CSS

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

2. 引入JS

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>

3. HTML代码

<div id="marquee">
	<div><span>51前端让开发更简单</span></div>
	<div aria-hidden="true"><span>51前端让开发更简单</span></div>
</div>
<form onsubmit="setText(event)">
	<label for="textsource">使用你自己的文本</label>
	<input type="text" id="textsource" value="51前端让开发更简单" autocapitalize="characters" pattern=".{5,60}" title="5-30个字符长度">
	<input type="submit" class="btn" value="使用">
</form>
<script type="text/javascript">
		function setText(event){
		  event.preventDefault();
		  leftText.innerText = textsource.value.toUpperCase();
		  rightText.innerText = textsource.value.toUpperCase();
		}
		var leftText = document.querySelector("#marquee div:first-of-type span");
		var rightText = document.querySelector("#marquee div:last-of-type span");
		var textsource = document.getElementById("textsource");
		setText();
</script>



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


热门标签: 滚动导航菜单 html5动画导航菜单 滚动切换 html5图片动画 图片滚动 html5文字动画 文字滚动 html5表情动画 图片文字滚动 html5线条动画 全屏滚动 html5飘落动画 页面滚动 html5光标动画 html5悬停动画 滚动流动 加载动画 自动滚动图片轮播 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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