//js代码

//获取li

var list = document.getElementsByTagName("li")[0];

//遍历  排他

for( var i=0;i<list.length;i++ ){

  list[i].style.backgroundImages = "url('images/i'+(i+1)+'.jpg')";

  list[i].onmouseover = function(){

    for( var j=0;j<list.length;j++ ){

      //运动函数的引用

      startMove( list[j],{"width":"100"} );//其他li的宽度

    }

    startMove( this,{"width":"800"} );//当前li的宽度

  }

  list[i].onmouseout = function(){

    for( var j=0;j<list.length;j++ ){

      startMove(list[j],{"width","240"});//每个li的宽度

    }

  }

}

原生js手风琴效果的更多相关文章

  1. 原生js动画效果(源码解析)

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

  2. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  3. 原生js放大镜效果

    效果: 1.  鼠标放上去会有半透明遮罩.右边会有大图片局部图 2.  鼠标移动时右边的大图片也会局部移动 放大镜的关键原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置 ...

  4. Js 手风琴效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. js 动画效果实现

    1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...

  6. 原生js实现多组图片切换

    这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...

  7. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

随机推荐

  1. 微信内置安卓x5浏览器请求超时自动重发问题处理小记

    X5内核  请求超时后会自动阻止请求返回并由代理服务器将原参数重新发送请求到服务层代码.但由于第一次请求已经请求到服务器,会导致出现重复下单.支付等重大问题. 该问题由于腾讯x5浏览器会自动阻止第一次 ...

  2. java之webservice客户端

    1.新建客户端项目. 2.配置服务端的wsdl文件位置 3.添加junit的jar包. 4.编写客户端类.

  3. .Net 多线程 (1) Task

    多线程是一种有效提高程序工作效率的方法.当然为了效率需要使用更多的cpu,内存等资源. 并发是两个队列交替使用一台咖啡机,并行是两个队列同时使用两台咖啡机,如果串行,一个队列使用一台咖啡机,那么哪怕前 ...

  4. 隐藏非选中的checkBox

    //隐藏非选中的checkBox function onlyCheckBox(){ $("#dtlTable tr:gt(0)").each(function(i) { var c ...

  5. 判断(if)语句

    目标 开发中的应用场景 if语句体验 if语句进阶 综合应用 一 开发中的应用场景 转换成代码 判断的定义 如果 条件满足,才能做某件事 如果 条件不满足,就做另外一件事,或者什么也不做 判断语句 又 ...

  6. Filter中request对象强转问题

    以下为过滤器doFIlter方法的源代码: public void doFilter(ServletRequest request, ServletResponse response, FilterC ...

  7. 在线视频下载利器——youtube-dl

    youtube-dl是谷歌出品的在线视频下载利器,可以用来下载youtube视频(前提是你得能上youtube). 使用方法很简单,只需要在cmd下执行youtube-de.exe +视频页面网址,程 ...

  8. 基于InfluxDB+Grafana打造大数据监控利器--转

    这是一个大数据爆发的时代.面对信息的激流.多元化数据的涌现,我们在获取.存储.传输.理解.分析.应用.维护大数据时,无疑需要一种便捷的信息交流通道,以便快速.有效.准确地理解和驾驭这个过程.本文将通过 ...

  9. html5中的几种布局简单比较

    html中的布局主要由静态布局.自适应布局.流式布局以及响应式布局几类,简单比较以下这几种布局的区别和特点. 一 静态布局(Static Layout) 表现:在传统web设计中,不管浏览器尺寸具体大 ...

  10. pandas 对象中 to_pickle 方法参数命名问题,不能用frame

    这句话一直报错,经过反复排查,是命名问题,to_pickle() 参数不能是 frame,换一个名字就可以了 frame.to_pickle('examples\local_frame_pickle' ...