卡卡网

经常在一些主页看到他们的标签云做成了3D的动画展示效果，这个看起来比平面标签云那些好看，于是我看了下实现方法，原来是用JavaScript来实现的，本文将给大家介绍它的实现方法。

我在前面也介绍过有关文字标签云的文章，3D效果挺酷，你也可以看看。

• jQuery实现文字以3D动画形式循环向上或向下滚动

。。。

本文示例效果图

demodownload

示例介绍

本示例用JavaScript来实现。

• 网页加载时标签云以3D动画效果显示，过一会停止运动
• 当鼠标移到标签云上时，可以改变动画方向和速度

HTML代码

HTML代码结构如下，只有一个div，其id属性值为rotate，div里面是标签名称。

<div id="rotate">
  <a href="#" target="_blank">起名取名</a>
  <a href="#" target="_blank">宣传策划</a>
  <a href="#" target="_blank">网游试玩</a>
  <a href="#" target="_blank">短信表白</a>
  <a href="#" target="_blank">卡片设计</a>
  <a href="#" target="_blank">网页设计</a>
  <a href="#" target="_blank">SEO优化</a>
  <a href="#" target="_blank">外语翻译</a>
  <a href="#" target="_blank">产品推广</a>
  <a href="#" target="_blank">网络营销</a>
  <a href="#" target="_blank">动漫设计</a>
  <a href="#" target="_blank">招聘求职</a>
  <a href="#" target="_blank">家居装修</a>
</div>

JavaScript

为方便管理，本示例使用的JavaScript代码独立使用了一个文件：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;}

总结

本文介绍了JavaScript实现的文字标签云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  文字滚动  文字标签云