//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. netframework webapi exceptionless

    1.webapi项目 添加nuget    exceptionless webapi 2.在exceptionless server端添加项目,注意key 3.修改api项目的webconfig &l ...

  2. CentOS 7 源码编译vim8+vimplus

    安装依赖包 [root@DaMoWang ~]# yum -y install git \ centos-release-scl \ gcc-c++ \ ncurses-devel \ python- ...

  3. Centos7 Firewall 防火墙配置应用实例参考(转)

    时间:2016-06-02 02:40来源:linux.it.net.cn 作者:IT   简单的配置,参考学习:--permanent  当设定永久状态时 在命令开头或者结尾处加入此参数,否则重载或 ...

  4. os.path.join

    os.path.join()函数: 第一个以”/”开头的参数开始拼接,之前的参数全部丢弃. 以上一种情况为先.在上一种情况确保情况下,若出现”./”开头的参数,会从”./”开头的参数的上一个参数开始拼 ...

  5. matlab将rgb图转为灰度图的原理代码

    MyYuanLaiPic = imread('e:/image/matlab/Cluo.jpg');%读取RGB格式的图像 MyFirstGrayPic = rgb2gray(MyYuanLaiPic ...

  6. css根据子元素多少类设置子元素的属性--九宫格

    .moment-image-div:nth-child(n+1):nth-last-child(-n+9){ width: 33.33%; float: left; } .moment-image-d ...

  7. sparkStreaming 与fafka直接方式 进行消费者偏移量的保存如redis 里面 避免代码改变与节点重启后的数据丢失与序列化问题

    import java.util import kafka.common.TopicAndPartition import kafka.message.MessageAndMetadata impor ...

  8. Python GIL锁

    GIL全局解释器锁:为了解决多线程修改同一块数据. python的线程是调用操作系统的源生线程,启动时就是调用C语言的C源生接口,python调用C语言接口的线程去执行任务时,必须上下文对应关系传给C ...

  9. PLSQL远程连接数据库(亲测可试)

    一.准备工具: ORALCE数据库.PLSQL连接工具.确认网络正常 (我是在局域网中的,如果不是局域网,需要去ORACLE安装目录下找到sqlnet.ora 在里面找到 SQLNET.AUTHENT ...

  10. Linux 安装搭建 tftpd 服务器

    ---------- For Ubantu 18.0.4 ---------- 0.安装tftp-server sudo apt-get install tftpd-hpa (服务器端) sudo a ...