使用javascript旋转文本-在IE8中不起作用
我是用bootstrap构建的,有一个页眉区域,它在左侧旋转文本,并利用bootstrap的旋转木马在右侧旋转图像。正文只有几个字的副本,主字要大一些,要有脚本,下面有几个字是不同类型的。我正在使用的javascript会旋转第一个大字,但会将其他字堆叠在一起。在大多数浏览器中,一切都正常工作,但IE8给了我这个问题 有人能看看我的代码,给我一些帮助来解决这个问题吗 这是我的html:使用javascript旋转文本-在IE8中不起作用,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我是用bootstrap构建的,有一个页眉区域,它在左侧旋转文本,并利用bootstrap的旋转木马在右侧旋转图像。正文只有几个字的副本,主字要大一些,要有脚本,下面有几个字是不同类型的。我正在使用的javascript会旋转第一个大字,但会将其他字堆叠在一起。在大多数浏览器中,一切都正常工作,但IE8给了我这个问题 有人能看看我的代码,给我一些帮助来解决这个问题吗 这是我的html: <div class="rotator"> <ul> <li
<div class="rotator">
<ul>
<li class="show">
<p class="script">Discover<br/><br/>
<span class="captionwhite">the many uses<br/>of glass block</span></p>
</li>
<li class="show">
<p class="script">Create<br/><br/>
<span class="captionwhite">a beautiful<br/>shower enclosure</span></p>
</li>
<li class="show">
<p class="script">Illuminate<br/><br/>
<span class="captionwhite"> your bathroom<br/>naturally</span></p>
</li>
</ul>
</div>
这是javascript:
function theRotator() {
//Set the opacity of all images to 0
$('div.rotator ul li').css({opacity: 0.0});
//Get the first image and display it (gets set to full opacity)
$('div.rotator ul li:first').css({opacity: 1.0});
//Call the rotator function to run the slideshow, 3000 = change to next image after 3 seconds
setInterval('rotate()',3000);
}
function rotate() {
//Get the first image
var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));
if ( current.length == 0 ) current = $('div.rotator ul li:first');
//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
//Un-comment the 3 lines below to get the images in random order
//var sibs = current.siblings();
//var rndNum = Math.floor(Math.random() * sibs.length );
//var next = $( sibs[ rndNum ] );
//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 3000);
//Hide the current image
current.animate({opacity: 0.0}, 3000)
.removeClass('show');
};
$(document).ready(function() {
//Load the slideshow
theRotator();
$('div.rotator').fadeIn(3000);
$('div.rotator ul li').fadeIn(3000); // tweek for IE
});
任何帮助都将不胜感激 根据我的评论:
CSS规则是。为此,您必须使用专有的(仅适用于IE浏览器)。或者更容易地使用jQuery的.hide()或设置CSS规则display:none
在进一步查看代码之后,最好的选择可能是使用jQuery的一些内置函数。您需要将大部分opacity
用法(通过使用或)替换为多个jQuery选项之一,具体取决于您使用opacity
设置所做的操作
对于.css({opacity:0.0})
(立即隐藏内容),您应该使用:
对于.css({opacity:1.0})
(立即显示内容),您应该使用:
对于使用opacity
(缓慢显示或隐藏)调用.animate()
,应改为使用和。您似乎已经在JS代码底部使用.fadeIn()
进行IE调整。您可以用与.animate({opacity:1.0},3000)
相同的方式使用它,只需使用.fadeIn(3000)
。这同样适用于.fadeOut(3000)
而不是.animate({opacity:0.0},3000)
。如果未明确传递持续时间的数字,则.fadeIn()
、.fadeOut()
和.animate()
上的默认持续时间在400
处相同
jQuery函数链接到jQueryAPI文档,您可以在这些页面中找到完整的使用文档和示例
如果您在IE8中使用
.fadeIn()
或.fadeOut()
时遇到问题,可能会有所帮助。CSS规则是无效的。为此,您必须使用专有的Microsoft过滤器
规则(该规则仅适用于IE浏览器)。或者,使用jQuery的.hide()
或设置CSS规则display:none,这要容易得多代码>。非常感谢您的回复!你能给我一个如何使用微软过滤规则编码的例子吗?或者如何实现jQuery的.hide()?我发布了一个解决所有这些问题的答案。如果可以的话,您不想使用专有的Microsoft筛选器,似乎有些已在IE9+中被弃用。@ajp15243 jquery识别要应用的浏览器filter:代码>或-ms过滤器:代码>而不是不透明度:
(至少上次测试时效果很好)。@guilhermanascimento在.animate()
和.css()
中都能做到这一点吗?谢谢你的帮助!我做了你建议的调整,现在它在IE8中工作得很好@特雷西:很高兴听到!确保标记解决您问题的答案(使用绿色复选标记),以便遇到您问题的其他人可以看到为您解决问题的答案。
function theRotator() {
//Set the opacity of all images to 0
$('div.rotator ul li').css({opacity: 0.0});
//Get the first image and display it (gets set to full opacity)
$('div.rotator ul li:first').css({opacity: 1.0});
//Call the rotator function to run the slideshow, 3000 = change to next image after 3 seconds
setInterval('rotate()',3000);
}
function rotate() {
//Get the first image
var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));
if ( current.length == 0 ) current = $('div.rotator ul li:first');
//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
//Un-comment the 3 lines below to get the images in random order
//var sibs = current.siblings();
//var rndNum = Math.floor(Math.random() * sibs.length );
//var next = $( sibs[ rndNum ] );
//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 3000);
//Hide the current image
current.animate({opacity: 0.0}, 3000)
.removeClass('show');
};
$(document).ready(function() {
//Load the slideshow
theRotator();
$('div.rotator').fadeIn(3000);
$('div.rotator ul li').fadeIn(3000); // tweek for IE
});
myElement.hide();
myElement.show();