原生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 相关文章推荐
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
关于使用js算总价的问题
Jun 23 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
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数据库类
2009/05/27 PHP
php 缩略图实现函数代码
2011/06/23 PHP
php之Memcache学习笔记
2013/06/17 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
使用PYTHON创建XML文档
2012/03/01 Python
python返回昨天日期的方法
2015/05/13 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
python的命名规则知识点总结
2019/10/04 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
数据保密承诺书
2014/06/03 职场文书
检讨书格式
2015/01/23 职场文书
财务工作失误检讨书
2015/02/19 职场文书
英文慰问信范文
2015/03/24 职场文书
结婚司仪主持词
2015/06/29 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
javascript Number 与 Math对象的介绍
2021/11/17 Javascript