左图为本博客右侧截取的GIF图，右图为代码效果

HTML：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>SlideFont</title>

</head>

<body>

    <div class="F-SlideFont-Box">

        <dl class="F-SlideFont-Box-Tag">

            <dd class="F-SlideFont-Tag">谷歌</dd>

            <dd class="F-SlideFont-Tag">百度</dd>

            <dd class="F-SlideFont-Tag">阿里</dd>

            <dd class="F-SlideFont-Tag">苹果</dd>

            <dd class="F-SlideFont-Tag">三星</dd>

            <dd class="F-SlideFont-Tag">耳机</dd>

            <dd class="F-SlideFont-Tag">音箱</dd>

            <dd class="F-SlideFont-Tag">电视</dd>

            <dd class="F-SlideFont-Tag">谷歌</dd>

            <dd class="F-SlideFont-Tag">百度</dd>

            <dd class="F-SlideFont-Tag">阿里</dd>

        </dl>

    </div>

</body>

</html>

css:

    <style>

        .F-SlideFont-Box * { margin:; padding:; border: none; list-style: none; }

        .F-SlideFont-Box { width: 300px; height: 300px; border: 1px black solid; position: relative; }

        .F-SlideFont-Box-Tag { width: 90%; height: 90%; position: absolute; top:; right:; bottom:; left:; margin: auto; }

        .F-SlideFont-Tag { position: absolute; display: block; padding: 3px 15px; background-color: #0078F7; border-radius: 10%; color: white; transition:all 1s linear; z-index:; transition: all .6s; cursor: pointer; }

    </style>

JS:

<script src="js/GlunefishLibrary.js"></script>     //  这里引入的是我发过的随随机数

<script>

    var tagObj = document.getElementsByClassName('F-SlideFont-Tag'),

        offset = true;

    for(var i=0;i<tagObj.length;i++){

        (function(i){

            tagObj[i].onmouseover = function(){

            offset = false;

            index = parseInt(this.style.zIndex);

            this.style.zIndex = 9999;

            }

            tagObj[i].onmouseout = function(){

            offset = true;

            this.style.zIndex = index;

            }

        })(i);

    }

    setInterval(PreSeting,5000)

    function PreSeting(){

        if(offset){

            for(var i=0;i<tagObj.length;i++){

                tagObj[i].style.left = F_getSJS(200,20,10)  + 'px';          //F_getSJS() 来自前面引入的 glunefishLibrary.js  ， 具体请移步到我之前的取随机数随笔

                tagObj[i].style.top = F_getSJS(200,20,10) + 'px';

                tagObj[i].style.backgroundColor = 'rgb(' + F_getSJS(256,-1,5) + ',' + F_getSJS(256,-1,10) + ',' +     F_getSJS(256,-1,15) + ')';

                tagObj[i].style.zIndex = F_getSJS(200,0,16);

            }

        }

    }

</script>

此效果主要通过间隔取两数之间的随机数来改变标签的样式。

【CSS3 + 原生JS】移动的标签的更多相关文章

  1. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  2. 使用原生js创建自定义标签

    使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. 【CSS3 + 原生JS】上升的方块动态背景

    GIF图有点大,网速慢的或将稍等片刻或可浏览本人的制作的demo. Demo : 点击查看 HTML: <!DOCTYPE html> <html lang="en&quo ...

  4. 原生JS获取所有标签的数量并统计每个标签的数量

    <script type="text/javascript"> var tags = document.getElementsByTagName('*'); var t ...

  5. 原生js实现table的排序

    原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...

  6. 原生js与css3结合的电风扇

    最近学习了css3,就琢磨做些东西练练手,下面是自己写的一个电风扇,使用了原生js中的定时器和css3的一些属性 <!doctype html> <html lang="e ...

  7. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  8. 瀑布流的三种实现方式（原生js+jquery+css3）

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

  9. 原生js怎么为动态生成的标签添加各种事件

    这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...

随机推荐

  1. Vue2.0史上最全入坑教程（中）—— 脚手架代码详解

    书接上文我们说道,如何利用脚手架(vue-cli)构建一个vue项目,本回书我们一起来学习分析下代码. 回顾下创建后的项目目录:   说明:在*.vue文件,template标签里写html代码,且t ...

  2. 考试总结 模拟28（W）

    心得: 状态极差,都怪放假,上一套的T3没改完,今天考试没有一点状态,开学恐惧症.(不恐惧作业或一调但还是很茫然) T1能A掉实在是意外,杂题T1没做过,可能是人品守恒,(丢了钱今天才发现以后一定锁柜 ...

  3. Oracle存储1.1

    1.生成一个表的简单sql语句 CREATE OR REPLACE PROCEDURE proc_AutoGenerateSQL(  tableName   VARCHAR2 ,--参数 需要操作的表 ...

  4. 关于rss的内容（转载）

    转载自: https://blog.csdn.net/zhao1949/article/details/52806123 (本文对读者有帮助的话请移步支持原作者) 内容记录: 在C++技术网开通了RS ...

  5. ls command not found

    编辑profile文件没有写正确,导致在命令行下 ls等命令不能够识别. 在命令行下打入下面这段就可以了 export PATH=/usr/local/sbin:/usr/local/bin:/sbi ...

  6. linux C 编译时手动链接遇到的问题（未解决）

    写多线程的时候,编译的时候遇到了问题,开始的时候是这样的: 编译器不认识pthread_create和pthread_join这两个函数. 搜了一下原因是没有链接相应的库,下面是我看到一个博友写的: ...

  7. 修正Thinkphp 3.2 分页Page类以支持URL路由

    http://www.thinkphp.cn/topic/22114.html 最终目的实现以http://www.fl900.com/product/lists/1-0-0-1.html这样的URL ...

  8. 如何使我们的薪资15k?

    以下我们来探讨一下如何才能使我们具备高薪15K的能力? 要想使自己的薪资成为15K,我首先想到的是我们的能力?编码能力?语言表达能力? 我觉得为之重要的则是我们的综合能力: 方方面面的能力.综合素质: ...

  9. Effective Modern C++：03转向现代C++

    07:在创建对象时注意区分()和{} 自C++11以来,指定初始化值的的方式包括使用小括号,等号,以及大括号: ); // initializer is in parentheses ; // ini ...

  10. 【To Read】Shortest Palindrome(KMP)

    题意:Given a string S, you are allowed to convert it to a palindrome by adding characters in front of ...