卡卡网

我们有时候看到有的主页的标签云比较炫酷，他们把标签云做成了3D动画的效果。其实这可以用jQuery来实现，并且不需要太多的编程代码。本文介绍jQuery实现文字以3D动画形式循环向上或向下滚动。

示例介绍

本文示例分三种动画介绍实现代码。

• 文字3D动画随鼠标向上或向下滚动（还会变速）
• 文字3D动画向上滚动（不随鼠标改变方向和速度）
• 文字3D动画向下滚动（不随鼠标改变方向和速度）

效果

 
文字3D动画随鼠标向上或向下滚动（还会变速）

demodownload

文字3D动画向下滚动（不随鼠标改变方向和速度）

demodownload

文字3D动画向上滚动（不随鼠标改变方向和速度）

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代码结构非常简单，外层盒子是一个div，其id属性值为list，内部是一个ul容器，li是标签内容。

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() 函数是鼠标移上去后触发的事件。当删除这个函数时，文字滚动就没有了鼠标触发事件。即是说文字滚动方向是固定的了，不会受到鼠标控制方向和改变速度。

render() 函数是文字滚动实现代码。

offset += stepping; 这行代码控制文字滚动方向。这个是向下滚动。当改行代码改为offset -= stepping;时，文字向上滚动。

CSS

CSS代码相当的少。主要是定义div盒子样式，和标签云的样式。

*{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;}

总结

本文介绍了jQuery实现文字以3D动画形式循环向上或向下滚动，它可分为几种动画模式，你可以通过简单的更改代码来实现，喜欢的朋友可以直接下载源码备用。

相关文章

• jQuery实现几段文字循环间歇地向下或向上滚动
• jQuery $('document').on() 比 $('body').on() 速度快
• JS中文简繁体转换【演示-源码下载】
• jQuery find("#id")与find(".class")实例分析与比较
• JQuery计算HTML元素子元素(child elements)
• 鼠标点击输入框时高亮显示边框颜色【jquery和css实现】
• JQuery使用append()函数动态创建和应用CSS样式
• JQuery获取/添加/删除HTML控件的CSS类名(class name)
• $.ajax() data{} 传参三种常见写法及ajax()方法参数详解
• 表单序列化插件serializeJSON.js下载及使用示例

标签: JQuery  文字滚动