//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. 安装archlinux的linux命令记录

    磁盘的分区:cfdisk 格式化分区:mkfs.ext4,mkswap,swapon 查看所有分区:lsblk /dev/sda 先挂载 / 分区:mount /dev/sda1 /mnt archl ...

  2. 设置vim支持gbk

    linux下的默认字符集是utf-8,但Windows下默认是GBK,如果我们在linux下打开Windows中的文件就很容乱码,可以通过下面的设置使vim支持GBK编码. 首先,确认你的系统中安装了 ...

  3. javascript DOM 常用方法

    前端HTML+CSS+JS流程导图:https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c HTML+CSS+Javascript+j ...

  4. qt creator中编辑Makefile的设置

    在qt creator中编辑Makefile时的Tab键总是不能识别,需要这样设置

  5. 缓存淘汰算法---LRU转

    1. LRU1.1. 原理 LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”. ...

  6. python locust 性能测试:locust 参数化(list) ---循环取数据,数据可重复使用

    from locust import TaskSet, task, HttpLocust class UserBehavior(TaskSet): def on_start(self): # 当模拟用 ...

  7. Eclipse新建Java工程出现红色感叹号怎么解决?

    安装了新版本的JDK之后,在Eclipse中新建Java工程出现红色感叹号怎么解决? 其实只要在Eclipse中重新设置一下JDK路径就行了 路径:右键Java工程>>Build Path ...

  8. P2472 [SCOI2007]蜥蜴(网络流)

    P2472 [SCOI2007]蜥蜴 把每个点拆成2个点,两点之间连边的边权为石柱高度 新建虚拟源点$S$和汇点$T$ $S$向所有有蜥蜴的点连边,边权1 其他边都连$inf$ 剩下就是裸的$dini ...

  9. 2的n次方用c语言怎么表示

    C语言有函数,需要头文件#include <math.h>用pow(2,n)就可以了! double result = pow(2,n);

  10. ERROR 1451 (23000): Cannot delete or update a parent row: a foreign key constraint fails ()

    centos7.5 删除表空间文件失败 问题: mysql> alter table country discard tablespace; ERROR 1451 (23000): Cannot ...