使用在 IE8 中不起作用的旋转文本
rotating text using not working in IE8
我正在使用引导程序构建,并且有一个标题区域,该区域在左侧旋转文本,并利用引导程序的轮播在右侧旋转图像。 文字只有几个字的文案,主要字较大,文字较大,下面有几字不同类型。 我正在使用的javascript按原样旋转第一个大单词,但将其他单词堆叠在一起。 在大多数浏览器中一切正常,但IE8给了我这个问题。
任何人都可以查看我的代码并给我任何帮助来解决这个问题吗?
这是我的 html:
<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>
这是我的 css:
/* rotator in-page placement */
div.rotator {
position:relative;
}
/* rotator css */
div.rotator ul li {
position:absolute;
list-style: none;
}
这是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
});
任何帮助将不胜感激!
从我的评论:
IE8 不支持 CSS 不透明度规则。您必须为此使用专有的Microsoft过滤规则(仅适用于IE浏览器(。或者,更容易的是,使用 jQuery 的 .hide(( 或设置 CSS 规则显示:none;。
在多看了一下你的代码之后,你最好的选择可能是使用jQuery的一些内置函数。您需要将大多数opacity
用法(通过使用.css()
或.animate()
(替换为几个jQuery选项之一,具体取决于您对opacity
设置执行的操作。
对于.css({opacity: 0.0})
(立即隐藏内容(,您应该改用.hide()
:
myElement.hide();
对于.css({opacity: 1.0})
(立即显示内容(,您应该改用.show()
:
myElement.show();
对于使用opacity
(缓慢显示或隐藏(.animate()
调用,您应该改用.fadeIn()
和.fadeOut()
。您似乎已经在 JS 代码底部使用 .fadeIn()
进行 IE 调整。您可以像.animate({opacity: 1.0}, 3000)
一样使用它,只需改用.fadeIn(3000)
即可。 代替.animate({opacity: 0.0}, 3000)
的.fadeOut(3000)
也是如此。默认持续时间在.fadeIn()
、.fadeOut()
和.animate()
上相同,如果你没有明确传递持续时间的数字,则在400
。
jQuery 函数链接到 jQuery API 文档,您可以在这些页面中找到完整的使用文档和示例。
如果您在IE8中遇到.fadeIn()
或.fadeOut()
的问题,这个问题可能会有所帮助。
- D3围绕饼图旋转文本
- 如何检查鼠标点击是否位于JavaScript中HTML5画布上的旋转文本内
- 使用javascript在三维中旋转文本和图片
- 画布 - 为旋转文本添加动画效果
- D3 旋转文本 :在 Chrome 中平滑
- 使用在 IE8 中不起作用的旋转文本
- HTML5 画布:绘制的换行旋转文本的自动字体大小
- 使用JQuery旋转文本会闪烁
- Threejs:计算旋转文本的边界框
- CSS3转换的替代方案:在CSS2或Javascript中旋转(xdeg)以旋转文本
- HTML画布使用javascript旋转文本而不移动背景图像
- HTML表头中的垂直(旋转)文本
- JavaScript CSS旋转文本方向
- 在KineticJS Wheel上旋转文本
- 使用Javascript从Mysql数据库旋转文本
- 使用Javascript旋转文本
- 更好的SVG旋转文本呈现
- JQuery或Javascript旋转文本内的文本与文本数组的DIV
- 可编辑旋转文本的定位有问题
- 旋转文本容器自动高度