卡卡網(wǎng)

我們有時(shí)候看到有的主頁(yè)的標(biāo)簽云比較炫酷，他們把標(biāo)簽云做成了3D動(dòng)畫(huà)的效果。其實(shí)這可以用jQuery來(lái)實(shí)現(xiàn)，并且不需要太多的編程代碼。本文介紹jQuery實(shí)現(xiàn)文字以3D動(dòng)畫(huà)形式循環(huán)向上或向下滾動(dòng)。

示例介紹

本文示例分三種動(dòng)畫(huà)介紹實(shí)現(xiàn)代碼。

• 文字3D動(dòng)畫(huà)隨鼠標(biāo)向上或向下滾動(dòng)（還會(huì)變速）
• 文字3D動(dòng)畫(huà)向上滾動(dòng)（不隨鼠標(biāo)改變方向和速度）
• 文字3D動(dòng)畫(huà)向下滾動(dòng)（不隨鼠標(biāo)改變方向和速度）

效果

 
文字3D動(dòng)畫(huà)隨鼠標(biāo)向上或向下滾動(dòng)（還會(huì)變速）

demodownload

文字3D動(dòng)畫(huà)向下滾動(dòng)（不隨鼠標(biāo)改變方向和速度）

demodownload

文字3D動(dòng)畫(huà)向上滾動(dòng)（不隨鼠標(biāo)改變方向和速度）

demodownload

HTML代碼

<div id="list">
  <ul>
    <li><a href="#">PhP</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Magento</a></li>
    <li><a href="#">MySql</a></li>
    <li><a href="#">Js</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Ajax</a></li>
    <li><a href="#">ThinkPHP</a></li>
    <li><a href="#">Apache</a></li>
    <li><a href="#">Linux</a></li>
    <li><a href="#">Python</a></li>
    <li><a href="#">web</a></li>
    <li><a href="#">xhtml</a></li>
  </ul>
</div>

HTML代碼結(jié)構(gòu)非常簡(jiǎn)單，外層盒子是一個(gè)div，其id屬性值為list，內(nèi)部是一個(gè)ul容器，li是標(biāo)簽內(nèi)容。

jQuery

要首先引用jQuery庫(kù)文件。

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  var element = $('#list a');
  var offset = 0;
  var stepping = 0.03;
  var list = $('#list');
  var $list = $(list)

  $list.mousemove(function(e)
  {
    var topOfList = $list.eq(0).offset().top
    var listHeight = $list.height()
    stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;
  });

  for (var i = element.length - 1; i >= 0; i--)
  {
    element[i].elemAngle = i * Math.PI * 2 / element.length;
  }

  setInterval(render, 60);


  function render()
  {
    for (var i = element.length - 1; i >= 0; i--)
    {
      var angle = element[i].elemAngle + offset;
      x = 120 + Math.sin(angle) * 30;
      y = 45 + Math.cos(angle) * 40;
      size = Math.round(40 - Math.sin(angle) * 40);
      var elementCenter = $(element[i]).width() / 2;
      var leftValue = (($list.width() / 2) * x / 100 - elementCenter) + "px"
      $(element[i]).css("fontSize", size + "pt");
      $(element[i]).css("opacity", size / 100);
      $(element[i]).css("zIndex", size);
      $(element[i]).css("left", leftValue);
      $(element[i]).css("top", y + "%");
    }
    offset += stepping;
  }
});
</script>

$list.mousemove() 函數(shù)是鼠標(biāo)移上去后觸發(fā)的事件。當(dāng)刪除這個(gè)函數(shù)時(shí)，文字滾動(dòng)就沒(méi)有了鼠標(biāo)觸發(fā)事件。即是說(shuō)文字滾動(dòng)方向是固定的了，不會(huì)受到鼠標(biāo)控制方向和改變速度。

render() 函數(shù)是文字滾動(dòng)實(shí)現(xiàn)代碼。

offset += stepping; 這行代碼控制文字滾動(dòng)方向。這個(gè)是向下滾動(dòng)。當(dāng)改行代碼改為offset -= stepping;時(shí)，文字向上滾動(dòng)。

CSS

CSS代碼相當(dāng)?shù)纳佟Ｖ饕嵌xdiv盒子樣式，和標(biāo)簽云的樣式。

*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial, "MS Trebuchet", sans-serif;background-color:#111;}
#list{margin:0 auto;height:600px;width:600px;overflow:hidden;position:relative;background-color:#000;}
#list a{position:absolute;text-decoration:none;color:#666;}
#list a:hover{color:#ccc;}

總結(jié)

本文介紹了jQuery實(shí)現(xiàn)文字以3D動(dòng)畫(huà)形式循環(huán)向上或向下滾動(dòng)，它可分為幾種動(dòng)畫(huà)模式，你可以通過(guò)簡(jiǎn)單的更改代碼來(lái)實(shí)現(xiàn)，喜歡的朋友可以直接下載源碼備用。

相關(guān)文章

• jQuery實(shí)現(xiàn)幾段文字循環(huán)間歇地向下或向上滾動(dòng)
• jQuery $('document').on() 比 $('body').on() 速度快
• JS中文簡(jiǎn)繁體轉(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類(lèi)名(class name)
• $.ajax() data{} 傳參三種常見(jiàn)寫(xiě)法及ajax()方法參數(shù)詳解
• 表單序列化插件serializeJSON.js下載及使用示例

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