手风琴特效 transition

最新推荐文章于 2021-07-04 15:48:13 发布
最新推荐文章于 2021-07-04 15:48:13 发布
阅读量71 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/ordinaryk/p/6088676.html
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0px; padding:0px;}
</style>
</head>

<body>
<div style=" width:700px; height:300px; background-color:#E7E7E7; overflow:hidden;position:relative;">
    <div id="d1" style="width:500px; height:300px; background-color:#FF8486;position:absolute; float:left; transition:0.7s;" onMouseOver="bian(1)"><img src="路易十三/logo.png" ></div>
    <div id="d2" style="width:500px; height:300px; background-color:#FFDE6D;position:absolute; float:left; left:50px; transition:0.7s;" onMouseOver="bian(2)"></div>
    <div id="d3" style="width:500px; height:300px; background-color:#83FF48;position:absolute; float:left; left:100px; transition:0.7s;" onMouseOver="bian(3)"></div>
    <div id="d4" style="width:500px; height:300px; background-color:#63EEF5;position:absolute; float:left; left:150px; transition:0.7s;" onMouseOver="bian(4)"></div>
    <div id="d5" style="width:500px; height:300px; background-color:#776CFF;position:absolute; float:left; left:200px; transition:0.7s;" onMouseOver="bian(5)"></div>
</div>
<br>
<div style=" width:700px; height:300px; background-color:#E7E7E7; overflow:hidden;position:relative;">
    <div id="dd1" style="width:500px; height:300px; background-color:#FF8486;position:absolute; float:left; transition:0.7s;" onClick="biann(1)"></div>
    <div id="dd2" style="width:500px; height:300px; background-color:#FFDE6D;position:absolute; float:left; left:50px; transition:0.7s;" onClick="biann(2)"></div>
    <div id="dd3" style="width:500px; height:300px; background-color:#83FF48;position:absolute; float:left; left:100px; transition:0.7s;" onClick="biann(3)"></div>
    <div id="dd4" style="width:500px; height:300px; background-color:#63EEF5;position:absolute; float:left; left:150px; transition:0.7s;" onClick="biann(4)"></div>
    <div id="dd5" style="width:500px; height:300px; background-color:#776CFF;position:absolute; float:left; left:200px; transition:0.7s;" onClick="biann(5)"></div>
</div><br>


<div style=" width:2500px; height:300px; background-color:#111111; position:relative;"></div>
</body>
</html>
<script language="javascript1.1">
function bian(n)
{
    if(n==1){
        document.getElementById("d1").style.left="";
        document.getElementById("d2").style.left="500px";
        document.getElementById("d3").style.left="550px";
        document.getElementById("d4").style.left="600px";
        document.getElementById("d5").style.left="650px";
    }
    else if(n==2){
        document.getElementById("d1").style.left="";
        document.getElementById("d2").style.left="50px";
        document.getElementById("d3").style.left="550px";
        document.getElementById("d4").style.left="600px";
        document.getElementById("d5").style.left="650px";
        }
    else if(n==3){
        document.getElementById("d1").style.left="";
        document.getElementById("d2").style.left="50px";
        document.getElementById("d3").style.left="100px";
        document.getElementById("d4").style.left="600px";
        document.getElementById("d5").style.left="650px";
        }
    else if(n==4){
        document.getElementById("d1").style.left="";
        document.getElementById("d2").style.left="50px";
        document.getElementById("d3").style.left="100px";
        document.getElementById("d4").style.left="150px";
        document.getElementById("d5").style.left="650px";
        }
    else if(n==5){
        document.getElementById("d1").style.left="";
        document.getElementById("d2").style.left="50px";
        document.getElementById("d3").style.left="100px";
        document.getElementById("d4").style.left="150px";
        document.getElementById("d5").style.left="200px";
        }
}
function biann(n)
{
    if(n==1){
        document.getElementById("dd1").style.left="";
        document.getElementById("dd2").style.left="500px";
        document.getElementById("dd3").style.left="550px";
        document.getElementById("dd4").style.left="600px";
        document.getElementById("dd5").style.left="650px";
    }
    else if(n==2){
        document.getElementById("dd1").style.left="";
        document.getElementById("dd2").style.left="50px";
        document.getElementById("dd3").style.left="550px";
        document.getElementById("dd4").style.left="600px";
        document.getElementById("dd5").style.left="650px";
        }
    else if(n==3){
        document.getElementById("dd1").style.left="";
        document.getElementById("dd2").style.left="50px";
        document.getElementById("dd3").style.left="100px";
        document.getElementById("dd4").style.left="600px";
        document.getElementById("dd5").style.left="650px";
        }
    else if(n==4){
        document.getElementById("dd1").style.left="";
        document.getElementById("dd2").style.left="50px";
        document.getElementById("dd3").style.left="100px";
        document.getElementById("dd4").style.left="150px";
        document.getElementById("dd5").style.left="650px";
        }
    else if(n==5){
        document.getElementById("dd1").style.left="";
        document.getElementById("dd2").style.left="50px";
        document.getElementById("dd3").style.left="100px";
        document.getElementById("dd4").style.left="150px";
        document.getElementById("dd5").style.left="200px";
        }
}
</script>

 

转载于:https://www.cnblogs.com/ordinaryk/p/6088676.html

weixin_30725315
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过transition实现手风琴效果
XBQ0510Qi的博客
01-15 1052
手风琴是我们在前端设计中经常看到的一种图片的展示方式，其中最浅显易懂就是通过css的过渡属性（transition）来处理，首先我们脑补一下transition的用法，那就是经常被提到的动画三步骤，我们这里就以width为例来简单的介绍一下，我们实现一个100px宽度的div在鼠标悬停两秒之后开始发生过渡效果，并在两秒完成过渡，最后宽度过渡为500px 1、编写过渡前的样式；比如 div{
手风琴效果
06-27
手风琴效果是一种常见的网页设计元素，它在用户界面中被广泛应用，特别是在多级菜单、导航栏和信息展示部分。这种效果得名于其类似手风琴展开和折叠的动作，可以有效地节省空间，同时保持信息的清晰度和易用性。 在...
利用Transition过渡完成手风琴菜单
利用Transition过渡完成手风琴菜单
07-15 435
## 效果预览 ## 案例分析 实现手风琴菜单最核心的部分就是鼠标移到某一个模块时，相应的里面的内容会展开，鼠标移开后，内容又会收回。这其中的原理就是将每个模块里面的内容的初始高度设置成零，然后鼠标移上去之后，通过过渡让高度缓慢地增加直至显示出所有内容，鼠标移开后，也是同样的通过过渡，再让高度逐渐地减小为零。 ## 相关代码 <!DOCTYPE html&g...
CSS3 transition实现手风琴效果
astonishqft的博客
01-04 3386
CSS3 transition实现手风琴效果 最近在项目中遇到了一个需求，需要完成一个手风琴效果的展示，最后通过CSS3 transition实现了这个效果，下面就分享下实现方法。 效果 首先看下效果： 可以看到，当我们点击toggle按钮的时候会实现一个带有动画的过渡效果。 transition属性 实现动画效果这要用到了transition的四个属性，分别是：transition-prope...
手风琴菜单
weixin_45150813的博客
05-19 136
手风琴菜单 描述：通过transition过渡效果实现手风琴菜单 鼠标光标放到div上，菜单自动展开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0;
css实现手风琴
LLL_liuhui的博客
02-25 201
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=&lt;device-width&gt;, initial-scale=1.0&
手风琴效果JS网页特效
11-17
手风琴效果（Accordion Effect）在网页设计中是一种常见的交互元素，主要应用于展示大量内容时，以节省空间并保持页面整洁。它通过折叠和展开不同的内容区域，使得用户可以逐个查看或隐藏信息。这种效果通常用...
手风琴特效
11-14
在实现手风琴特效中，我们可以使用`transition`属性来平滑地改变内容区域的高度，实现打开和关闭的动画效果。此外，`display`属性可以控制内容的可见性，配合JavaScript实现点击时切换显示状态。 jQuery是一款广泛...
CSS3带动画效果的手风琴特效
04-02
本文将深入探讨一种基于CSS3的动画效果——“手风琴特效”，并分析其在菜单列表中的应用。 手风琴特效是一种常见的用户界面设计元素，通常用于空间有限但内容较多的情况。它通过折叠和展开的方式，让用户可以逐个...
炫酷的js手风琴效果
01-19
这篇博文先通过Javascript做一个简单的手风琴效果，让大家对手风琴效果有一定的了解；紧接着，我们换jquery做类似的手风琴效果。前面的两个例子都很简单，接下来要放大招了，我想用JQ或是原生的JS去做类似淘宝网中用...
手风琴垂直菜单 二级源码
04-29
简单的二级菜单，自己可以直接拿来用，很好改写
过渡-手风琴
堇年
08-24 97
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; ...
css 手风琴菜单效果，图片动画
jiaweimin123的博客
10-16 530
Title KungFu Panda <img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085908528.jpg" style="width: 630px; height: 315px;
手风琴页面html,滑动手风琴的制作（只涉及HTML+css）
weixin_36212732的博客
06-05 958
这次作业是通过HTML和css制作滑动手风琴，使鼠标指在图标时让内容通过滑动的方式显示出来。滑动手风琴展示图标可以通过阿里巴巴矢量图标库寻找，也可以通过链接bootcdn中的图标库，如下图BootCDN在中进行链接链接本次学习的重点内容为以下几点：1.制作出滑动效果，运用的是transition标签,transition为过渡动画效果，可用来设置滑动效果代码如下图transition2.使用消除浮...
Tips_信息列表（手风琴）效果的多种实现方法
weixin_33928137的博客
10-30 88
效果图： 一.纯CSS实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo01</title> 6 <style> 7...
CSS学习笔记——背景属性
利用Transition过渡完成手风琴菜单
07-04 420
本文是作者本人学习过程中的笔记总结，如若文中有不正确或需要补充的地方，欢迎在评论区中留言。 1. 背景颜色 2. 背景图片 3. 背景重复 4. 背景定位 5. 背景附着 6. 背景缩放 7. 多背景 8. 综合写法 9. 注意事项 10. 背景图替换插入图 11. 文字隐藏方法 12. 精灵图 ...
JQuery基础练习：简单的手风琴效果
u011277123的博客
11-29 375
web前端与后端 2016-11-25 21:44 使用JQuery实现一个非常简单的手风琴效果，大牛请忽略。做的比较粗糙，希望见谅。代码如下： li:hover{cursor: pointer;} #list{ width: 200px; margin: 0 auto; border: 1px solid black; } #list ul
vue 移动端 transition 实现手风琴动画
最新发布
05-17
在 Vue 移动端开发中，可以使用 transition 动画来实现手风琴效果。 首先，在 HTML 中定义一组需要展开和收缩的元素，可以使用 v-for 指令来动态渲染元素，并绑定一个 active 变量表示当前展开元素的索引： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值