43 169 57

特效描述:jQuery實現 動態文字 輸出效果,jQuery實現動態文字輸出效果


1. 引入CSS

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

2. 引入JS

<script src="js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.quoterotator.min.js" type="text/javascript"></script>

3. HTML代碼

<div id="wrapper">
	<div id="words">
		<ul class="word-container">
			<li data-author="---  Morrie Schwartz" data-easeout="lightSpeedOut">
			The most important thing in life is to learn how to give out love, 
			and to let it come in. </li>
			<li data-author="">所 有 的 瞬 間 都 會 淹 沒 于 時 間 的 洪 流,就 像 淚 水 消 逝 在 雨 中。 
			All those moments will be lost in time, like tears in rain.</li>
			<li data-author="" data-easeout="fadeOutDown">The animation can be 
			in random or pre-defined in the HTML. Next quote animation will be 
			all in fadeInDown. Optional click to next quote and hover to pause 
			the slideshow.</li>
			<li data-author="Mark Twain (1835 - 1910)" data-easein="fadeInDown">
			Always do right. This will gratify some people and astonish the 
			rest. </li>
			<li data-author="---  Susan Rice, Stanford University Commencement, 2010" data-easeout="bounceOut">
			Progress is the product of human agency. Things get better because 
			we make them better. Things go wrong when we get too comfortable, 
			when we fail to take risks or seize opportunities. </li>
			<li data-author="---  Arlo Guthrie (1947 - )" data-easein="bounceIn">
			You can&#39;t have a light without a dark to stick it in. </li>
			<li data-author="---  Mahatma Gandhi (1869 - 1948)" data-easein="lightSpeedIn">
			You must not lose faith in humanity. Humanity is an ocean; if a few 
			drops of the ocean are dirty, the ocean does not become dirty. </li>
			<li data-author="---  Abraham Lincoln (1809 - 1865), (attributed)">
			When I do good, I feel good; when I do bad, I feel bad, and that is 
			my religion. </li>
			<li data-author="---  John Wanamaker (1838 - 1922), (attributed)">
			Half the money I spend on advertising is wasted; the trouble is I 
			don&#39;t know which half. </li>
		<div class="quote">
			  <p class="quote-content"></p>
			<cite class="quote-author"></cite>
<div style="text-align:center;clear:both">

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

熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫