添加CSS到jquery帮助
我真的很新的jquery,我真的没有时间看它是如何工作的(我用PHP工作了很多)我想做一个jQuery幻灯片,但我不知道如何添加z-索引这里的图片:http://www.albavid.com/new/index.html添加CSS到jquery帮助
我可以看到的jquery添加一些CSS元素,如不透明性,宽度..等 我试图更大的z索引对当前图像和较低的z索引添加到右侧图像和左图像。
任何人都可以告诉我如何使用jquery添加css,以便当前图像(最大)位于顶部,然后位于其他位置。
这个替换您的网页上的javascript:
我$(el).css('z-index', 5)
和$(el).css('z-index', 0)
加入currentCss
,beforeCss
和afterCss
。
jQuery(document).ready(function(){
jQuery('#flip').jcoverflip({
current: 2,
beforeCss: function(el, container, offset){
$(el).css('z-index', 0);
return [
$.jcoverflip.animationElement(el, { left: (container.width()/2 - 210 - 110*offset + 20*offset)+'px', bottom: '20px' }, { }),
$.jcoverflip.animationElement(el.find('img'), { width: Math.max(10,200-10*offset*offset) + 'px' }, {})
];
},
afterCss: function(el, container, offset){
$(el).css('z-index', 0);
return [
$.jcoverflip.animationElement(el, { left: (container.width()/2 + 110 + 110*offset)+'px', bottom: '10px' }, { }),
$.jcoverflip.animationElement(el.find('img'), { width: Math.max(10,200-10*offset*offset) + 'px' }, {})
];
},
currentCss: function(el, container){
$(el).css('z-index', 5);
return [
$.jcoverflip.animationElement(el, { left: (container.width()/2 - 200)+'px', bottom: 0 }, { }),
$.jcoverflip.animationElement(el.find('img'), { width: '400px' }, { })
];
},
change: function(event, ui){
jQuery('#scrollbar').slider('value', ui.to*25);
}
});
jQuery('#scrollbar').slider({
value: 50,
stop: function(event, ui) {
if(event.originalEvent) {
var newVal = Math.round(ui.value/25);
jQuery('#flip').jcoverflip('current', newVal);
jQuery('#scrollbar').slider('value', newVal*25);
}
}
});
});
您可以通过选择元素,并使用css
方法
假设一个元素改变内嵌CSS没有z-index的,还是不同的,并且希望将其更改为5
$("#elementId").css('z-index', 5);
另一个选择是设立一定的CSS样式类前手和改变类的某些元素,即(currentShown,下一部影片等)
尝试将元素的position
属性设置为relative
,否则它们将被视为static
并忽略所有设置为z-index。
一个LITTEL位更详细的请, – TooCooL 2011-03-28 19:44:48
它看起来像z-index
应该适用于<li>
,而不是<img>
。
我怎么能添加它给李?更多信息?因为我已经在索引中包含jquery文件和jquery脚本,但我不知道它是如何工作的,它看起来像它的OOP,并且该类是在index.html中启动的,但我不知道我真的离jquery很远。我将需要一些更多的细节帮助。 谢谢你的时间。 – TooCooL 2011-03-28 19:40:43
你也可以通过它使用不同类型的使用addclass()工作 - removeClass()切换效果效果很好,如果你已经很熟悉CSS覆盖
你能帮我详细介绍一下,因为我尝试添加z-index,但是无论我做什么脚本停止工作!我可能不在正确的轨道上。 感谢您的时间! – TooCooL 2011-03-28 19:47:26
我提高了接受的答案,因为我认为这是您最好的情况下保持与现有的脚本,您可以根据图像的宽度切换类,并添加z-index父 - 但最终这就像重新写一点点脚本 – clairesuzy 2011-03-28 21:19:53
你可以改变的了的z-index元素通过使用.css()函数。
$("#elem").css('z-index','1000');
但是,有两个更好的选择是要么定义样式所需的元素的CSS类及它们之间进行切换,或使用一些不错的jQuery插件播放幻灯片。
Z-index'ing的<li>
代替<img>
是修复所述重叠的解决方案。然而,由于<li>
是动态的,并且在彼此之前和之后翻转,所以从左到右依次应用z-index
将不能解决他的问题。
解决这个问题需要更多的操作来在jquery中调用,但不需要额外的工作。需要发生的事情是,jQuery将当前的<li>
应用于高于批处理的其余部分的滑块上每个事件的z-index
。
由于我没有访问到你的代码,你基本上要应用以下逻辑: 无论<li>
在前面它应该有一个z-index:1
和所有其他<li>
S的关系有z-index:0
。这应该发生在滑块的每个更改中。
@mcgrailm:给他一个休息的男人,你不能学会如何游泳,除非你跳进游泳池。
是的我知道,但对我来说,现在它错了时间在错误的地方,这就是为什么我不能跳到游泳池!无论如何..谢谢你的时间 – TooCooL 2011-03-28 19:56:13
我不知道如何谢谢你!我会尝试阅读脚本,看看你做了什么。 我不知道我能为你做什么因为你为我节省了很多时间 – TooCooL 2011-03-28 19:52:57