js实现手风琴效果
之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果
<div id="divbox">
<ul>
<li class="pic1"><a href="javascript:;">床头明月光</a></li>
<li class="pic2"><a href="javascript:;">疑似地上霜</a></li>
<li class="pic3"><a href="javascript:;">举头望明月</a></li>
<li class="pic4"><a href="javascript:;">低头思故乡</a></li>
</ul>
</div>
*{padding: 0;margin: 0;list-style: none}
#divbox{
width: 1000px;
}
ul{
width: 1000px;
height: 300px;
}
ul li{
height: 300px;
float: left;/*
width: 100px; */
}
ul li a{
text-decoration: none;
color:#666;
width: 100px;
height: 300px;
line-height: 300px;
text-align: center;
display: block;
background-color:#fff;
opacity: 0.3;
}
.pic1{
background: url('1.png');
}
.pic2{
background: url('2.png');
}
.pic3{
background: url('3.png');
}
.pic4{
background: url('4.png');
}
.active{
width: 700px;
}
</style>
js代码:
var lis=document.getElementsByTagName('li'); //获取document中的所有li /*animate动画*/
function ani(obj){
timer=setInterval(function(){ //设置定时器
var speed=10;
if(parseInt(obj.style.width)<700){ //如果传入的对象的宽小于700px
obj.style.width=parseInt(obj.style.width)+speed+'px'; //让当前宽加speed
speed+=10; //每执行一次定时器,speed+10
}else{
return;
}
},20); 20ms执行一次定时器
} for(var i=0;i<lis.length;i++){ //遍历li数组
lis[i].index=i; //循环把i的值赋值给li的index
var timer;
lis[i].onmouseover=function(){
for(var i=0;i<lis.length;i++){
lis[i].style.width='100px'; //当鼠标移入到某个li时,遍历循环数组,把所有li的宽都设置为100px
}
ani(lis[this.index]); //使用ani方法,把鼠标移入的li的宽值变为700px }
lis[i].onmouseout=function(){
lis[this.index].style.width='100px'; //鼠标移出时,把当前li的宽设置回100px
clearInterval(timer); //清除定时器
}
}
这样就能实现手风琴效果了,但是还有一点点bug,因为li初始化的时候宽度是100px,当鼠标移入li时,li会变为700px,但是鼠标移开时不会按700px的宽度,仍然以100px的宽为准。如果有知道这个问题的小伙伴请大家多多指教指教。
用jquery实现非常简单,而且效果非常好:
$(function(){
$(".handpic ul li").mouseover(function(){
$(this).stop(true).animate({'width':'700px'},1000).siblings().stop(true).animate({'width':'100px'},1000);
});
});
如果想要背景图片,请到本人相册下载。
js实现手风琴效果的更多相关文章
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- js 特效 手风琴效果
$(document).ready(function(){ //定义展开的块 var lastBlock = $('#a1'); //展开的块的宽度 var maxWidth = 406; //折叠的 ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- 一步步教你css3手风琴效果的实现
什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...
- 超简单jQuary链式操作代码实现手风琴效果
超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...
- jQuery效果之简单的手风琴效果
实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...
- Bootstrap手风琴效果
前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...
- jQuery插件实例五:手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
随机推荐
- SDUT OJ 数据结构实验之二叉树六:哈夫曼编码
数据结构实验之二叉树六:哈夫曼编码 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...
- SDUT OJ 数据结构实验之二叉树四:(先序中序)还原二叉树
数据结构实验之二叉树四:(先序中序)还原二叉树 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem ...
- ubuntu下QtCreator启动无响应问题解决
打开Qt后就卡死. 解决方法:删除系统配置目录下的QtProject文件夹: find / -name QtProject 输出: /root/.config/QtProject 删除QtProjec ...
- 锐速破解版linux一键自动安装包
锐速破解版linux一键自动安装包(5月28日更新) 锐速破解版安装方法: wget -N --no-check-certificate https://github.com/91yun/server ...
- springboot整合mybatis,druid,mybatis-generator插件完整版
一 springboot介绍 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...
- Vue keep-alive 组件.
如果不用 webpack , 那么 name 就是 vue.component(name) 这个 name 就是 export default { name:"index"} 的那 ...
- Joi图标
刚开始浏览API的时候,旁边这个图片还真没明白是啥意思.现在才明白过来:),检测工具嘛,哈哈.
- JavaScript的type属性等于text/html 例子
在使用JavaScript标签<script>的时候,其中type最常用的就是text/javascript 其实这个type还有其他用法,下面直接给出例子: type属性为text/ht ...
- rancher初级(搭建+基本操作+web应用部署)
Rancher搭建 首先rancher需要安装了docker的linux环境,我的系统版本为 在docker的基础上启动rancher服务器,Rancher 服务器是一个 Docker image,所 ...
- pip install xxx -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install xxx -i https://pypi.tuna.tsinghua.edu.cn/simple 快速下载