CSS3实现炫酷手风琴效果

71 浏览量更新于2024-08-31 收藏 149KB PDF 举报

"使用CSS3和JavaScript实现炫酷的手风琴效果" 手风琴效果是一种常见的交互设计，常用于导航菜单、折叠内容展示等场景。它模拟了手风琴乐器展开和收缩的动作，使得用户界面更加生动有趣。在这个案例中，我们将探讨如何利用纯JavaScript和CSS3来创建手风琴效果。首先，让我们回顾一下JavaScript实现的简单手风琴效果。在提供的代码片段中，可以看到一个`<div id="c">`包含了多个`<p>`元素，每个`<p>`代表手风琴的一个“键”。当鼠标悬停在`<p>`元素上时，它们的宽度会发生变化，从而模拟手风琴的开合。然而，这个实现并不完全符合手风琴效果，因为它没有控制只有一个键是展开的，其他键都是关闭的。为了实现更接近真实手风琴效果的功能，我们需要添加JavaScript事件监听器，例如`mouseover`和`mouseout`，来控制每个`<p>`元素的宽度变化。同时，我们需要一个变量来跟踪当前展开的键，并在其他键展开时自动关闭它。这样，用户每次点击或悬停时，只会有一个`<p>`元素处于展开状态。接下来，我们可以引入CSS3的`transition`属性来平滑地过渡宽度变化，提升用户体验。通过设置`transition: width .2s ease;`，我们可以使宽度的变化在0.2秒内平滑进行，增加动画效果。现在，我们转向CSS3实现的手风琴效果。CSS3提供了诸如`display`和`flex`等特性，可以方便地实现手风琴效果，而无需JavaScript的干预。我们可以通过切换`display`属性值来控制内容的显示与隐藏。例如，当`display`为`none`时，内容是隐藏的；当`display`为`block`时，内容可见。结合CSS3的`@keyframes`动画，我们可以创建一个更加流畅的展开和收缩效果。无论是JavaScript还是CSS3，都可以实现手风琴效果。JavaScript提供了更多的交互控制和灵活性，而CSS3则简化了实现过程，提供了更好的动画性能。选择哪种方法取决于项目需求和开发者的偏好。在实际开发中，通常会结合两者，利用JavaScript处理用户交互，而将视觉动画交给CSS3来实现，以达到最佳效果。

炫酷的炫酷的js手风琴效果手风琴效果

既然JQ和JS都能实现那么炫酷的效果，我们用CSS3能不能做出手风琴效果的书签来呢？这篇文章主要为大家分享了炫酷的手风琴效果实现方式，感兴趣的小伙伴们可以参考一下

你一定用过书签，也一定给你的书本加过书签，那么你见过书签式的导航吗？你一定见过手风琴，也一定知道弹奏手风琴时的它的外形变化，那么你见过手风琴式的导航吗？如果没有，请往下看：

前面的话：前面的话：

　　这篇博文先通过Javascript做一个简单的手风琴效果，让大家对手风琴效果有一定的了解；紧接着，我们换jquery做类似的手风琴效果。前面的两个例子都很简单，接下来要放大招了，我想用JQ或是

原生的JS去做类似淘宝网中用到的手风琴效果。继续回到书签问题，既然JQ和JS都能实现那么炫酷的效果，我们用CSS3能不能做出手风琴效果的书签来呢？

用用Javascript做一个简单的手风琴效果：做一个简单的手风琴效果：

话不多说，我们先上代码：

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

body{

background-color: rgba(0,0,0,.8);

}

div{

margin: 20px auto;

}

#c {

width: 500px;

height: 300px;

overflow: hidden;

}

p {

float: left;

width: 20px;

height: 300px;

}

</style>

</head>

<body>

</div>

</body>

</html>

效果：

分析：在不使用JS的情况下，我们只能通过改变p的宽度，来模仿手风琴效果，然后我们忽略人为因素的影响，让其在鼠标经过每个p时，该p的宽度发生变化。

这里我们知道了要改变p的宽度，那么接下来就简单了，我们用前面介绍过的关于Javascript动画的相关方法就可以得到我们想要的效果（点击：Javascript动画相关）。参考代码如下：

function accordion() {

var Div = document.getElementById('c');

var Divs = Div.getElementsByTagName('p');

var i = 0;

var t = null;

for(i = 0; i < Divs.length; i++) {

Divs[i].index = i;

Divs[i].onmouseover = function() {

var index = this.index;

if(t) {

clearInterval(t);

}

t = setInterval(function() {

var iWidth = 500;

for(i = 0; i < Divs.length; i++) {

if(index != Divs[i].index) {

var iSpeed = (20 - Divs[i].offsetWidth) / 5;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

Divs[i].style.width = Divs[i].offsetWidth + iSpeed + 'px';

iWidth -= Divs[i].offsetWidth;

};

Divs[index].style.width = iWidth + 'px';

}, 30);

};

}

accordion();

上面的代码不做解释，代码运行后的结果点击网址： http://sandbox.runjs.cn/show/daapxxo9 查看。

用用jquery做类似的手风琴效果：做类似的手风琴效果：

前面的效果是不是觉得很简单，下面我们加一点点难度，有如下要求：

1、将前面的背景颜色换成图片

2、增加文字

3、用jquery实现

先来完成我们的html代码：

<ul>

<p class="p2">效果：手风琴效果</p>

</div>

</a>

</li>

<p class="p2">效果：手风琴效果</p>

</div>

</a>

</li>

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38646634

粉丝: 4
资源: 910

CSS3实现炫酷手风琴效果

js手风琴效果

JS手风琴效果

html5和css3炫酷3D手风琴效果

JS手风琴 效果

简单的js手风琴效果

js特效之制作js手风琴效果

经典精简原生javascript手风琴效果

纯js（javascript）手风琴效果

javascript 实现手风琴效果

JavaScript JS手风琴图片展示效果代码

最新资源

JS手风琴效果