如何使用jquery检测内联css样式(停止滑块)
How to detect inline css style with jquery (to stop slider)?
我有一个滑块,当单击下一个/上一个按钮时,它会产生动画。我有一个想法,如果滑块达到动画中的最小值(0px)和最大值(1200px),就停止该函数。如何检测jquery添加的内联css?或者有什么关于如何"停止"滑块的想法吗?
我的代码:
$('.next').click(function(){
$('#portfolio-slider').animate({
left: "-=400",
}, 300);
});
$('.prev').click(function(){
$('#portfolio-slider').animate({
left: "+=400",
}, 300);
});
Js报价:http://jsfiddle.net/tDrqT/3/
谢谢!
您可以使用检查位置
$('#portfolio-slider').position().left
这里的小提琴
这里有一个很好的小提琴,它在第一个和最后一个图像上显示了滑块的限制。它使用jQUery position()
函数来获取滑块的位置以及最后一个图像的位置,并使用该信息来限制滑块的移动。
http://jsfiddle.net/tDrqT/14/
//get the position and width of the last image
var lastPicPos = $('#portfolio-slider').children('img').last().position().left;
function getLeftPos() {
return - $('#portfolio-slider').position().left;
}
var onUpdate = function() {
$('#info').text("0 <= " + getLeftPos() + " <= " + lastPicPos);
};
onUpdate();
$('.next').click(function(){
if (getLeftPos() < lastPicPos) {
$('#portfolio-slider').animate({
left: "-=400",
}, 300, null, onUpdate);
}
});
$('.prev').click(function(){
if (getLeftPos() > 0) {
$('#portfolio-slider').animate({
left: "+=400",
}, 300, null, onUpdate);
}
});
您还必须在我用来显示一些输出的html顶部添加一个div:
<div id="info"></div>
$('.next').click(function(){
$('#portfolio-slider').animate({
left: "-=400",
}, 300);
console.log($('#portfolio-slider').css('left'));
});
$('.prev').click(function(){
$('#portfolio-slider').animate({
left: "+=400",
}, 300);
console.log($('#portfolio-slider').css('left'));
});
http://jsfiddle.net/tDrqT/5/
在调用animate之前,可以实现一个简单的检查,查看滑块是否位于最后一个图像。
您可以检查类似的样式属性
if($('#portfolio-slider').attr('style') === 'left: -800px;')
return
这是一把小提琴
http://jsfiddle.net/tDrqT/7/
使用.animate()
和step
:
var min = 0,
max = 800;
$('.next').click(function(){
$('#portfolio-slider').animate({
left: "-=400",
}, {
step: function (now, fx) {
console.log(now);
if(parseInt(now) <= (max*-1)){
$(this).stop();
fx.end = fx.start;
}
}
}, 300);
});
$('.prev').click(function(){
$('#portfolio-slider').animate({
left: "+=400",
}, {
step: function (now, fx) {
if(parseInt(now) >= min){
$(this).stop();
fx.end = fx.start;
}
}
}, 300);
});
演示:http://jsfiddle.net/dirtyd77/AfBkg/
我会直接检查位置。只要在左边找0,在右边找-800。只有在不经过边的情况下才执行动画。
$('.next').click(function(){
if ($('#portfolio-slider').position().left === -800) {
return;
}
$('#portfolio-slider').animate({
left: "-=400",
}, 300);
});
$('.prev').click(function(){
if ($('#portfolio-slider').position().left === -0) {
return;
}
$('#portfolio-slider').animate({
left: "+=400",
}, 300);
});
小提琴http://jsfiddle.net/uFMfa/1/
相关文章:
- 如果文本字段为空,则使用JavaScript应用CSS样式
- FF和Chromium中CSS样式按钮的外观差异
- CSS样式属性留空
- 使用javascript单击同一按钮,在两种样式之间更改css值
- 用CSS在CKEditor中设置预览样式
- Javascript+动态菜单+当前链接样式(CSS)+基于PHP的网站
- 如何使用jQuery转换所有带有动态类的内联样式css
- iFrame 中的实时预览和保存样式.css每 30 秒一次
- 如何更改 jquery UI 数据选择器的样式 (CSS)
- 在Javascript中设置左样式CSS属性以移动滑块
- css+jQuery样式.css切换器,用于新的jQuery版本
- Chrome 29样式/Css问题
- 如何更改工具提示的样式/css
- 字体Awesome与半样式CSS
- Angular2组件样式/css没有被浏览器应用在ngafterviewit中
- 如何改变网页内容,而不删除任何样式/css/图形
- 使用Javascript在不影响打印样式的情况下更改显示样式(CSS)
- 使用 Get Time Javascript 更改样式 CSS
- 自定义下拉列表样式(CSS/JS与ASP.. NET c#连接)
- 为输入类型文件按钮添加禁用样式(css)