纯js和纯css+html制作的手风琴的效果
一：纯css+html的手风琴效果
这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<style>
body{background: url('bg.gif') repeat;}
ul,li,p{margin: 0px;padding: 0px;list-style: none;}
#div{width: 1180px;height: 405px;border:5px solid #ccc;padding: 0px;margin: 0px auto;overflow: hidden;}
.list{width: 3200px;}
.list li{float: left;width: 170px;height: 500px;;position: relative;
-moz-transition:width 2s;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
.list:hover li{width: 107px;}
.list li:hover{width: 538px;}
.list li p{width: 100%;height: 100%;opacity: 0.5;position: absolute;top: 0px;left: 0px;background: black; }
.list li:hover p{opacity:0}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
</script>
</head>
<body >
<div id="div">
<ul class="list"> <!--如果设置父级与子级之间没有空隙的话，将margin和padding设为0即可-->
<li><img src="data:image/1.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="data:image/2.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="data:image/3.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="data:image/4.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="data:image/5.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="data:image/6.jpg" style="width:538px;height:405px;"><p></p></li>
<li><img src="data:image/7.jpg" style="width:538px;height:405px;"><p></p></li>
</ul>
</div>
</body>
</html>
二：纯js+html制作手风琴
这个手风琴出现一个问题，就是单独移动每个li时，没问题，但是当移动很快时，最右边的li出现空隙。我感觉是定时器的问
题，就是当每个li还没回到自己的位置时，下一个li就开始运动了。但我定时器已经关了啊。
麻烦哪位给我留言，帮我看看怎么改哈！
问题效果如下所示：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手风琴效果</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="perfectMove2.js"></script>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById('show1');
var iMinWidth=9999999;
var aLi=oDiv.getElementsByTagName('li');
var aSpan=oDiv.getElementsByTagName('span');
var i=0;
var bool=false;
for(i=0;i<aLi.length;i++)
{
aSpan[i].index=i;
aSpan[i].onmouseover=function ()
{
for(i=0;i<aLi.length;i++)
{
startMove(aLi[i],{width:this.offsetWidth});//调用运动函数
bool=true;
}
if(bool)
{
startMove(aLi[this.index],{width:552});
}
}
} };
</script>
</head>
<body>
<div id="show1">
<ul>
<li class="active">
<span class="bg0">这是第一个</span>
<img src="data:images/1.jpg" />
</li>
<li >
<span class="bg1">这是第二个</span>
<img src="data:images/2.jpg" />
</li>
<li >
<span class="bg2">这是第三个</span>
<img src="data:images/3.jpg" />
</li>
<li>
<span class="bg3">这是第四个</span>
<img src="data:images/4.jpg" />
</li>
<li>
<span class="bg4">这是第五个</span>
<img src="data:images/5.jpg" />
</li>
<li>
<span class="bg5">这是第六个</span>
<img src="data:images/6.jpg" />
</li>
</ul>
</div>
</body>
</html>
//perfectMove2.js代码如下：
function getStyle(obj,attr)//用此种方法获取样式中的属性
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn)
{
clearInterval(obj.timer);//清除定时器
obj.timer=setInterval(function ()
{
var stop=true;
for(var attr in json)
{
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);//这里加parseInt是避免div的数值不稳定，在波动
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur!=json[attr])
{
stop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
} }
if(stop)
{
clearInterval(obj.timer);
if(fn){fn();}
}
}, 30) }
纯js和纯css+html制作的手风琴的效果的更多相关文章
- 七夕情人节表白-纯JS实现3D心形+图片旋转
七夕情人节就快到了,这里献上纯js表白神器-心里都是你,预览: 技术点:css-3d.js-随机色.js-transform 1.html: <div class="heart&quo ...
- 纯JS实现俄罗斯方块，打造属于你的游戏帝国
纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- [分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技
好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...
- baguetteBox.js响应式画廊插件(纯JS)
baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- 纯JS画点、画线、画圆的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯JS文本比较工具
前段时间由于工作需要写了一个纯JS文本比较工具 在这里与大家分享下 算法有待优化,还希望大家多多指教 先上效果图: 奉上源码(把源码保存为html格式的文件就可以直接运行了): <!doctyp ...
- 纯js实现分页
原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...
随机推荐
- NTFS碎片
在Windows操作系统中查看各分区的文件系统: fsutil fsinfo ntfsinfo c: (查看C:盘的文件系统) fsutil fsinfo ntfsinfo d: (查看D:盘的文件系 ...
- mysql服务器io等待高定位与分析
这两天发现公司好几台阿里云ECS上的mysql生产服务器繁忙期间io等待高达百分之二三十(估计九成是没有write back),而且确定是mysql进程产生,由于跑的应用过多,开发和维护无法直接确定哪 ...
- FAQ_1_陌生的VERSION.SDK_INT
看到VERSION.SDK_INT不禁诧异,这是何物?! 看API的定义,如下: 原来是一个常量值.但是这个常量值可以根据系统的不同而不同哟!为了揭开其神秘的面纱,将源码ctrl如下: 可以看出,获取 ...
- c#多线程生产者消费者(手稿)
屋舍简陋,隔壁的娃娃哭了一晚,心中无恶意纯中性的想,有病就赶紧带孩子去看医生吧,能哭这么久估计孩子真的不舒服.
- Asp.net mvc项目架构分享系列之架构概览
Asp.net mvc项目架构分享系列之架构概览 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4.项目架构 ...
- How To Write In Sharepoint Log File 怎么对自定义的MOSS代码写日志
How To Write In Sharepoint Log File 怎么对自定义的MOSS代码写日志 Add Microsoft.Office.Server dll in your project ...
- 中国象棋引擎的C#源代码
以前写的中国象棋引擎的C#源程序,可在VS2010中编译运行,由于个人精力有限,难以完成后续的开发工作,如果谁感兴趣,请关注微信公众号(“申龙斌的程序人生”,ID:slbGTD),发送后台消息“象棋引 ...
- 【改】IOS-百度地图API用点生成线路、导航、自定义标注 2013年11月更新
IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽IOS百度地图开发POISearch搜索附近停车场,附近加油站IOS百度地图视角跳到用户当前位置IOS百度地图开发实时路况IOS开发百 ...
- HTML5 拖放
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...
- Java 之 内部类
(static修饰的成员属于整个类,而不属于单个对象) 定义:将一个类放到另一个类的内部定义,这个在内部定义的类就叫做内部类(也有的成嵌套类),包含内部类的类被称为外部类(也有的称宿主类). 1.非静 ...