原生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来实现这个拖 ...
随机推荐
- .NET 4.5 中新提供的压缩类(转载)
Windows8 的开发已经如火如荼开始了,在 Windows8 中提供的 .NET Framework 已经更新到了 4.5 版,其中又增加了一些新的特性,对压缩文件的支持就是其中之一. 在 4.5 ...
- Android -- 从源码带你从EventBus2.0飚到EventBus3.0
1,最近看了不少的面试题,不管是百度.网易.阿里的面试题,都会问到EventBus源码和RxJava源码,而自己只是在项目中使用过,却没有去用心的了解它底层是怎么实现的,所以今天就和大家一起来学习学习 ...
- angular中的MVC思想
MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳.在学习angular的过程中,我在网上查找关于angular MVC ...
- input光标大小
最近在做项目忘记密码页面时,input光标大小需要统一.同时也需要兼容ie8浏览器. 总结如下: IE:不管该行有没有文字,光标高度与font-size一致. FF:该行有文字时,光标高度与font- ...
- 关于ashrpt中行源的CPU + Wait for CPU事件深入解读
该等待事件并不包含在等待事件范围,而是出现在ash的具体行源中,如下: 标注语句的每次执行大约1小时,如下awr所示: 该sql语句的最后一层Insert如下: insert into ta_tf l ...
- RPM 包的构建 - 实例
打包目录 rpm 打包目录有一些严格的层次上的要求. rpm 的版本 <=4.4.x,rpmbuid 工具其默认的工作路径是 /usr/src/redhat.因为权限的问题,普通用户不能制作 r ...
- 阿里技术专家详解Dubbo实践,演进及未来规划
https://mp.weixin.qq.com/s/9rVGHYfeE8yM2qkSVd2yEQ
- Springboot解决资源文件404,503等特殊报错,无法访问
Springboot解决资源文件404,503等特殊报错 原文链接:https://www.cnblogs.com/blog5277/p/9324609.html 原文作者:博客园--曲高终和寡 ** ...
- 封装海康SDK出现无法加载 DLL“..\bin\HCNetSDK.dll”: 找不到指定的模块
今天在封装海康设备的时候出现了这么一个问题,在初始化的时候提升无法加载 DLL“..\bin\HCNetSDK.dll”: 找不到指定的模块. 在网上查找了几个方法,并不是很靠谱,于是从源头找找,是什 ...
- Android 开发版本统一
一.概述 对于 Android 开发版本的统一涉及到的东西就是 Gradle 中的全局设置,我们通过配置 gradle 也就是编写 Groovy 代码将开发中的版本号设置为全局参数.这样就能够在 mo ...