原生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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
通过循环优化 JavaScript 程序
Jun 24 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框架codeigniter中如何使用框架的session
2013/06/24 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
Redis构建分布式锁
2017/03/28 PHP
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
python创建线程示例
2014/05/06 Python
python开发之文件操作用法实例
2015/11/13 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
简单谈谈python基本数据类型
2018/09/26 Python
python实现简单多人聊天室
2018/12/11 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
C#中的验证控件有几种
2014/03/08 面试题
语文教学随笔感言
2014/02/18 职场文书
商铺消防安全责任书
2014/07/29 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python