原生js文字标签云上下滚动播放
效果: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文字标签云上下滚动播放的更多相关文章
- 原生JS实现banner图的滚动与跳转
HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...
- 利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...
- JS文字特效:彩色滚动变幻效果,只适合少量的文字。(过多对页面有影响)
JS代码如下: 代码具体是在哪里的我不知道但是我的有道云上有.如有哪位朋友知道,还望联系下,添加出处. <div id="chakhsu"></div> & ...
- 原生JS实现返回顶部和滚动锚点
;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...
- 【转载】 原生js判断某个元素是否滚动到底部
document.querySelector('.content').addEventListener('scroll',function () { //读取内容区域的真实高度(滚动条高) // co ...
- 原生js设置audio在谷歌浏览器自动播放
https://www.cnblogs.com/sandraryan/ 谷歌浏览器更新后禁止了autoplay功能,但是有时候可能会需要自动播放. 研究了一段代码. <!DOCTYPE html ...
- 原生js判断手机端页面滚动停止
var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...
- 标签页(tab)切换的原生js,jquery和bootstrap实现
概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
随机推荐
- ABP理论学习之Web API控制器(新增)
返回总目录 本篇目录 介绍 AbpApiController基类 本地化 审计日志 授权 工作单元 其他 介绍 ABP通过Abp.Web.ApiNuget包集成了 ASP.NET Web API控制器 ...
- UI控件(UITextView)
@implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //UITextView与UITextField主要 ...
- log4j.xml的实用例子
大多数讲log4j配置的教程用的都是log4j.properties文件,我觉得xml或许更好一点,在这里我提供一个我已经用于生产环境的log4j.xml的例子,先上代码,然后再解释: <?xm ...
- .Net组件程序设计之上下文
.Net组件程序设计之上下文 在后续篇幅的远程调用的文章里有说到应用程序域,那是大粒度的控制程序集的逻辑存在,那么想对对象的控制又由谁来做主呢?没错了,就是上下文.CLR把应用程序域更细化了,在应用程 ...
- Mint linux 自定义上下文菜单实现ZIP压缩文件无乱码解压
1. 前提条件 我的Mint Linux 是Thunar文件管理器(默认的). 2. 配置自定义动作 打开Thunar文件管理器,点击菜单“编辑”=>“配置自定义动作”.点击“+”添加一个新的. ...
- Ubuntu 16 安装ElasticSearch
首先安装Java,参见博客:http://www.cnblogs.com/1zhk/p/6056406.html 下载ElasticSearch安装包 curl -L -O https://artif ...
- WPF入门教程系列十七——WPF中的数据绑定(三)
四. XML数据绑定 这次我们来学习新的绑定知识,XML数据绑定.XmlDataProvider 用来绑定 XML 数据,该XML数据可以是嵌入.Xmal文件的 XmlDataProvider 标记中 ...
- Referenced file contains errors (http://www.springframework.org/schema/context). For more information, right click on the message in the Problems
spring 配置文件的DTD或schema出问题,一般两种情况: 1.当前网络环境不稳定,按住ctrl+"http://www.springframework.org/schema/con ...
- 【WP8.1开发】RenderTargetBitmap类的特殊用途
相信,耍过WPF的人都知道RenderTargetBitmap这个玩意儿,这家伙比较有意思,它可以将用户界面上呈现的东西写入到内存的位图对象,从而开发者可以在应用程序中使用它,或者将其保存为图像文件. ...
- jQuery 2.0.3 源码分析 Deferred概念
JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作.这也是造成异步编程困难的主要原因:我们一直习惯于“线性”地编写代码 ...