【CSS3 + 原生JS】移动的标签
左图为本博客右侧截取的GIF图,右图为代码效果
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:; padding:; 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:; right:; bottom:; left:; 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:; 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>
此效果主要通过间隔取两数之间的随机数来改变标签的样式。
【CSS3 + 原生JS】移动的标签的更多相关文章
- HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图)
原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...
- 使用原生js创建自定义标签
使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 【CSS3 + 原生JS】上升的方块动态背景
GIF图有点大,网速慢的或将稍等片刻或可浏览本人的制作的demo. Demo : 点击查看 HTML: <!DOCTYPE html> <html lang="en&quo ...
- 原生JS获取所有标签的数量并统计每个标签的数量
<script type="text/javascript"> var tags = document.getElementsByTagName('*'); var t ...
- 原生js实现table的排序
原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...
- 原生js与css3结合的电风扇
最近学习了css3,就琢磨做些东西练练手,下面是自己写的一个电风扇,使用了原生js中的定时器和css3的一些属性 <!doctype html> <html lang="e ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 瀑布流的三种实现方式(原生js+jquery+css3)
前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
随机推荐
- js对象属性方法大总结
数组(Array):系列元素的有序集合: 详细演示请看:[js入门系列演示·数组 ] http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.ht ...
- bzoj 2705 [SDOI2012]Longge的问题——欧拉函数大水题
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2705 撕逼题.不就是枚举gcd==d,求和phi[ n/d ]么. 然后预处理sqrt (n ...
- leetcode 31-40 easy
38.Count and Say The count-and-say sequence is the sequence of integers with the first five terms as ...
- ML面试1000题系列(21-30)
本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 21.请简要说说EM算法. @tornadome ...
- js图片压缩和上传并显示
由于近期项目中需要做个图片压缩上传,所以就在网上找了些资料自己写了一个 html部分 <input id="file" type="file"> & ...
- javascript里的eval总结
JavaScript eval() 函数 1.定义和用法 eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参 ...
- BZOJ 3057圣主的考验题解
老师居然考这么毒瘤的题目!!!!! 很容易想到dp,f[i][j]表示有i个节点,左子树的最深深度为j的方案数 枚举左子树有多少节点然后转移,复杂度为n^3 T飞~ 我们考虑到有深度为h的树的节点有多 ...
- iOS 停止不必要的UI动效设计
http://www.cocoachina.com/design/20151124/14400.html 前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有 ...
- PHPCMS快速建站系列之类别调用及类别显示页面
在需要调用类别的地方,比如列表页,首先写循环前面写上一句: <?php $TYPE = getcache('type_content','commons');?> 这句就是把类别缓存加载进 ...
- 阿里云文件存储CPFS正式商业化,提供云上高性能并行文件系统
2018年3月份,阿里云推出文件存储CPFS产品.在经过近一年的上线公测后,CPFS即将迎来商业化,将为更多的客户提供云上高性能的并行文件存储. 坚如磐石的高性能计算存储 文件存储CPFS针对计算密集 ...