zoukankan      html  css  js  c++  java
  • 标签球Js插件

    今天上学校的图书馆,看到了一个好玩的东西,特意百度了下,发现叫做“标签球”,效果图为:

    直接代码如下:

    #div1 {position:relative; width:350px; height:350px; border:1px solid #000; margin: 20px auto 0; }
    #div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000; font-weight:bold; text-decoration:none; padding: 3px 6px; }
    #div1 a:hover {border: 1px solid #eee; background: #FFF; }
    #div1 .blue {color:blue;}
    #div1 .red {color:red;}
    #div1 .green {color:green;}
    <div id="div1">
        <a href="#">标签云</a>
        <a href="#" class="red">PHP</a>
        <a href="#">瀑布流</a>
        <a href="#">Tab</a>
        <a href="#" class="blue">流体布局</a>
        <a href="#">SEO</a>
        <a href="#" class="red">彩蛋</a>
        <a href="#" class="green">JavaScript</a>
        <a href="#">miaov</a>
        <a href="#" class="red">CSS</a>
        <a href="#">asp.net</a>
        <a href="#" class="blue">蓝色经典</a>
        <a href="#">OOP</a>
        <a href="#" class="red">Android</a>
        <a href="#" class="blue">妙味茶馆</a>
        <a href="#">dialog</a>
        <a href="#" class="blue">淘客</a>
        <a href="#">Pin</a>
        <a href="#">微博</a>
        <a href="#" class="green">IPhone</a>
    </div>
     $(document).ready(function() {
        $("#div1").windstagball({
                radius:120,
                speed:10
            });
        });
    1. 首先得写好布局,最外层div样式position设置为relative
    2. 内层元素position为absolute,这样才能形成效果,top为0,left为0
    3. 先导入jquery文件,再导入相应的插件文件
    4. 获取$("#xxx")元素,并调用windstagball()函数,radius是标签球的变径大小,speed顾名思义就是运动的速度。

    Demo:http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html

  • 相关阅读:
    双重标准,我该怎么解决
    今天突然点开一个网页
    反省
    (无)
    (无)
    GetModuleHandleW 分析
    关于逆向360相关的一点感想
    OpenGL的编译和使用
    360 补天平台,也没个什么人啊。。。
    openssl编译方法
  • 原文地址:https://www.cnblogs.com/maczyt/p/4883629.html
Copyright © 2011-2022 走看看