HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果,css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下
一、纯css+html的手风琴效果
这种用css写的手风琴比较简单,主要是应用到css中的,transition属性。
代码如下:
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}
二、纯js+html制作手风琴
这个手风琴出现一个问题,就是单独移动每个li时,没问题,但是当移动很快时,最右边的li出现空隙。我感觉是定时器的问题,就是当每个li还没回到自己的位置时,下一个li就开始运动了。但我定时器已经关了啊。
麻烦哪位给我留言,帮我看看怎么改哈!
代码如下:
手风琴效果
window.οnlοad=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
{
aSpan[i].index=i;
aSpan[i].οnmοuseοver=function ()
{
for(i=0;i
{
startMove(aLi[i],{width:this.offsetWidth});//调用运动函数
bool=true;
}
if(bool)
{
startMove(aLi[this.index],{width:552});
}
}
}
};
这是第一个
这是第二个
这是第三个
这是第四个
这是第五个
这是第六个
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)
}
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:基于jquery的slideDown和slideUp做手风琴
jquery插件制作 手风琴Panel效果实现
原生js做的手风琴效果的导航菜单
jquery实现手风琴效果实例代码
jquery手风琴特效插件
js实现可折叠展开的手风琴菜单效果
JS实现的另类手风琴效果网页内容切换代码
JS实现仿QQ面板的手风琴效果折叠菜单代码
javascript手风琴下拉菜单实现代码
http://www.dengb.com/Javascript/1116469.htmlwww.dengb.comtruehttp://www.dengb.com/Javascript/1116469.htmlTechArticle纯js+html和纯css+html制作手风琴效果,css手风琴 本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下...
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果,css手风琴相关推荐
- html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
- html5滚动文字切换效果代码,js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了 ...
- HTML完成如下网页效果代码,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例...
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大家供大家参考.具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击&qu ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- java 前台播放视频_「纯js项目」海康视频项目,java后台+前台web显示的,望提供思路!...
纯js项目: 海康视频项目,java后台+前台web显示的,望提供思路! 如果只是实现BS架构,可以向海康要web开发包,直接使用浏览器通过ocx访问海康设备浏览视频,如果需要的功能不全,再使用JNI ...
- 纯js消息弹窗组件Message
js消息弹窗组件 文章目录 js消息弹窗组件 1. js部分代码 2.使用方法 3.演示效果 写组件上瘾,今天写一个纯js消息弹窗组件,复制即可使用,css也写在了js之中,用js生成,代码若是存在不 ...
- html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件
这是一款基于HTML5 canvas的图片马赛克js插件.该图片马赛克插件使用简单,可调整马赛克的大小,透明度等属性,适合用于制作一些特殊的图片效果. 基于HTML5 Canvas的纯JS图片马赛克效 ...
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果,CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法 在页面中引入imgSwitch.min.js ...
最新文章
- code blocks 代码颜色_vuepress中实现代码折叠、高亮
- 如何防止google colab 掉线
- 最大值减去最小值小于或等于num的子数组数量
- 你和阿里资深架构师之间,差的不仅仅是年龄(进阶必看)
- c语言 宏定义 去除宏定义_如何检查是否在C中定义了宏?
- 单步ARM汇编解开volatile本质
- 计算机端口联机,网络端口之二端口传输机制
- IT项目管理的实例与总结
- 项管:配置管理、变更管理、文档管理、知识管理及其他
- 字节跳动实习面经(已拿offer附攻略)
- 使用bootstrap写一个注册页面
- 写一函数,将两个字符串中的元音字母复制到另一个字符串,然后输出。
- 为什么打印还要另存为_为什么打印时会出现另存为保存文件
- JavaScript中的Map、Set及其遍历
- final变量要么定义时初始化,要么在代码块中初始化
- MySQL获取季初日期_用于取得当前日期相对应的月初,月末,季初,季末,年初,年末时间...
- asterisk恢复
- 浙江大学计算机研究生2020年录取分数线,2020年浙江大学考研分数线公布
- 新能源锂电池行业除杂工艺介绍
- 已解决sitk::ERROR: Unable to determine ImageIO reader for “D:zuj\fx05(IOSUDA-master datasetsretinal_dat