纯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 ...
随机推荐
- ASP.NET HttpRuntime.Cache缓存类使用总结
1.高性能文件缓存key-value存储—Redis 2.高性能文件缓存key-value存储—Memcached 备注:三篇博文结合阅读,简单理解并且使用,如果想深入学习,请多参考文章中给出的博文地 ...
- HTML5中的音视频处理
* 音视频处理 * 视频处理 * 基本内容 * 使用Flash技术处理HTML页面中的视频内容 * 包含音频.动画.网页游戏等 * 特点 * 浏览器原生不支持(IE浏览器要求安装ActiveX组件) ...
- 如何解决div层被flash遮盖的问题
页面构建中的Flash层会遮挡Div的问题,一般通过设置wmode="transparent" 或wmode="window"就可以解决.不过对于Flash视频 ...
- 移位操作<<和>>，是逻辑数字上的移动（和大端小端无关）
问题描述 这几天帮同事调试DSP TMS320F28335,这鬼东西蛋疼死了.char是16bit的,16位就是他的最小内存单元.但是PC机串口发过来的有8bit的数据,然后转换就出问题. 一开始不知 ...
- JSP利用freemarker生成基于word模板的word文档
利用freemarker生成基于word模板的word文档 freemarker简介 FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器 ...
- Android破解之Lic文件加密程序（首例）
我不会写Android,这是我第一个破解Android的例子,耗时接近一天,希望大神不要见笑! 本程序为商业软件,不便发布APK程序. 不要给我发消息,我不得回,有问题,直接回帖就可以了. 准备工作 ...
- Microsoft Dynamics CRM 2013 --针对特定实体,取消保存功能(包含自动保存)
AutoSave 是 Microsoft Dynamics CRM 2013 一个新特性. 但AutoSave的有效范围是[所有实体],不允许针对特定某一实体进行设置. 所以,若想针对特定实体进行设置 ...
- SharePoint 2013 Installation and Configuration Issues
# Issue 1: During Installing SharePoint 2013 Prerequisites there was an error in installing Applicat ...
- Upgrade custom workflow in SharePoint
Experience comes when you give a try or do something, I worked in to many SharePoint development pro ...
- 谷歌的网页排序算法（PageRank Algorithm）
本文将介绍谷歌的网页排序算法(PageRank Algorithm),以及它如何从250亿份网页中捞到与你的搜索条件匹配的结果.它的匹配效果如此之好,以至于“谷歌”(google)今天已经成为一个被广 ...