jQuery css3 文字走馬燈3D特效



209 834 279



特效描述: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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 加載動畫 自動滾動圖片輪播 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 文字滾動 文字無縫滾動 文字間歇滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子