原生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来实现这个拖 ...
随机推荐
- 安装archlinux的linux命令记录
磁盘的分区:cfdisk 格式化分区:mkfs.ext4,mkswap,swapon 查看所有分区:lsblk /dev/sda 先挂载 / 分区:mount /dev/sda1 /mnt archl ...
- 设置vim支持gbk
linux下的默认字符集是utf-8,但Windows下默认是GBK,如果我们在linux下打开Windows中的文件就很容乱码,可以通过下面的设置使vim支持GBK编码. 首先,确认你的系统中安装了 ...
- javascript DOM 常用方法
前端HTML+CSS+JS流程导图:https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c HTML+CSS+Javascript+j ...
- qt creator中编辑Makefile的设置
在qt creator中编辑Makefile时的Tab键总是不能识别,需要这样设置
- 缓存淘汰算法---LRU转
1. LRU1.1. 原理 LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”. ...
- python locust 性能测试:locust 参数化(list) ---循环取数据,数据可重复使用
from locust import TaskSet, task, HttpLocust class UserBehavior(TaskSet): def on_start(self): # 当模拟用 ...
- Eclipse新建Java工程出现红色感叹号怎么解决?
安装了新版本的JDK之后,在Eclipse中新建Java工程出现红色感叹号怎么解决? 其实只要在Eclipse中重新设置一下JDK路径就行了 路径:右键Java工程>>Build Path ...
- P2472 [SCOI2007]蜥蜴(网络流)
P2472 [SCOI2007]蜥蜴 把每个点拆成2个点,两点之间连边的边权为石柱高度 新建虚拟源点$S$和汇点$T$ $S$向所有有蜥蜴的点连边,边权1 其他边都连$inf$ 剩下就是裸的$dini ...
- 2的n次方用c语言怎么表示
C语言有函数,需要头文件#include <math.h>用pow(2,n)就可以了! double result = pow(2,n);
- 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 ...