原生射流研究…实现不断变化的标签

上图为博客右侧截取的GIF格式格式图，下图为代码效果

HTML:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title slide font/title/head dy div class=' F-slide font-Box ' dl class=' F-slide font-Box-Tag ' DD class=' F-slide font-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/htmlcss:

风格f-幻灯片字体-Box * {边距： ^ 0；padd : 0；border:无；列表样式：无；} .f-幻灯片字体-Box {宽度： 300 px高： 300pxborder: 1px黑色固体；相对位置：} .幻灯片字体框标签宽度： 90%;高度： 90%;绝对位置：top : 0；右： 0；底部： 0；左： 0；margin: auto}。F-SlideFont-Tag {位置：绝对值；显示器：块；padding: 3px 15px背景-颜色： # 0078 F7；边界半径： 10%;颜色：白色；跃迁：全一线性；z-index : 0；过境：所有. 6行李：指针；} /styleJS:

脚本src=' http : js/glonefishlibrary。js '/script//这里引入的是我发过的随随机数脚本var tagObj=文档。getelementsbyclassname(' F-slide font-Tag ')，offset=true for(var I=0；itagobj . lentigi){(函数{ TagObj[I]).onmouseover=function(){ offset=false；index=ParSeint(这。风格。zindex)；这个。风格。zindex=9999} tagObj[i].onmouseout=function(){ offset=true；这个。风格。zindex=索引；} })(一)；}设置间隔(预设，5000)函数presesting(){ if(offset){ for(var I=0；itagobj . lentigi){ tagObj[I]。风格。left=F _ getSJS(200，20，10)' px '；//F_getSJS()来自前面引入的glunefishLibrary.js，具体请移步到我之前的取随机数随笔我。风格。top=F _ getSJS(200，20，10)' px '；我。风格。背景色=' RGB(' F_getSJS(256，-1，5)'，' F_getSJS(256，-1，10)'，' F_getSJS(256，-1，15)')'；我。风格。zindex=F _ getSJS(200，0，16)；} } }/脚本此效果主要通过间隔取两数之间的随机数来改变标签的样式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。