原生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 相关文章推荐
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 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 不错的学习资料
2009/02/06 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
深入了解Python在HDA中的应用
2019/09/05 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
输入N,打印N*N矩阵
2012/02/20 面试题
《泉水》教学反思
2014/04/11 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
使用 Apache 反向代理的设置技巧
2022/01/18 Servers