手风琴相册

最新推荐文章于 2021-06-16 00:13:19 发布
最新推荐文章于 2021-06-16 00:13:19 发布
阅读量281 收藏 1
点赞数
分类专栏： css jquery javascript 文章标签： 手风琴相册
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39173989/article/details/77857578
版权
css 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
jquery
6 篇文章 0 订阅
订阅专栏
javascript
4 篇文章 0 订阅
订阅专栏
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴式相册-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
#wrap {
width:800px;
height:400px;
margin:0 auto;
border:5px solid #009999;
border-radius:10px;
margin-top:10px;
position:relative;
overflow:hidden;
}
input {
display:none;
}
label {
width:300px;
height:400px;
position:absolute;
top:0;
transition:0.5s;
}
label:nth-of-type(1) {
background:url(http://www.jq22.com/img/cs/300x500-1.png) no-repeat;
left:0;
}
label:nth-of-type(2) {
background:url(http://www.jq22.com/img/cs/300x500-2.png) no-repeat;
left:100px;
}
label:nth-of-type(3) {
background:url(http://www.jq22.com/img/cs/300x500-3.png) no-repeat;
left:200px;
}
label:nth-of-type(4) {
background:url(http://www.jq22.com/img/cs/300x500-4.png) no-repeat;
left:300px;
}
label:nth-of-type(5) {
background:url(http://www.jq22.com/img/cs/300x500-5.png) no-repeat;
left:400px;
}
label:nth-of-type(6) {
background:url(http://www.jq22.com/img/cs/300x500-6.png) no-repeat;
left:500px;
}
input:checked~label {
transform:translateX(200px);
-webkit-transform:translateX(200px);
}
</style>
</head>
<body>
<div id="wrap">
    <form action="">
        <label for="input1"></label>
        <input type="radio" id="input1" name="img">


        <label for="input2"></label>
        <input type="radio" id="input2" name="img">


        <label for="input3"></label>
        <input type="radio" id="input3" name="img">


        <label for="input4"></label>
        <input type="radio" id="input4" name="img">


        <label for="input5"></label>
        <input type="radio" id="input5" name="img">


        <label for="input6"></label>
        <input type="radio" id="input6" name="img">
    </form>
</div><script>
</script>
</body>
</html>
第九年
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯 JS 实现手风琴效果相册
04-27
通过 ES6 Class 实现风琴相册效果。 纯 JS 处理样式，无需分别引入 JS 和 CSS 文件。 通过传入父级 DOM 元素 id 进行绑定。 开发相册容器宽高配置，若未手动进行配置，则默认以传入的父级 DOM 的宽高为准。 传入的图片，默认以容器高度为准，等比例进行缩放。
手风琴效果（vue实现）
Yanfengting的博客
10-03 9318
效果图： 源码1： &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;am
手风琴式相册
weixin_30530939的博客
08-21 152
《html》 <div class='accordion'> <ul> <li><img src='images/1.jpg'></li> <li><img src='images/2.jpg'></li> <li><img src='images/3.jpg'><...
超级简单Vue实现手风琴布局
csdn_zsdf的博客
04-28 9135
说一下效果： 全部展开效果： 展开都的话四等分收起一个，其余的三等分，收起两个，其余的等分，展开一个，占据所有空间。 全部折叠效果： 展开一个效果： 这一块一块的总共是组件复用了四次。所以单独看一个列表就好了（已截止） 结构如下 <template> <div class="foldable-list" v-if="toggle"> // 注意 hea...
Vue的手风琴组件--优雅的展示图片以及文字的方式
weixin_34365417的博客
07-18 1102
这是今天看到的一个不错的vue组件。感觉用来做首页图片和文字的展示，或者是宣传网站对产品的不同特性的展示都是一个很生动的展现方法。vue-accordion的设计风格和轮播图类似。它可以支持用户自定义样式类。 安装 通过NPM安装 npm install vue-accordion 将它引入到你的应用中 import Vue from...
VUE简易手风琴显示效果
Keyrt的博客
05-27 2580
超级简单的手风琴效果，代码核心是根据current值添加active，mouseenter传入index值，将index值赋予current，这样就是添加一个互斥的active，从而实现手风琴效果 <template> <div class="ranking-list"> <div class="ranking-title"> <s...
手风琴式相册图片展开效果
weixin_34144450的博客
12-05 171
在线演示 本地下载
html5手机手风琴相册,纯js带弹性动画的手风琴图片相册特效
weixin_32508515的博客
06-16 393
这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效。该手风琴图片相册在鼠标滑过时，相应的图片会水平展开，而图片的说明文字则会垂直滑动上来，形成一些视觉差的感觉。使用方法在页面中引入slider.js文件HTML结构该手风琴图片画廊的HTML结构如下。 标题描述文字... 标题描述文字.........CSS样式为该手风琴图片画廊添加如下的CSS样式。htm...
排序算法的较量：快速排序与归并排序的深度剖析
最新发布
08-11
数据结构是计算机科学中的一个基本概念，它指的是数据的组织、管理和存储方式，以及对数据的操作。数据结构使得数据的访问和修改更加高效和有序。常见的数据结构包括： 1. **数组**（Array）：一种线性数据结构，可以存储相同类型的元素，并通过索引访问。 2. **链表**（Linked List）：一种线性数据结构，由一系列节点组成，每个节点包含数据部分和指向下一个节点的指针。 3. **栈**（Stack）：一种后进先出（LIFO, Last In First Out）的数据结构，只能在一端进行添加或删除操作。 4. **队列**（Queue）：一种先进先出（FIFO, First In First Out）的数据结构，允许在一端添加元素，在另一端删除元素。 5. **哈希表**（Hash Table）：通过键值对存储数据的数据结构，可以快速地通过键来访问数据。 6. **树**（Tree）：一种层次结构的数据结构，每个节点有零个或多个子节点，通常用于表示具有层次关系的数据。 7. **图**（Graph）：由顶点（节点）和边组成，可以表示复杂的关系和网络结构。 每种数据结构都有其
基于SSM++jsp的房屋租售网站
08-11
内容概要 基于SSM++jsp的房屋租售网站是一款集成了房源信息发布、搜索、在线预约看房、用户管理等功能的综合性租售平台。该网站采用了Spring、SpringMVC、MyBatis（SSM）框架与JSP技术相结合的方式，确保了前后端分离的模块化设计，具备高效、稳定的性能。用户可以通过网站发布或查找租售房源，使用详细的筛选条件，如地理位置、房屋类型、价格范围等，轻松找到合适的房源。网站还支持在线留言、预约看房等互动功能，提升了用户的体验和沟通效率。 适用人群 该网站适用于房地产中介公司、独立房产经纪人、房东以及广大有租房或购房需求的用户。对于中介公司和经纪人来说，网站提供了一个便捷的房源管理平台，可以批量上传房源信息，实时更新房源状态。对于房东，网站使其能够自主发布房屋信息并直接与潜在租客或买家沟通。对于租房或购房者，网站提供了全面的房源信息和方便的搜索工具，帮助他们快速找到心仪的房屋。 使用场景及目标 该网站主要应用于房地产租售行业。中介公司和经纪人可以通过网站集中管理房源，减少线下信息传递的繁琐，提升房源曝光率。房东可以自主发布房屋信息，无需依赖中介，直接接触潜在客户。租房或购
ThinkPHP中HTTP响应的艺术：定制化你的数据交响曲
08-11
ThinkPHP 是一个免费开源的、快速且简单的面向对象的轻量级 PHP 开发框架，它是为了敏捷 WEB 应用开发和简化企业应用开发而设计的。自2006年初诞生以来，ThinkPHP 一直秉承简洁实用的设计原则，在保持出色的性能和至简代码的同时，也注重易用性，并遵循 Apache2 开源协议发布 。 ThinkPHP 框架的特点包括： - 支持 MVC 架构模式，有助于代码的组织和重用。 - 提供了丰富的功能，如数据库访问层、模板引擎、缓存机制、插件机制、角色认证和表单处理等。 - 易于扩展，支持命令行指令扩展。 - 拥有 ORM 功能，支持多种数据库。 - 支持 RESTful 风格的 URL，方便 API 开发。 - 提供了灵活的配置功能，采用 PHP 返回数组方式定义配置，支持多种配置层次。 ThinkPHP 框架适用于多种服务器环境，包括 Windows、Unix 和 Linux，并且支持 PHP 5.0 以上版本以及多种数据库类型，如 MySQL、PostgreSQL 和 SQLite，同时也支持 PDO 扩展 。 此外，ThinkPHP 框架还提供了路由功能，允许开发
永磁同步电机带锁相环的滑模观测器
08-11
永磁同步电机带锁相环的滑模观测器
mysql-community-5.7.17-1.el6.src.rpm
08-11
mysql-community-5.7.17-1.el6.src
网店快速合同报价生成工具
08-11
可以手动填输入需要、合同或报价单的客户公司、联系、联系电话、收件地址、开户行、账号、我方签订公司、产品信息等、签订时间、价格、即可自动生成报价合同、还可以生成报价单、生成三方报价、
软件开发编程重要培训资料分享17软件开发编程开发技术资料.zip
08-11
软件开发编程重要培训资料分享17软件开发编程开发技术资料.zip
mediapipe-0.8.10-cp37-cp37m-win_amd64.whl
08-11
mediapipe-0.8.10-cp37-cp37m-win_amd64.whl
uniapp 手风琴
09-05
uniapp手风琴是一个可以展开和折叠的UI组件，通过点击元素展开一个内容区域，同时自动收缩其他已展开的内容区域，保证每次最多只有一个元素展开。这个效果可以通过使用CSS实现。 可以使用子组件collapse-item来实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值