原生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去掉字符串里的所有空格
Feb 08 Javascript
用jscript启动sqlserver
Jun 21 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 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获取网站域名和地址的代码
2008/08/17 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
图文详解vue框架安装步骤
2019/02/12 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python常用算法学习基础教程
2017/04/13 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python多线程同步之文件读写控制
2021/02/25 Python
python类的实例化问题解决
2019/08/31 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
就业意向书范文
2014/04/01 职场文书
员工安全生产责任书
2014/07/22 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
实习报告怎么写
2019/06/20 职场文书
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
python区块链实现简版工作量证明
2022/05/25 Python