卡卡網(wǎng)

經(jīng)常在一些主頁看到他們的標(biāo)簽云做成了3D的動(dòng)畫展示效果，這個(gè)看起來比平面標(biāo)簽云那些好看，于是我看了下實(shí)現(xiàn)方法，原來是用JavaScript來實(shí)現(xiàn)的，本文將給大家介紹它的實(shí)現(xiàn)方法。

我在前面也介紹過有關(guān)文字標(biāo)簽云的文章，3D效果挺酷，你也可以看看。

• jQuery實(shí)現(xiàn)文字以3D動(dòng)畫形式循環(huán)向上或向下滾動(dòng)

。。。

本文示例效果圖

demodownload

示例介紹

本示例用JavaScript來實(shí)現(xiàn)。

• 網(wǎng)頁加載時(shí)標(biāo)簽云以3D動(dòng)畫效果顯示，過一會(huì)停止運(yùn)動(dòng)
• 當(dāng)鼠標(biāo)移到標(biāo)簽云上時(shí)，可以改變動(dòng)畫方向和速度

HTML代碼

HTML代碼結(jié)構(gòu)如下，只有一個(gè)div，其id屬性值為rotate，div里面是標(biāo)簽名稱。

<div id="rotate">
  <a href="#" target="_blank">起名取名</a>
  <a href="#" target="_blank">宣傳策劃</a>
  <a href="#" target="_blank">網(wǎng)游試玩</a>
  <a href="#" target="_blank">短信表白</a>
  <a href="#" target="_blank">卡片設(shè)計(jì)</a>
  <a href="#" target="_blank">網(wǎng)頁設(shè)計(jì)</a>
  <a href="#" target="_blank">SEO優(yōu)化</a>
  <a href="#" target="_blank">外語翻譯</a>
  <a href="#" target="_blank">產(chǎn)品推廣</a>
  <a href="#" target="_blank">網(wǎng)絡(luò)營銷</a>
  <a href="#" target="_blank">動(dòng)漫設(shè)計(jì)</a>
  <a href="#" target="_blank">招聘求職</a>
  <a href="#" target="_blank">家居裝修</a>
</div>

JavaScript

為方便管理，本示例使用的JavaScript代碼獨(dú)立使用了一個(gè)文件：rotate.js，所以，在HTML代碼里包含該js文件即可。

<script type="text/javascript" src="rotate.js"></script>

CSS

本示例的CSS代碼比較少，主要是定義了#rotate的樣式：位置、文字等。

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#09c;}
/* rotate */
#rotate{height:400px;width:450px;position:relative;margin:10px auto;}
#rotate a{position:absolute;top:0px;left:0px;color:#fff;font-weight:bold;padding:3px 6px;font-size:14px;}
#rotate a:hover{border:1px solid #eee;background:#000;border-radius:5px;}

總結(jié)

本文介紹了JavaScript實(shí)現(xiàn)的文字標(biāo)簽云3D效果，如果你也喜歡該效果，可以收藏本頁，或者直接下載源碼使用。

相關(guān)文章

• jQuery實(shí)現(xiàn)幾段文字循環(huán)間歇地向下或向上滾動(dòng)
• jQuery $('document').on() 比 $('body').on() 速度快
• JS中文簡繁體轉(zhuǎn)換【演示-源碼下載】
• jQuery find("#id")與find(".class")實(shí)例分析與比較
• JQuery計(jì)算HTML元素子元素(child elements)
• 鼠標(biāo)點(diǎn)擊輸入框時(shí)高亮顯示邊框顏色【jquery和css實(shí)現(xiàn)】
• JQuery使用append()函數(shù)動(dòng)態(tài)創(chuàng)建和應(yīng)用CSS樣式
• JQuery獲取/添加/刪除HTML控件的CSS類名(class name)
• $.ajax() data{} 傳參三種常見寫法及ajax()方法參數(shù)詳解
• 表單序列化插件serializeJSON.js下載及使用示例

標(biāo)簽: JQuery  文字滾動(dòng)  文字標(biāo)簽云