原生js螺旋运动
window.onload=function(){
var oSpiral=document.getElementById('spiral');
var oUl=oSpiral.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var size=6;
var len=size*size;
var eachSize=50;
var col=0;
var row=0;
var min=0;
var max=size-1;
var arr=[];
var bgArr=[];
oUl.style.width=size*(eachSize+1)+'px';
oUl.style.height=size*(eachSize+1)+'px';
for(var i=0;i<len;i++){
var oLi=document.createElement('li');
oLi.style.width=eachSize+'px';
oLi.style.height=eachSize+'px';
oUl.appendChild(oLi);
}
for(var j=0;j<len;j++){
//aLi[ row * size + col ].innerHTML = j;
arr.push(aLi[row*size+col]);
if(row === min && col < max){
col++;
}else if(col === max && row < max){
row++;
}else if(row ===max && col > min){
col--;
}else if(col === min && row > min){
row--;
}if(row-1===min && col===min){
min++;
max--;
}
}
for(var i=0;i<len;i++){
if(i%4===0){
var n=Math.floor(Math.random()*10);
var bgImg='url(../images/'+n+'.jpg)';
arr[i].style.backgroundImage=bgImg;
bgArr.push([i,bgImg]);
}
}
move();
setInterval(move,1000);
function move(){
for(var i=0;i<aLi.length;i++){
aLi[i].style.backgroundImage='';
aLi[i].className='';
}
for(var i=0;i<bgArr.length;i++){
bgArr[i][0]++;
if(arr[bgArr[i][0]]){
arr[bgArr[i][0]].style.backgroundImage=bgArr[i][1];
arr[bgArr[i][0]].className='active';
arr[bgArr[i][0]].style.animationDelay = -Math.random()*1 + 's';
arr[bgArr[i][0]].style.webkitAnimationDelay = -Math.random()*1 + 's';
}else{
bgArr.pop();
var n=Math.floor(Math.random()*10);
var bgImg='url(../images/'+n+'.jpg)';
bgArr.unshift([0,bgImg]);
}
}
}
}
原生js螺旋运动的更多相关文章
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
- 原生js封装ajax:传json,str,excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
随机推荐
- 漫话Unity(二)
三.Unity编辑器介绍 Unity是一个商业级的3d游戏引擎.一个引擎的专业程度事实上并非体如今它多么牛b 的次世代效果,说实话那些效果即便你会用也不敢用.由于没有哪个手机是次世代的. 游戏引擎的专 ...
- IIS6/7/8 WEBserver不能訪问grf报表模板文件的问题
通过 IE不能訪问到 .grf 报表文件,这是由于 IIS6/7/8对訪问的扩展名做了限制,除了已经定义的扩展名之外.其它的扩展名都不能訪问.这跟 IIS5 不一样,IIS5 对全部的扩展名都不做限制 ...
- <meta-data>的使用
在AndroidManifest.xml中,<meta-data>元素可以作为子元素,被包含在<activity>.<application> .<servi ...
- BZOJ 1009 GT考试 (AC自动机 + 矩阵乘法加速dp)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1009 题意: 准考证号为\(n\)位数\(X_1X_2....X_n(0<=X_ ...
- golang中new和make区别
golang 中有两个内存分配机制 :new和make,二者有明显区别. new:用来初始化一个对象,并且返回该对象的首地址.其自身是一个指针.可用于初始化任何类型 make:返回一个初始化的实例,返 ...
- SpringCloud核心教程 | 第一篇: 使用Intellij中的Spring Initializr来快速构建Spring Cloud工程
spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运行环 ...
- 邮件协议与port
电子邮箱的协议有SMTP.POP2.POP3.IMAP4等.都隶属于TCP/IP协议簇,默认状态下.分别通过TCPport25.110和143建立连接.针对不同的用途和功能,我们在邮件se ...
- Android 技巧 - Debug 判断不再用 BuildConfig
Android 开发中一般会通过 BuildConfig.DEBUG 判断是否是 Debug 模式,从而做一些在 Debug 模式才开启的特殊操作,比如打印日志.这样好处是不用在发布前去主动修改,因为 ...
- FAILOVER详细步骤
FAILOVER详细步骤 1.Flush主库任何未传输的redo到目标备库 如果primary可以mount,则可以flush任何主库的未传输redo到备库,如果操作成功返回,则可以保证failove ...
- python投票统计程序,统计序列中各个数值的份数,字典的应用。
这里可能会用到字典的知识, 字典主要是用来存储最后的统计结果. 字典的用法:http://www.runoob.com/python/python-dictionary.html https://ww ...