jquery循环cssBefore，animIn，animOut不接受相对值
jquery循环cssBefore，animIn，animOut不接受相对值
提问于 2014-09-23 23:56:15
我用jquery循环插件进行了自定义幻灯片转换，使用选项: cssBefore、animIn、animOut。
在固定宽度的桌面视图上，有两个宽度不同的幻灯片。有一个媒体查询断点，其中一个在另一个下面显示，并且应该得到一个100%的宽度，到目前为止，这是很好的，除了一件事：
因为循环选项只接受数字值(对于px)，所以转换不适应100%的宽度。
的问题是：
我怎样才能让相对价值被接受呢？
如果这是不可能的，是否还有另一个滑块提供与下面示例中所示的相同的转换？
我的守则：
HTML：
<div id="all">
<div id="s1" class="pics">
<img src="http://malsup.github.com/images/beach1.jpg" />
<img src="http://malsup.github.com/images/beach2.jpg" />
</div>
<div id="s2" class="pics">
<img src="http://malsup.github.com/images/beach3.jpg" />
<img src="http://malsup.github.com/images/beach1.jpg" />
</div>
</div>Javascript：
$(function() {
$('#s1').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: -300, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: -300 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
$('#s2').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: 700, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: 700 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
});CSS：
#all {width: 1000px;}
#s1 {width: 30%;}
#s2 {width: 70%;}
.pics {
float: left;
overflow: hidden;
height: 250px;
}
img {
display: block;
height: 250px;
width: 100%;
}
@media (max-width: 600px) {
#s1, #s2 {
float: none;
width:100%;
}
}回答 1
Stack Overflow用户
发布于 2014-09-24 02:02:31
我不确定是否有插件，但您可以使用Media查询，例如：
@media (max-width: 600px) {
#s2 {
width:300px;
font-size:14px;
}
}当屏幕大小仅小于或等于600px时，将执行此css。如果屏幕大小大于600px，则将执行主css。
有关媒体查询的完整文档：查询
媒体查询演示：http://www.webdesignerwall.com/demo/media-queries/
我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26011507
复制相关文章
相似问题
获取每个循环jQuery中的相对值
jQuery:按相对值移动元素
jQuery位置不返回相对值？
jQuery使用相对值改变背景位置
如何使用jQuery更改浮动相对值
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
