原生js手风琴效果
//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手风琴效果的更多相关文章
- 原生js动画效果(源码解析)
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- 原生js放大镜效果
效果: 1. 鼠标放上去会有半透明遮罩.右边会有大图片局部图 2. 鼠标移动时右边的大图片也会局部移动 放大镜的关键原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置 ...
- Js 手风琴效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- js 动画效果实现
1. 实现方式 - 应用场景 自己写 - 简单的.不用 jq 的项目 jq - 普通动画 成熟插件 - 复杂动画 2. 相关文章 JavaScript基于时间的动画算法 九种原生js动画效果 Twee ...
- 原生js实现多组图片切换
这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
随机推荐
- Vue系列之 => 评论功能(小知识点串联)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- GO语言常量和变量
标识符与关键字 标识符 人为定义有特殊意义的词,Go语言中标识符由字母数字和_(下划线)组成,并且只能以字母和_开头. 关键字 关键字是指编程语言中预先定义好的具有特殊含义的标识符. GO语言中有25 ...
- jquery首页图片轮播
css样式 .bannerBox {position: relative;width: 100%;height: 348px;margin:0px auto;}.bannerBox .bannerLi ...
- go语言切片切片与指针
go语言 1.切片的定义 切片不是真正意义上的动态数组,是引用类型. var arraySlice []int
- openvino program
为了兼容 fpgaconf -b 00 -d 04 -f 1 xxx.bin 重新实现 #!/bin/bash B=${} D=${} F=${} BDF=${B##0x}:${D##0x}.${F# ...
- JS(JavaScript)的初了解2(更新中···)
1.parseInt() 整数型 字符串中的数字取整 遇到第一个是非数字的字节就结束了. 2.parseFloat 浮点型 字符中的数字取整数和小数,有两个小数点的话第二个小数点无效第二个小数点 ...
- ES6 常用总结(前端开发js技术进阶提升总结)
一.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数的最顶部就在全局作用域的最顶部).这就是函数变量提升例如: 不用关心 ...
- svg(二)---半瓶子晃荡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- robot framework学习二-----元素定位
文章摘自:https://www.cnblogs.com/fnng/p/3901391.html 不要误认为Robot framework 只是个web UI测试工具,更正确的理解Robot fram ...
- maven打包时出现 Failed to execute goal org.apache.maven.plugins:maven-install-plugin:2.4:install (default-install) on project……
maven在打包时只会默认打jar包,而那些xml等配置文件默认不打包进去的,这样的话在mybatis的配置使用中就有问题了. 要自己配置后手动打包才能将xml文件也纳入打包的范围,配置后打包发现出现 ...