原生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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
js中for in的用法示例解析
Dec 25 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 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 XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
CURL状态码列表(详细)
2013/06/27 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
laravel model 两表联查示例
2019/10/24 PHP
phpwind放自动注册方法
2006/12/02 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Python unittest单元测试框架总结
2018/09/08 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
Python无损压缩图片的示例代码
2020/08/06 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
土木工程应届生求职信
2013/10/31 职场文书
行政文员岗位职责
2013/11/08 职场文书
酒店办公室文员岗位职责
2013/12/18 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
后备干部考察材料
2014/02/12 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
车间安全生产标语
2014/06/06 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
公共场所卫生管理制度
2015/08/05 职场文书