效果：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. 高灵活度，高适用性，高性能，轻量级的 ORM 实现

    ORM(Object-Relational Mapping 对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,目的是提供易于理解的模型化数据的方法. ORM虽然有诸多好处,但是在实 ...

  2. ios 避免循环引用

    类似网络请求的情况下会导致循环引用,但是 如果网络请求的对象是局部变量,就必须用self,不能用weakSelf,否则,一旦当前方法所在对象销毁,那weakSelf就为空了(如果目的是这样,那就另当别 ...

  3. chunkupload 文件上传断点续传组件(java) - 正式发布

    chunkupload简介 chunkupload是一款基于java语言的断点续传组件,针对文件上传,非文件下载,集成方便,使用简单. chunkupload实现如下功能: ·  实现断点续传 ·  ...

  4. 升级CentOS内核 - 2.6升级到3.10

    *因为学习docker的需要,docker的官方推荐内核使用3.8以上,所以本人决定把CentOS内核升到长期稳定版的3.10. ##记得切换到root用户执行升级操作. [root@localhos ...

  5. 数据结构与算法JavaScript (一) 栈

    序 数据结构与算法JavaScript这本书算是讲解得比较浅显的,优点就是用javascript语言把常用的数据结构给描述了下,书中很多例子来源于常见的一些面试题目,算是与时俱进,业余看了下就顺便记录 ...

  6. 深入浏览器兼容 细数jQuery Hooks 属性篇

    关于钩子:http://www.cnblogs.com/aaronjs/p/3387906.html 本章的目的很简单,通过钩子函数更细节的了解浏览器差异与处理方案, 版本是2.0.3所以不兼容ie6 ...

  7. jQuery源码分析系列(31) : Ajax deferred实现

    AJAX的底层实现都是浏览器提供的,所以任何基于api上面的框架或者库,都只是说对于功能的灵活与兼容维护性做出最优的扩展 ajax请求的流程: 1.通过 new XMLHttpRequest 或其它的 ...

  8. WPF DatePicker只显示年和月 修改：可以只显示年

    最近的项目,查询时只需要年和月,不需要日,因此需要对原有的DatePicker进行修改,查询了网上的内容,最终从一篇帖子里看到了添加附加属性的方法,地址是http://stackoverflow.co ...

  9. 传智播客--XAML布局--连连看界面（小白内容）

    一个简单的10*10连连看,有100个格子,可以在XAML里面用ColumnDefinition和RowDefinition各写10组,但是这样效率会很慢,因此,可以采用动态生成的方式进行. publ ...

  10. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...