我这里有一个siple代码:
$('.aktualita_sipky').toggle(function() {
$(this).parent().find('.aktualita_content').animate({
height: "100%",
}, 1500 );
}, function() {
$(this).parent().find('.aktualita_content').animate({
height: "120px",
}, 1500 );
});
现在当我点击它作为第一个'切换'时,它只是立即显示(没有动画),当我点击第二个'切换'时,它很好地向上滑动.
有没有办法用这个漂亮的动画将它滑到100%？
我正在尝试将下一个和上一个箭头显示在产品滑块旁边,就像在Slick Slider示例中一样.但我的示例似乎没有加载适当的字体来实现这一点.
这是我的代码:
HTML
<div class="slider">
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100">
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100">
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100">
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100">
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100">
</div>
<div>
<img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100">
</div>
</div>
CSS
body{
background-color: #fff;
}
.slider{
margin: 60px auto;
width: 500px;
}
div{
height: 100%;
}
p{
text-align: center;
font-size: 12px;
color: white;
}
JavaScript的
$(document).ready(function(){
$('.slider').slick({
centerMode: true,
centerPadding: '60px',
dots: false,
infinite: true,
speed: 300, …我发现了两个优秀的jquery插件,用于为Web表单生成一个滑块,在不支持javascript的浏览器中关闭样式会很好地降级.
第一个是Jquery.UI版本:http://ui.jquery.com/demos/slider/#steps
第二个是滑块的选择元素:http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/
但是我需要创建一个滑块,它不仅可以将滑块分成相等的部分.
例如,假设我有以下数字范围:
800,1000,1100,1200,1300,1400,1500
我希望滑块在800到1000之间有一个很大的差距,然后在1100-1500之间有较小的间隙
所以滑块看起来有点像这样:
800 ---- 1000--1100--1200--1300--1400--1500
我希望它能降级到下拉,所以问题是有没有人知道支持这个的插件或者有最好的实现方法的建议,定制我自己的filamentgroup插件卷等.
更新:使用灯丝组的滑块进行黑客攻击,无论如何它通过JQuery UI的滑块实现了手柄.所以看起来像修改JQuery.UI它的self是唯一可用的选项.将在代码中挖掘,看看我是否能找到需要改变的必要位.如果在此期间任何人有任何想法!
我试图找出与WPF Scrollbar thumb元素大小相关的算法.
可以使用Scrollbar.ViewportSize属性调整thumb元素的大小,但它又与the Scrollbar.Minimum和Scrollbar.Maximumvalues相关.
到目前为止我发现的是:
对于最小值和最大值0和10,ViewportSize为:
0 - 拇指最小尺寸
5 - 拇指大约可用轨道的25%
10 - 拇指大约可用轨道的50%
100 - 拇指大约75%的可用轨道
1000 - 拇指大约90%的可用轨道
10000 - 拇指填充可用的轨道.
[注意:这些数字仅来自我粗略的试错!]
理想情况下,我希望能够有一个算法,其中给定滚动条的最小值和最大值我可以将拇指大小设置为可用轨道的x%.
有人能帮忙吗？
谢谢.
我希望自定义基本WPF的外观TickBar.我想知道是否有一种简单的方法可以使用控件模板:
我希望用数字代替刻度线上的刻度.我希望数字的位置对应于滑块的值(很像链接中的图片).
我已经搜索了一个建议,我发现创建了一个继承自TickBar并覆盖它的OnRender方法的类.
我更愿意找到一个不涉及这个问题的解决方案.我真的希望使用控件模板来做到这一点.所以,如果有一个这样的解决方案,建议将不胜感激!:)
我有一个滑块,它的值绑定到某个属性,并且属性一直在更新它.在拖动[thumb on]滑块的同时,我想阻止滑块的这个更新值进行绑定,直到用户完成它的拖动.
Slider上有没有任何属性可以做到这一点,或者我需要为此编写代码？
提前致谢!
我使用GUIDE创建了一个MATLAB GUI.我有一个带回调函数的滑块.我注意到这个回调,它应该执行'滑块移动',实际上只有在滑块移动并释放鼠标后才会运行.
是否有一种方法可以在拖动滑块时运行脚本,以便实时更新绘图？我认为需要做一些事情来阻止脚本运行太多次.
有人能给我一个通过滑块改变音量的示例代码吗？我搜索过,很多教程都要求我创建一个全新的课程.有没有更简单的方法？
谢谢!
如何在jQuery滑块上添加刻度线？假设我有1到10的值,我怎么能在每个值上添加勾号？
我在SO上看过类似的帖子,但他们都建议使用插件,我想通过与其他元素进行大量交互来对其进行硬编码.
谢谢!
我试图在我现有的AngularJS应用程序中使用anuglar-slider.
我在这里跟踪了作者的评论
我从作者的github下载了以下文件(在Head标签中)并添加到我的 index.html
HTML代码:
<head>
<link rel="stylesheet" href="css/angular-slider.css">
<script src="js/vendor/angular-slider.js"></script>
</head>
<body>
<slider floor="10" ceiling="60" ng-model-low="lowValue" ng-model-high="highValue"></slider>
</body>
App.js(角度代码).我根据作者的指示添加了第二行,我怀疑我确实在那里做错了
var app = angular.module('myApp', [])
angular.module('uiSlider', []);
app.constant('Config',
{
baseURL : "http://blah",
httpTimeout : 36000
});
app.config(function($logProvider) {
$logProvider.debugEnabled(true);
});
//and some other app specific code follows
我在浏览器中看不到任何滑块渲染.但是,应用程序中较旧的Angular特定功能仍然有效,浏览器控制台中没有错误.
如果您在上面找不到问题,请随时在AngularJS应用程序中建议任何其他方法来实现范围滑块.
我是AngularJS的新手
如果您希望我在这里发布作者的库文件代码,请告诉我.
slider ×10
jquery ×4
wpf ×3
css ×2
javascript ×2
.net ×1
android ×1
angularjs ×1
callback ×1
html ×1
jquery-ui ×1
matlab ×1
matlab-guide ×1
scrollbar ×1
wpf-controls ×1