原生JS实现不断变化的标签


Posted in Javascript onMay 22, 2017

上图为博客右侧截取的GIF图,下图为代码效果

 原生JS实现不断变化的标签

原生JS实现不断变化的标签

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: 0; padding: 0; 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: 0; right: 0; bottom: 0; left: 0; 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: 0; 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>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
用js实现in_array的方法
Nov 05 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 #Javascript
Vue实现动态显示textarea剩余字数
May 22 #Javascript
bootstrap栅格系统示例代码分享
May 22 #Javascript
vue+axios实现登录拦截的实例代码
May 22 #Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 #Javascript
bootstrap模态框远程示例代码分享
May 22 #Javascript
You might like
PHP 读取和编写 XML
2014/11/19 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python中print函数简单使用总结
2019/08/05 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python 表格打印代码实例解析
2019/10/12 Python
pymysql模块使用简介与示例
2020/11/17 Python
方正Java笔试题
2014/07/03 面试题
简历的个人自我评价范文
2014/01/03 职场文书
护理个人求职信范文
2014/01/08 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
七年级生物教学反思
2016/02/20 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
create-react-app开发常用配置教程
2022/06/25 Javascript