卡卡網(wǎng)

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

示例介紹

本文示例分三種動畫介紹實現(xiàn)代碼。

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

效果

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

demodownload

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

demodownload

文字3D動畫向上滾動（不隨鼠標(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)非常簡單，外層盒子是一個div，其id屬性值為list，內(nèi)部是一個ul容器，li是標(biāo)簽內(nèi)容。

jQuery

要首先引用jQuery庫文件。

<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)刪除這個函數(shù)時，文字滾動就沒有了鼠標(biāo)觸發(fā)事件。即是說文字滾動方向是固定的了，不會受到鼠標(biāo)控制方向和改變速度。

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

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

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實現(xiàn)文字以3D動畫形式循環(huán)向上或向下滾動，它可分為幾種動畫模式，你可以通過簡單的更改代碼來實現(xiàn)，喜歡的朋友可以直接下載源碼備用。

相關(guān)文章

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

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