我在IE 8上遇到奇怪的问题,其中动画文本无法在IE 8和IE 9上运行。以下是出现此问题的网站示例。
我已经在Mozila Firefox,谷歌Chrome,Apple Safari,Opera和IE 10,IE 11上测试过,除了在IE 8和IE 9上找不到任何东西我发现javascript正在崩溃。我能更好地解决jquery的问题,也没有找到像这个动画文本一样的jquery。
以下是该页面的代码示例。
HTML
<table width="896" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="3" colspan="2"></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/logo.png" width="220" height="115" /></td>
<td valign="bottom">
<ul id="dropdown">
<li><a href="home.html">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="profile.html">Company Profile</a></li>
<li><a href="founders.html">Founders</a></li>
<li><a href="board.html">Board of Directors</a></li>
<li><a href="investors.html">investors</a></li>
<li><a href="quaterly.html">Quaterly Result </a></li>
<li><a href="share.html">Distribution of Shareholding</a></li>
<li><a href="corporate.html">Corporate Governance</a></li>
<li><a href="report.html">Annual Report</a></li>
<li><a href="code.html">Code of Conduct</a></li>
</ul>
<li><a href="#">Products</a>
<ul>
<li><a href="calcined.html">Calcined Petroleum Coke</a></li>
<li><a href="electrode.html">Electrode Carbon Paste</a></li>
<li><a href="tamping.html">Tamping Paste</a></li>
</ul>
</li>
<li><a href="social.html">Social Responsibility</a></li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="contactinf.html">Contact Information</a></li>
<li><a href="careers.html">Careers</a></li>
<li><a href="queries.html">Queries</a></li>
</ul>
</ul> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="4" colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div>
<div class="banner rounded-btm">
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
<li><img src="images/6.jpg" alt="" /></li>
</div>
<div id="text-scroll" class="tlt">India's Leading Producer of Calcinated Petroleum Coke</div>
</div>
</td>
</tr>
<tr>
<td height="10" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="headerbelow"> Welcome to India Carbon Limited<br />
<br /></td>
</tr>
<tr>
<td><table width="648" border="0">
<tr>
<td width="5%"> </td>
<td width="84%" class="bodytxt"><p><strong>INDIA CARBON LIMITED (ICL)</strong>, India’s leading producer of Calcined Petroleum Coke, provides the right blend of people & products to serve the needs of the Aluminum, Steel, & other Carbon consuming industries.
</p>
<p><strong>Calcined Petroleum Coke (CPC)</strong> is used extensively as Anode in Alumina Smelters, as Soderberg's Electrode for Ferroalloy Industries, and in the manufacturing of Graphite/ Graphite Electrodes, and Thermal Paste for Ferro Alloys & allied industries in Submerged Arc Furnaces. </p>
<p><strong>CPC</strong> is also used in various Steel Industries for - Melting of Steel , Recurburisation and for making Special Steels & Alloys. </p>
</td>
<td width="11%"> </td>
</tr>
</table> </td>
<td width="235" rowspan="3" valign="top" class="rightmenu">
<ul id="example" class="tlt">
<li>Pride</li>
<li>Passion</li>
<li>Belief</li>
<li>Creativity</li>
<li>Integrity</li>
<li>Team Work</li>
<li>Ownership</li>
<li>Winning</li>
</ul>
<p> </p>
<div align="center" class="rightheader"><a href="core.html" target="_blank" class="pageheader style1">Click Here</a> </div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="footer"><div align="center">Copyright © 2012 India Carbon Ltd | All rights reserved<br />
developed & maintained by RightClik</div></td>
</tr>
</table>
的JavaScript
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/juizDropDownMenu-1.5.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>
<script src="js/responsiveslides.js"></script>
<script src="js/animateText.js"></script>
<script type="text/javascript">
$(function () {
$('.tlt').textillate({
loop: true,
minDisplayTime: 2000,
initialDelay: 2,
autoStart: true,
inEffects: ['flipInX'],
outEffects: [ 'fadeOut' ],
in: {
effect: 'flipInX',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false
},
out: {
effect: 'fadeOut',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
}
});
$('#example').textillate({
loop: true,
minDisplayTime: 3000,
initialDelay: 1,
autoStart: true,
inEffects: ['fadeInLeft'],
outEffects: [ 'rollOut' ],
in: {
effect: 'fadeInLeft',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false
},
out: {
effect: 'rollOut',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
}
});
$(".banner").responsiveSlides({speed: 2500});
$("#dropdown").juizDropDownMenu({
'showEffect' : 'fade',
'hideEffect' : 'slide'
});
});
</script>
<script type="text/javascript">
var textObjects = [
{
offset: 0,
duration: 3000,
animation: 'leftToRight',
positions: {
start: {
'font-size': '20px',
'font-weight': 600,
color: '#000',
}
}
},
{
offset: 2000,
duration: 3000,
animation: 'explode',
positions: {
start: {
'font-size': '20px',
color: '#000',
}
}
},
{
offset: 3500,
duration: 3000,
animation: 'rightToLeft',
positions: {
start: {
top:'25px',
left:'-20px',
'font-size': '30px',
'font-weight': 600,
color: '#000',
}
}
}
],
options = {
repeat: true
},
animations = {
topToBottom: {
positions: {
start: {
bottom: '50%',
left: '0%',
},
1: {
bottom: '60%'
}
}
}
};
$("#example").animateText(textObjects, options, animations);
</script>
我在JS <script src="js/jquery.textillate.js"></script>
中收到错误它在IE 8上显示错误并将所有其他jquery与自身崩溃,因此整个网站都搞砸了设计和其他一切。我对它非常困惑而且无法想象该怎么做。任何人都可以指导我这件事。或者帮我找到支持IE 8和IE 9的Jquery,还包括所有其他浏览器。
很抱歉,我无法发布代码并在JSFiddle上显示现场演示,因此我提供了上面显示的网站的完整网址。