标签: slide
如何更改jQuery手风琴的动画风格？
有没有办法改变jQuery手风琴使用的默认动画？它似乎是"幻灯片",但我想使用Bounce或Drop效果.
这是我目前的代码:
$("#accordion").accordion({
autoHeight: false,
collapsible: true,
event: 'click',
active: 4
});
我想将它从幻灯片更改为掉落或反弹.
推荐指数
解决办法
查看次数
HTML标签拖放滑块示例？
我需要的是一个简单的标签系统,如果您mouseDown在其内容上,您不选择HTML文本,但开始滑动标签.如果滑动超过一半,则假定您滑动到下一个选项卡.如何使用jQuery做这样的事情？
更新: 示例代码:
JS:
var $tabs = $('.tab');
var $contents = $('.content');
var contentWidth = $contents.eq(0).outerWidth(true);
var $slider;
var DURATION = 600;
var EASING_METHOD = 'easeInOutCubic';
$tabs.data('currentTabId', 1);
$slider = $contents.wrapAll('<div />').parent();
$slider.css({ 'width' : contentWidth * $contents.length,
'marginLeft' : 0 });
function calcMargin(distance) {
var margin = parseInt($slider.css('marginLeft').replace('px', ''), 10);
return margin + contentWidth * distance * -1;
}
function changeTab(tabId) {
var distance;
if($tabs.data('currentTabId') !== tabId) {
distance = tabId - $tabs.data('currentTabId');
$slider.stop(true, true);
$slider.animate(
{ …推荐指数
解决办法
查看次数
HTML/jQuery表:水平滚动,修复第一个(左)列
我有一个表格,显示一列测试名称,其中包含与测试相关的各种测试数据的几列(无限数量).由于将有多组数据,我想限制可以看到的数量,并让用户能够水平滚动以显示/隐藏不同的数据集.
Jquery表列滑动效果的接受答案具有我正在寻找的那种滑动效果,但是如何修复最左边的名称列？有很多数据,所以我不想克隆两个表,正如互联网上其他地方所建议的那样.
为名称创建一个固定表,为数据结果创建一个可滚动表,但行高在可接收的数据量上是可变的(单元格中可能有多行文本),因此对齐将被抛弃.
另外,我不想要默认的Internet滚动条.我有左/右箭头图像,我将用它来控制滚动,就像我上面发布的示例.
我花了大约4个小时在StackOverflow和互联网的其余部分寻找答案,但我还没有发现任何合适的东西...任何帮助将不胜感激,谢谢!
编辑:绝对定位左列导致表的其余部分左移到左列下方(隐藏第一列数据).添加与第一列具有相同内容的"镜像"列可以正常工作; 问题是,当数据列的单元格高于相应的名称单元格时,绝对定位的名称单元格无法看到该事实并自行调整大小.思考？
推荐指数
解决办法
查看次数
iOS 5.1中的内存警告后,UISplitView新的幻灯片弹出窗口变为全屏
我在这里很新.我在UISplitView中遇到了新的iOS 5.1幻灯片弹出窗口问题.(在5.1之前,主视图控制器以弹出框形式显示,但现在它只是从左侧滑动.)当我的设备处于纵向模式并且它收到内存警告时,主视图控制器卸载; 当我按下工具栏按钮在主视图中滑动时,它会再次加载.然而,在内存警告之后,它以全屏显示,而不仅仅是原始主视图的大小.(当我将设备旋转到横向并回到纵向时,它会恢复正确的尺寸.)
在iOS 5.1之前,它总是以正确的大小呈现在popover中.
任何人都有一个想法,如何纠正这个？
我试图设置主视图的帧大小,但它没有解决问题.
任何帮助深表感谢!
推荐指数
解决办法
查看次数
如何使用jquery在加载时滑动整个页面
当它改变时我想把整个页面滑下来.我想这样做的方法是创建一个垂直幻灯片,在单击链接时播放,并在页面加载时再次播放？到目前为止,我只能创建一个影响特定DIV的幻灯片.我也喜欢它垂直滑动.任何想法将不胜感激!
推荐指数
解决办法
查看次数
jquery移动幻灯片反向转换显示转换中间的空白页
出于某种原因,在ipad上,我的jquery移动幻灯片在页面之间的过渡是完美的,当它是默认向左滑动[slide]时.但是当它向右滑动[向后滑动]时,在过渡期间页面之间似乎有一个完整的空白页.
<div data-role="page" id="zine1">
<div data-role="content">
VARIOUS HTML CONTENT
</div><!-- /content -->
</div>
<div data-role="page" id="zine2">
<div data-role="content">
VARIOUS HTML CONTENT
</div><!-- /content -->
</div>
<div data-role="page" id="zine3">
<div data-role="content">
VARIOUS HTML CONTENT
</div><!-- /content -->
</div>
<script>
$(document).ready(function() {
window.now = 1;
//get an Array of all of the pages and count
windowMax = $('div[data-role="page"]').length;
doBind();
});
// Functions for binding swipe events to named handlers
function doBind() {
$('div[data-role="page"]').live("swipeleft", turnPage);
$('div[data-role="page"]').live("swiperight", turnPageBack);
}
function …推荐指数
解决办法
查看次数
Slick Carousel - centerMode 没有多余的幻灯片
我想根据图片制作一张幻灯片（使用 Slick.js），我想制作centerMode:true并focusOnSelect:true...
但问题是会有两个多余的幻灯片（左和右）。我如何删除它们？
我已经尝试设置centerMode为false. 不会有多余的幻灯片，但所选幻灯片将位于最左侧。因此，它为我设定的是很重要的centerMode对true，因为我想在中心选定的幻灯片。
对不起，我的英语不好。
任何帮助将不胜感激。
谢谢
推荐指数
解决办法
查看次数
实现特定幻灯片的 Swiper 链接
我正在使用 iDangero Swiper 并尝试创建指向特定幻灯片的链接，我将使用它通过唯一链接链接所有幻灯片。
我怎样才能做到这一点？
这是我的代码：
http://codepen.io/RogerHN/pen/LkKgXB
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://idangero.us/swiper/dist/css/swiper.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5">
<button type="button" class="btn btn-primary btn-lg btn-block btn-title">
<a class="white" href="#">
<span class="glyphicon glyphicon-chevron-left back" aria-hidden="true"></span>
</a>
TITLE
</button>
<a href="#">Swipe to slide 3</a>
<div id="content">
<div class="nav-center">
<div class="nav-bg">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#one" data-toggle="tab">First Tab</a></li>
<li><a href="#two" data-toggle="tab">Second Tab</a></li>
<li><a href="#three" data-toggle="tab">Third Tab</a></li>
</ul>
</div>
<div …推荐指数
解决办法
查看次数
'height: fit-content' 没有 CSS 过渡
我用来transition: height 500ms向元素添加动画，该元素通过按钮从height: 0to滑动打开height: 100px，反之亦然。
由于元素的内容是动态添加的，我不知道它的大小，我想改为切换到height: fit-content。这样，元素将始终具有正确的大小来显示其内容。
可悲的是，这会禁用动画。
如何将动画与大小适合其内容的 div 元素结合在一起？
以下代码段显示了行为：
document.querySelector('button')
.addEventListener(
'click',
() => document.querySelectorAll('div')
.forEach(div => div.classList.toggle('closed')));div {
background-color: lightblue;
border: 1px solid black;
overflow: hidden;
transition: height 500ms;
}
div.closed {
height: 0 !important;
}
div.div1 {
height: 100px;
}
div.div2 {
height: fit-content;
}<button type="button">toggle</button>
<h1>'height: 100px' => 'height: 0'</h1>
<div class="div1">
some text<br />
even more text<br />
so much text
</div>
<br> …推荐指数
解决办法
查看次数
将 AWS 架构图标导入 Google Slides
正在研究 Google Slides（Google 文档的一部分），并希望使用AWS 架构图标集。
该页面提供了对包括 PowerPoint 在内的许多应用程序的支持，但我没有找到有关 Google 幻灯片最佳实践使用的信息。谷歌搜索也没有发现任何东西。
我可以下载图标，然后手动单独添加到我的演示文稿（根据需要），但希望有一个“内置调色板”之类的解决方案。任何有知识的人都可以建议最佳方法以及是否有比根据需要手动上传更好的方法来做到这一点。
推荐指数
解决办法
查看次数
标签 统计
slide ×10
jquery ×5
animation ×2
html ×2
transition ×2
accordion ×1
coding-style ×1
css ×1
html-table ×1
icons ×1
ios5.1 ×1
ipad ×1
javascript ×1
load ×1
popover ×1
size ×1
slick.js ×1
swiper.js ×1
tabs ×1