//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. Django简单实例

    一.前戏-MVC框架与MTV框架 1.MVC MVC(Model View Controller),是一种软件工程开发的架构模式,不仅适用于软件开发,而且适用于其他广泛的设计和组织工作,主要思想通过分 ...

  2. Intellij IDEA junit 使用之org.junit不存在

    在IDEA里面已经新建好了一个类,并加入了内容,然后创建测试类,快捷键(Ctrl+Alt+T)或者如图右键 Goto Test 创建后运行报错: Error:(3, 24) java: 程序包org. ...

  3. 深入浅出JAVA线程池使用原理2

    一.Executor框架介绍 Executor框架将Java多线程程序分解成若干个任务,将这些任务分配给若干个线程来处理,并得到任务的结果 1.1.Executor框架组成 任务:被执行任务需要实现的 ...

  4. vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题

    vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题 今天下载了一个开源项目一直运行不了,折腾了半天才找到问题所在,config ...

  5. JZ2440使用笔记之熟悉uboot和Linux的移植

    目录 一.点亮开发板:移植uboot.Linux内核.文件系统 1.1 配置上位机交叉编译环境 1.2 制作U-boot镜像文件 1.3 通过oflash.exe / openJTAG 烧写u-boo ...

  6. ubuntu kylin18 安装NVIDIA驱动

    这几天装系统快被折腾死了,事情的起因是这样的. 这件事情发生之前那两天一直在调试oled屏幕.我自己做转接板,1.3寸30针fpc的接口. 由于没有使用fpc专用转接座子,导致焊接特别困难,索性最后牺 ...

  7. Delphi10.2 Tokyo试用(1)

    最近下载了Delphi10.2 Tokyo,试用了一下,感觉不错,尤其是针对Linux的开发,总算出来了,可以考虑把原来服务器重新编译成RedHat上使用了,免得客户一天到晚喊Windows不安全,要 ...

  8. c# 7.1 Async Main方法

    安装 .net framework sdk 7.1 新建一个 .net framework 7.1 的程序 在程序的工程文件的第一个 PropertyGroup  节点下加入以下子属性   <L ...

  9. 机器学习实战1-2.1 KNN改进约会网站的配对效果 datingTestSet2.txt 下载方法

    今天读<机器学习实战>读到了使用k-临近算法改进约会网站的配对效果,道理我都懂,但是看到代码里面的数据样本集 datingTestSet2.txt 有点懵,这个样本集在哪里,只给了我一个文 ...

  10. K8S中如何跨namespace 访问服务?为什么ping不通ClusterIP?

    1.K8S中如何跨namespace 访问服务? 2.在Pod中为什么ping不通ClusterIP? 简述: Rancher2.0中的一个用户,在K8S环境中,创建两个namespace,对应用进行 ...