原生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来实现这个拖 ...
随机推荐
- centos7安装redist 以及redis扩展
wget http://download.redis.io/releases/redis-3.2.1.tar.gz 用wget下载 $ tar xzf redis-3.2.1.tar.gz 解 ...
- 给datagrid的日期格式化成年月日
$('#infos').datagrid({ title:'系统版本列表', iconCls:'icon-view', method:'POST', singleSelect:false, fit : ...
- js 星星效果思路
//星星的效果思路 1.获取需要修改的元素 ul li 跟p 布局 2.给li 加移入事件 更改提示框显示, 3.给li 加移出事件 更改提示框隐藏 4.给li加索引值代表自己的序号 5.在li移入时 ...
- json-server基本使用
**一.前后端并行开发的痛点** 前端需要等待后端开发完接口以后 再根据接口来完成前端的业务逻辑 **二.解决方法** 在本地模拟后端接口用来测试前端效果 这种做法称之为构建前端Mock **三.js ...
- Eclipse创建Maven Web项目后更改Servlet版本
Eclipse创建Maven Web项目后更改Servlet版本 1.场景基于Eclipse通过maven-archetype-webapp原型创建一个Web项目后,其默认Servlet版本是2.3, ...
- Sci_DRead_ParaBuzzerDriver_st_BuzzerSoundOpening1
extern uint16 Sci_DRead_ParaMotorGroupB_u16_Motor1CinchDoneCurrent1(); * \violation 1503 The functio ...
- 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码
接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...
- 复旦大学2017--2018学年第一学期高等代数I期末考试情况分析
一.期末考试成绩班级前十名 郭宇城(100).魏一鸣(93).乔嘉玮(92).刘宇其(90).朱柏青(90).王成文健(90).方博越(88).熊子恺(88).张君格(88).崔镇涛(87).史书珣( ...
- Win32汇编学习(6):键盘输入消息
这次,我们将要学习WINDOWS程序是如何处理键盘消息的. 理论: 因为大多数的PC只有一个键盘,所以所有运行中的WINDOWS程序必须共用它.WINDOWS 将负责把击键消息送到具有输入焦点的那个应 ...
- Vue 兼容 IE9 全功能正常使用的全面解决方案
https://blog.csdn.net/VhWfR2u02Q/article/details/80863626