//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. vue-cli 2.92版本 没有dev.server.js

    在webpack.dev.conf.js 文件中 //首先 const express = require('express') const app = express() var appData = ...

  2. Axis2的简单配置(完整版)

    Axis2的简单配置(终结版) 1.axis2 下载地址 axis2-1.6.2-bin.zip http://mirror.esocc.com/apache//axis/axis2/java/cor ...

  3. Linux基础命令---cancel取消打印任务

    cancel cancel指令用来取消已经存在的打印任务. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.openSUSE.SUSE.   1.语法       ...

  4. Poj1979 Red and Black (DFS)

    Red and Black Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 47466   Accepted: 25523 D ...

  5. Appium+python自动化1-环境搭建(上)

    前言 appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python.小编擅长Python,所以接下来的教程是appium+py ...

  6. php 禁止屏蔽类

    1.禁止右键 <body oncontextmenu=return(false)> 2.禁止选择 <body onselectstart="return false&quo ...

  7. js数字转换成财务金额

    function dealNumberToMoney(money){ var fmtAmt = ""; if(money&&money!=null){ money ...

  8. mac忘记操作密码

    转载于:https://blog.csdn.net/wu110112/article/details/70312987 如果忘记mac登陆密码应该如何处理呢? 这里大家请勿着急,我来帮大家解决这个问题 ...

  9. Windows SubSystem for Linux

    Summary of Windows SubSystem for Linux Install Ubuntu Run PowerShell as administrator and input: Ena ...

  10. D8 双连通分量

    记得有个梗那一天,zw学生zzh大佬说逃不掉的路变成a不掉的题哈哈哈哈: 分离的路径: BZOJ 1718POJ 3177LUOGU 286: 思路:在同一个边双连通分量中,任意两点都有至少两条独立路 ...