Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
accordion slider
kobe
first
kobe
second
kobe
third
kobe
fouth
kobe
fifth
css
@import url("https://fonts.googleapis.com/css?family=Quicksand&display=swap"); * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Quicksand", sans-serif; color: #000; } li { list-style: none; } input, button, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none; } textarea { resize: vertical; } input[type='checkbox'], input[type='radio'] { display: none; } input[type='submit'], input[type='button'], label, button, select { cursor: pointer; } .section-wrap { padding: 3%; } .wrapper { max-width: 960px; width: 100%; padding: 0 3%; margin: 0 auto; } .header { text-align: center; } .header .title { position: relative; font-weight: bold; font-family: "Quicksand", sans-serif; font-size: 40px; letter-spacing: .1em; color: #233567; } .footer { text-align: center; color: #233567; font-size: 20px; } .slider-wrap { width: 100%; height: 300px; background: transparent; position: relative; overflow: hidden; border-radius: 20px; } .slider-wrap .slider { position: absolute; top: 0; display: flex; width: 100%; height: 100%; } .slider-wrap .slider .index { width: 50px; height: 100%; color: #fff; font-weight: bold; border: 1px solid #233567; background: #315b96; border-radius: 25px; } .slider-wrap .slider .index span { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } .slider-wrap .slider .img { display: flex; justify-content: center; align-items: center; color: #233567; font-weight: bold; width: calc(100% - 40px); border-radius: 25px; background: #ffdfdf; transition: width .7s; } .slider-wrap .slider.current { width: 100%; } .slider-wrap .slider.current .img { width: calc(100% - 40px); }
JavaScript
const $sliderWrap = $('.slider-wrap'); const $slider = $sliderWrap.find('.slider'); const $index = $slider.find('.index'); const $img = $slider.find('.img'); const sliderNum = $slider.length; let indexWidth = $index.width() + 1; let sliderWrapWidth = $sliderWrap.width(); const duration = 300; $(window).on('resize', function() { sliderWrapWidth = $sliderWrap.width(); console.log(sliderWrapWidth) }); for(let i = 0; i < sliderNum; i++) { $slider.eq(i).css({ left: i * indexWidth, width: sliderWrapWidth - (i * indexWidth) }); } $index.on('click', function() { let num = $index.index(this); let start = sliderWrapWidth - (indexWidth * (sliderNum - num - 1)); for(let i = num; i > 0; i--){ $slider.eq(i).stop().animate({left: indexWidth * i}, duration, 'swing'); } for(let i = num; i < sliderNum; i++) { $slider.eq(i + 1).stop().animate({left: start + (indexWidth * (i - num))}, duration, 'swing'); } })
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery手风琴滑块-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号