jQuery 实现小米手风琴图片案例

最新推荐文章于 2022-11-20 20:53:52 发布
最新推荐文章于 2022-11-20 20:53:52 发布
阅读量577 收藏 5
点赞数
分类专栏： JQuery 文章标签： jQuery实现小米手风琴图片案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43434300/article/details/88992244
版权

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
	            margin: 0;
	            padding: 0;
	        }
	        ul {
	            list-style: none;
	            width: 1300px;
	        }
	        #box {
	            width: 1200px;
	            height: 400px;
	            border: 2px solid red;
	            margin: 100px auto;
	        }
            #box li {
                width: 240px;
                height: 400px;
                /*border: 1px solid #000;*/
                float: left;
            }
		</style>
 		<script src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			$(function(){
				for(var i=0;i<$("#box li").length;i++){
					$("#box li").eq(i).css("background-image","url(img手风琴/"+(i+1)+".jpg)");
				}
				$("#box li").mouseenter(function(){
					$(this).stop().animate({width:800}).siblings().stop().animate({width:100});
				}).mouseleave(function(){
					$("#box li").stop().animate({width:240});
				});
			});
		</script>
	</head>
	<body>
	    <div id="box">
	        <ul>
	            <li></li>
	            <li></li>
	            <li></li>
	            <li></li>
	            <li></li>
	        </ul>
   		</div>
	</body>
</html>

素材：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
效果图：
在这里插入图片描述
在这里插入图片描述

豆皮没有豆
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【JavaScript】简易小米手风琴案例
往前爬的蜗牛
04-12 766
首选，我们在拿到案例的时候，要了解清楚案例的实现的步骤，大致需要用到效果、样式等等。。。 其次，我们还要考虑案例在运行中的所产生的bug，这就要我们好好的处理好这些细节的问题。 分析： 静态结构动态渲染 背景样式：背景样式可以设置图片居中显示 鼠标移入：当前图片的宽度变大，其它的图片的宽度变小 鼠标移出：所有图片的宽度还原为原始值 效果的优化：仔细解决，能说明原因 最终实现的效果 结构 //css样式 <style> * { margin:
小米手风琴
qq_42039912的博客
03-09 186
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; } ...
仿小米手风琴案例.zip
01-26
仿小米手风琴案例web开发
手风琴效果案例（jQuery）
qq_64182180的博客
11-20 3688
本案例会使用jQuery动画来实现一个简单的手风琴效果。
jq实现小米手风琴案例
qq_42039912的博客
03-28 197
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } u...
jquery实现手风琴案例
11-21
手风琴案例练习，供大家参考，具体内容如下 显示效果 重点： 1.鼠标进入事件mouseenter 鼠标离开事件mouseleave 2. 再执行下一次操作前都要先通过.stop() 停止动画 3.sublings()选择当前事件外的兄弟事件 完整代码 ...
jquery手风琴实现图片切换
06-10
本教程将详细讲解如何利用jQuery实现一个手风琴式的图片切换效果，该效果同时具备自动播放和手动播放功能，用户可以通过点击文字来控制图片的切换。 首先，我们需要在HTML中设置基本的结构。手风琴效果通常涉及到可...
jQuery手风琴图片轮播切换
04-07
分析这些文件，我们可以学习到如何组织结构、编写样式以及编写jQuery脚本来完成手风琴图片轮播切换的实现。具体的实现细节可能包括图片的预加载、触摸事件的支持、箭头导航以及自动播放等附加功能。 总结，jQuery手...
jQuery图片滑动手风琴代码
06-24
本文将深入探讨“jQuery图片滑动手风琴代码”，这是一种利用jQuery实现的创新性图片展示方式，适用于创建动态且吸引人的用户体验。 手风琴效果是一种常见的UI设计元素，它允许内容以折叠或展开的方式进行显示，有效...
jQuery--手风琴案例
欣欣酱博客
01-03 500
在ul中设置4个li，每次点击一个li都会简单的弹出一个盒子，当点击下一个li时，上一个展示出来的盒子自动消失，保证只有当前li展示出盒子 也就是说：siblings兄弟的盒子全部hide()，只有当前的show() 实现的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c
jQuery实现的简单手风琴效果示例
12-03
本文实例讲述了jQuery实现的简单手风琴效果。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jQuery手风琴效果</title> <style> .wrap{ width: 200px;height: auto;margin:50px auto;border-radius: 5px } ul,li,h4{list-style: none;margin: 0;padding: 0} .wrap>ul{b
jQuery实现王者荣耀手风琴案例（知识块讲解+案例）
世界和我们都不该止步于此
03-11 5034
jQuery效果动画显示和隐藏效果滑动效果事件的切换动画队列的停止淡入淡出效果自定义动画手风琴案例实践HTML我们搭建好框架CSS样式jQuery来实现动画效果的交互（重点）
JQ实现手风琴案例
deasec的博客
04-28 2047
JQ实现手风琴案例 看过原生js打的手风琴案例感觉太麻烦，所以亲手打了一个 用jq实现的手风琴案例。 首先 我们来看html部分 不用设置img的样式 所以我就不需要上面命名，直接一个大盒子包着五个小盒子里面再包着一个img。 3.上面是css的样式 Css样式 虽然很简单 但是还是要有几点注意的。类为.Box的 div 为最大的盒子，其实它按道理来说应该设置刚好为1200px的 5*240=1200 设置1300px 是为了...
前端学习笔记-jQuery-jQuery动画（王者荣耀手风琴案例）
qq_36434637的博客
09-24 1321
案例：王者荣耀手风琴 分析： 鼠标经过某个小li 有两步操作： 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出 <!doctype html> <html> <head> <meta charset="utf-8"> <titl...
jQuery实现 手风琴图片切换效果（ 超简单）
weixin_43297321的博客
06-30 2213
<style> /* 隔行表格 */ table{ border-collapse: collapse; } td{ width: 100px; height: 20px; border: 1px solid tomato; } /* 手风琴 */ ul{ width: 800px; height: 150px; backgro
手风琴案例
weixin_43750162的博客
04-05 409
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0px; margin: 0px; } body{ ...
手风琴效果（jQuery）
sunflower_li的博客
03-16 2453
简单的手风琴效果实现实际比看起来简单，只是改变当前的元素宽度和其他元素的宽度，其代码如下（图片什么的都要换成自己噢） Title *{margin: 0;padding: 0;} .box{width: 100%;height: 260px;margin: 10px auto;} ul li{lis
jquery手风琴案例
最新发布
11-18
以下是一个简单的jQuery手风琴案例： ```html <!DOCTYPE html> <html> <head> <title>jQuery手风琴案例</title> <style type="text/css"> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 400px; } .box { flex-basis: 200px; height: 200px; margin: 10px; background-color: #ccc; transition: flex-basis 0.5s ease-in-out; } .box:hover { flex-basis: 400px; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

豆皮没有豆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值