效果：http://hovertree.com/texiao/js/25/

效果图：

代码如下：

<!DOCTYPE html>

<html>

<head><meta name="viewport" content="width=device-width, initial-scale=1" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>HovertreeTags标签云JS特效_何问起</title>

<base target="_blank" />

<style>.hovertreeinfo{text-align:center;margin-top:10px;}

.hovertreeinfo a{color:black;}

</style>

<link href="http://hovertree.com/texiao/js/25/hovertreetags.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="hovertreeinfo"><h1>HovertreeTags标签云JS特效</h1></div>

<div id="hovertreetags">

<a href="http://hovertree.com/menu/java/" class="tagc1">Java</a>

<a href="http://hovertree.com/menu/visualstudio/" class="tagc2">Visual Studio</a>

<a href="http://hovertree.com/menu/javascript/" class="tagc5">JavaScript</a>

<a href="http://hovertree.com/menu/php/" class="tagc2">

PHP

</a>

<a href="http://hovertree.com/menu/jquery/" class="tagc2">jQuery</a>

<a href="http://hovertree.com" class="tagc1">何问起</a>

<a href="http://hwq2.com" class="tagc2">hwq2</a>

<a href="http://hovertree.com/menu/texiao/" class="tagc5">网页特效</a>

<a href="http://hovertree.com/menu/csharp/" class="tagc2">C#</a>

<a href="http://hovertree.com/menu/bootstrap/" class="tagc2">Bootstrap</a>

<a href="http://hovertree.com/menu/java/" class="tagc5">Java</a>

<a href="http://hovertree.net" class="tagc2">hovertree.net</a>

<a href="http://keleyi.com/" class="tagc1">柯乐义</a>

<a href="http://keleyi.com/a/bjac/d863921ed93d03ff.htm" class="tagc2">a标签</a>

<a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm" class="tagc5">何问起键盘</a>

<a href="http://hovertree.com/tiku/bjaf/5v9ps30o.htm" class="tagc2">

数组

</a>

<a href="http://tool.hovertree.com/a/base64/" class="tagc2">Base 64</a>

<a href="http://hovertree.com" class="tagc1">HoverTree</a>

<a href="http://hovertree.com/code/css/4u8q30yw.htm" class="tagc2">CSS开门</a>

<a href="http://hovertree.com/code/" class="tagc5">代码</a>

<a href="http://hovertree.com/menu/css/" class="tagc2">CSS</a>

<a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm" class="tagc2">Bootstrap</a>

<a href="http://hovertree.com/tiku/" class="tagc5">题库</a>

<a href="http://hovertree.com/h/bjaf/kqud99m6.htm" class="tagc2">图标旋转</a>

</div>

<div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/hovertreetags.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>

</div>

<script src='http://hovertree.com/texiao/js/25/hovertreetags.js' type="text/javascript"></script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/hovertreetags.htm

特效库：http://www.cnblogs.com/roucheng/p/texiao.html

原生js文字标签云上下滚动播放的更多相关文章

  1. 原生JS实现banner图的滚动与跳转

    HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...

  2. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

  3. JS文字特效：彩色滚动变幻效果，只适合少量的文字。（过多对页面有影响）

    JS代码如下: 代码具体是在哪里的我不知道但是我的有道云上有.如有哪位朋友知道,还望联系下,添加出处. <div id="chakhsu"></div> & ...

  4. 原生JS实现返回顶部和滚动锚点

    ;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...

  5. 【转载】 原生js判断某个元素是否滚动到底部

    document.querySelector('.content').addEventListener('scroll',function () { //读取内容区域的真实高度(滚动条高) // co ...

  6. 原生js设置audio在谷歌浏览器自动播放

    https://www.cnblogs.com/sandraryan/ 谷歌浏览器更新后禁止了autoplay功能,但是有时候可能会需要自动播放. 研究了一段代码. <!DOCTYPE html ...

  7. 原生js判断手机端页面滚动停止

    var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...

  8. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  9. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

随机推荐

  1. .Net开发笔记（二十一） 反射在.net中的应用

    反射概念在网上到处都有,但是讲到的具体的应用很少,一个重要的原因是现实中真的很少用得到它.引用msdn上对“反射”的解释: "通过 System.Reflection 命名空间中的类以及 S ...

  2. XCode的个人使用经验

    Xcode是强大的IDE(但个人觉得不如Visual Studio做得好),其强大功能无需本人再赘述,本文也不是一篇“快捷键列表”,因为XCode上的快捷键极其多,而且还有不少是需要同时按下四个按键的 ...

  3. Redis系列(六)-SortedSets设计技巧

    阅读目录: 介绍 Score占位 更多位信息 总结 介绍 Redis Sorted Sets是类似Redis Sets数据结构,不允许重复项的String集合.不同的是Sorted Sets中的每个成 ...

  4. Security2:Create User

    User 用于访问DB Users based on logins in master (This is the most common type of user.) User based on a ...

  5. SQL Server 通过备份文件初始化复制

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 搭建过程(Process) 注意事项(Attention) 疑问(Questions) 参考文 ...

  6. 解密jQuery内核 DOM操作的核心函数domManip

    domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...

  7. 推荐21款最佳 HTML5 网页游戏

    尽管 HTML5 的完全实现还有很长的路要走,但 HTML5 正在改变 Web,未来 HTML5 将把 Web 带入一个更加成熟和开放的应用平台.现在,越来越多的人尝试用 HTML5 来制作网页游戏等 ...

  8. .NET平台开源项目速览(8)Expression Evaluator表达式计算组件使用

    在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下Expression Evaluator验证组件.那里只是概述了一下,并没有对其使用和强大功能做 ...

  9. Objective-C中的属性机制

    Objective-C 2.0中的属性机制为我们提供了便捷的获取和设置实例变量的方式,也可以说属性为我们提供了一个默认的设置器和访问器的实现.在学习OC中属性之前我们先要知道为什么要为变量实现gett ...

  10. hdu4833 Best Financing（DP）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4833 这道题目关键的思想是从后往前dp,dp[i]表示在第i处投资xi能获得的最大收益,其中xi表示从 ...