時間軸JScript在IExplorer中不起作用

Question

我在網站中使用時間軸JScript，原始版本在Internet Explorer中運行沒有問題，但是當我將其移至我的網站時，它不再可以在IE中運行（其他瀏覽器工作正常）。 我不知道為什么。

通過不工作，我的意思是，當我單擊右鍵或一年時，它到達了我網站的頂部，而不是轉到那張幻燈片，但是在其他瀏覽器中，它運行良好。

原始版本使用的是jQuery v1.6，我使用的是Jquery-1.7.1.min。

另一個問題是我的<h1>標記在Chrome瀏覽器中無法正常工作，我是否丟失了任何東西？ 還要鏈接代碼。

好的，添加Google字體樣式表后，我的<h1>標記現在可以工作了，但是時間軸JScript在IE中仍然不起作用。

 #header h1 { /*font-family: "Arial Black", Gadget, sans-serif;*/ /*font-family: "Veneer" Gadget, sans-serif;*/ font-family: "Maven pro", sans-serif; font-size: 70px; font-weight:900; line-height:70px; text-shadow: 3px 3px 5px rgba(122, 131, 175, 1); color:#FFF; text-transform: uppercase; text-align: center; margin: 0 auto; z-index:1; } 

---

 /* ---------------------------------- jQuery Timelinr 0.9.3 tested with jQuery v1.6+ ©2011 CSSLab.cl free for any use, of course... :D instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/ ---------------------------------- */ jQuery.fn.timelinr = function(options) { // default plugin settings settings = jQuery.extend({ orientation: 'horizontal', // value: horizontal | vertical, default to horizontal containerDiv: '#timeline', // value: any HTML tag or #id, default to #timeline datesDiv: '#dates', // value: any HTML tag or #id, default to #dates datesSelectedClass: 'selected', // value: any class, default to selected datesSpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) lrzj_lineDiv: '#lrzj_line', // value: any HTML tag or #id, default to #lrzj_line lrzj_lineSelectedClass: 'selected', // value: any class, default to selected lrzj_lineSpeed: 200, // value: integer between 100 and 1000 (recommended), default to 200 (fast) lrzj_lineTransparency: 0.2, // value: integer between 0 and 1 (recommended), default to 0.2 lrzj_lineTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) prevButton: '#prev', // value: any HTML tag or #id, default to #prev nextButton: '#next', // value: any HTML tag or #id, default to #next arrowKeys: 'false', // value: true/false, default to false startAt: 1 // value: integer, default to 1 (first) }, options); $(function() { // setting variables... many of them var howManyDates = $(settings.datesDiv + ' li').length; var howManylrzj_line = $(settings.lrzj_lineDiv + ' li').length; var currentDate = $(settings.datesDiv).find('a.' + settings.datesSelectedClass); var currentIssue = $(settings.lrzj_lineDiv).find('li.' + settings.lrzj_lineSelectedClass); var widthContainer = $(settings.containerDiv).width(); var heightContainer = $(settings.containerDiv).height(); var widthlrzj_line = $(settings.lrzj_lineDiv).width(); var heightlrzj_line = $(settings.lrzj_lineDiv).height(); var widthIssue = $(settings.lrzj_lineDiv + ' li').width(); var heightIssue = $(settings.lrzj_lineDiv + ' li').height(); var widthDates = $(settings.datesDiv).width(); var heightDates = $(settings.datesDiv).height(); var widthDate = $(settings.datesDiv + ' li').width(); var heightDate = $(settings.datesDiv + ' li').height(); // set positions! if (settings.orientation == 'horizontal') { $(settings.lrzj_lineDiv).width(widthIssue * howManylrzj_line); $(settings.datesDiv).width(widthDate * howManyDates).css('marginLeft', widthContainer / 2 - widthDate / 2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0, $(settings.datesDiv).css('marginLeft').indexOf('px'))); } else if (settings.orientation == 'vertical') { $(settings.lrzj_lineDiv).height(heightIssue * howManylrzj_line); $(settings.datesDiv).height(heightDate * howManyDates).css('marginTop', heightContainer / 2 - heightDate / 2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0, $(settings.datesDiv).css('marginTop').indexOf('px'))); } /* 代碼整理：懶人之家 www.lanrenzhijia.com 轉載請注明出處 */ $(settings.datesDiv + ' a').click(function(event) { event.preventDefault(); // first vars var whichIssue = $(this).text(); var currentIndex = $(this).parent().prevAll().length; // moving the elements if (settings.orientation == 'horizontal') { $(settings.lrzj_lineDiv).animate({ 'marginLeft': -widthIssue * currentIndex }, { queue: false, duration: settings.lrzj_lineSpeed }); } else if (settings.orientation == 'vertical') { $(settings.lrzj_lineDiv).animate({ 'marginTop': -heightIssue * currentIndex }, { queue: false, duration: settings.lrzj_lineSpeed }); } $(settings.lrzj_lineDiv + ' li').animate({ 'opacity': settings.lrzj_lineTransparency }, { queue: false, duration: settings.lrzj_lineSpeed }).removeClass(settings.lrzj_lineSelectedClass).eq(currentIndex).addClass(settings.lrzj_lineSelectedClass).fadeTo(settings.lrzj_lineTransparencySpeed, 1); // now moving the dates $(settings.datesDiv + ' a').removeClass(settings.datesSelectedClass); $(this).addClass(settings.datesSelectedClass); if (settings.orientation == 'horizontal') { $(settings.datesDiv).animate({ 'marginLeft': defaultPositionDates - (widthDate * currentIndex) }, { queue: false, duration: settings.datesSpeed }); } else if (settings.orientation == 'vertical') { $(settings.datesDiv).animate({ 'marginTop': defaultPositionDates - (heightDate * currentIndex) }, { queue: false, duration: settings.datesSpeed }); } }); /* 代碼整理：懶人之家 www.lanrenzhijia.com 轉載請注明出處 */ $(settings.nextButton).bind('click', function(event) { event.preventDefault(); if (settings.orientation == 'horizontal') { var currentPositionlrzj_line = parseInt($(settings.lrzj_lineDiv).css('marginLeft').substring(0, $(settings.lrzj_lineDiv).css('marginLeft').indexOf('px'))); var currentIssueIndex = currentPositionlrzj_line / widthIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0, $(settings.datesDiv).css('marginLeft').indexOf('px'))); var currentIssueDate = currentPositionDates - widthDate; if (currentPositionlrzj_line <= -(widthIssue * howManylrzj_line - (widthIssue))) { $(settings.lrzj_lineDiv).stop(); $(settings.datesDiv + ' li:last-child a').click(); } else { if (!$(settings.lrzj_lineDiv).is(':animated')) { $(settings.lrzj_lineDiv).animate({ 'marginLeft': currentPositionlrzj_line - widthIssue }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li').animate({ 'opacity': settings.lrzj_lineTransparency }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li.' + settings.lrzj_lineSelectedClass).removeClass(settings.lrzj_lineSelectedClass).next().fadeTo(settings.lrzj_lineTransparencySpeed, 1).addClass(settings.lrzj_lineSelectedClass); $(settings.datesDiv).animate({ 'marginLeft': currentIssueDate }, { queue: false, duration: settings.datesSpeed }); $(settings.datesDiv + ' a.' + settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); } } } else if (settings.orientation == 'vertical') { var currentPositionlrzj_line = parseInt($(settings.lrzj_lineDiv).css('marginTop').substring(0, $(settings.lrzj_lineDiv).css('marginTop').indexOf('px'))); var currentIssueIndex = currentPositionlrzj_line / heightIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0, $(settings.datesDiv).css('marginTop').indexOf('px'))); var currentIssueDate = currentPositionDates - heightDate; if (currentPositionlrzj_line <= -(heightIssue * howManylrzj_line - (heightIssue))) { $(settings.lrzj_lineDiv).stop(); $(settings.datesDiv + ' li:last-child a').click(); } else { if (!$(settings.lrzj_lineDiv).is(':animated')) { $(settings.lrzj_lineDiv).animate({ 'marginTop': currentPositionlrzj_line - heightIssue }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li').animate({ 'opacity': settings.lrzj_lineTransparency }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li.' + settings.lrzj_lineSelectedClass).removeClass(settings.lrzj_lineSelectedClass).next().fadeTo(settings.lrzj_lineTransparencySpeed, 1).addClass(settings.lrzj_lineSelectedClass); $(settings.datesDiv).animate({ 'marginTop': currentIssueDate }, { queue: false, duration: settings.datesSpeed }); $(settings.datesDiv + ' a.' + settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); } } } }); /* 代碼整理：懶人之家 www.lanrenzhijia.com 轉載請注明出處 */ $(settings.prevButton).click(function(event) { event.preventDefault(); if (settings.orientation == 'horizontal') { var currentPositionlrzj_line = parseInt($(settings.lrzj_lineDiv).css('marginLeft').substring(0, $(settings.lrzj_lineDiv).css('marginLeft').indexOf('px'))); var currentIssueIndex = currentPositionlrzj_line / widthIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0, $(settings.datesDiv).css('marginLeft').indexOf('px'))); var currentIssueDate = currentPositionDates + widthDate; if (currentPositionlrzj_line >= 0) { $(settings.lrzj_lineDiv).stop(); $(settings.datesDiv + ' li:first-child a').click(); } else { if (!$(settings.lrzj_lineDiv).is(':animated')) { $(settings.lrzj_lineDiv).animate({ 'marginLeft': currentPositionlrzj_line + widthIssue }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li').animate({ 'opacity': settings.lrzj_lineTransparency }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li.' + settings.lrzj_lineSelectedClass).removeClass(settings.lrzj_lineSelectedClass).prev().fadeTo(settings.lrzj_lineTransparencySpeed, 1).addClass(settings.lrzj_lineSelectedClass); $(settings.datesDiv).animate({ 'marginLeft': currentIssueDate }, { queue: false, duration: settings.datesSpeed }); $(settings.datesDiv + ' a.' + settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); } } } else if (settings.orientation == 'vertical') { var currentPositionlrzj_line = parseInt($(settings.lrzj_lineDiv).css('marginTop').substring(0, $(settings.lrzj_lineDiv).css('marginTop').indexOf('px'))); var currentIssueIndex = currentPositionlrzj_line / heightIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0, $(settings.datesDiv).css('marginTop').indexOf('px'))); var currentIssueDate = currentPositionDates + heightDate; if (currentPositionlrzj_line >= 0) { $(settings.lrzj_lineDiv).stop(); $(settings.datesDiv + ' li:first-child a').click(); } else { if (!$(settings.lrzj_lineDiv).is(':animated')) { $(settings.lrzj_lineDiv).animate({ 'marginTop': currentPositionlrzj_line + heightIssue }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li').animate({ 'opacity': settings.lrzj_lineTransparency }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li.' + settings.lrzj_lineSelectedClass).removeClass(settings.lrzj_lineSelectedClass).prev().fadeTo(settings.lrzj_lineTransparencySpeed, 1).addClass(settings.lrzj_lineSelectedClass); $(settings.datesDiv).animate({ 'marginTop': currentIssueDate }, { queue: false, duration: settings.datesSpeed }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.datesDiv + ' a.' + settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); } } } }); /* 代碼整理：懶人之家 www.lanrenzhijia.com 轉載請注明出處 */ // keyboard navigation, added since 0.9.1 if (settings.arrowKeys == 'true') { if (settings.orientation == 'horizontal') { $(document).keydown(function(event) { if (event.keyCode == 39) { $(settings.nextButton).click(); } if (event.keyCode == 37) { $(settings.prevButton).click(); } }); } else if (settings.orientation == 'vertical') { $(document).keydown(function(event) { if (event.keyCode == 40) { $(settings.nextButton).click(); } if (event.keyCode == 38) { $(settings.prevButton).click(); } }); } } /* 代碼整理：懶人之家 www.lanrenzhijia.com 轉載請注明出處 */ // default position startAt, added since 0.9.3 $(settings.datesDiv + ' li').eq(settings.startAt - 1).find('a').trigger('click'); }); }; 

 .timeline_bg { width: 100%; height: 1080px; position: relative; z-index: 400; } .timeline_wrapper { width: 960px; height: 1080px; margin: 0 auto; } #lrzj_x { width: 960px; height: 350px; overflow: hidden; margin: 0 auto; position: relative; background: url(../image/dot.gif) left 45px repeat-x; } #lrzj_x a { color: #117FB2; -webkit-mask-box-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0))); text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } #lrzj_x a:hover { color: #ffcc00; } #lrzj_x a.selected { color: #ffcc00; } #dates { width: 960px; height: 60px; overflow: hidden; } #dates li { list-style: none; float: left; width: 100px; height: 50px; font-size: 24px; text-align: center; background: url(../image/biggerdot.png) center bottom no-repeat; } #dates a { line-height: 38px; padding-bottom: 10px; } #dates .selected { font-size: 38px; } #lrzj_line { width: 800px; height: 350px; overflow: hidden; } #lrzj_line li { width: 800px; height: 350px; list-style: none; float: left; } #lrzj_line li img { float: left; margin: 10px 30px 10px 50px; } #lrzj_line li h1 { color: #ffcc00; font-size: 48px; margin: 20px 0; text-shadow: #000 1px 1px 2px; } #lrzj_line li p { font-size: 14px; margin-right: 70px; font-weight: normal; line-height: 22px; text-shadow: #000 1px 1px 2px; } #next, #prev { position: absolute; top: 0; font-size: 70px; top: 200px; width: 50px; height: 70px; background-position: 0 0; background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; } #next:hover, #prev:hover { background-position: 0; } #next { right: 10px; background-image: url(../image/navigate-right-icon.png); } #prev { left: 10px; background-image: url(../image/navigate-left-icon.png); } #next.disabled, #prev.disabled { opacity: 0.2; } 

 <div class="timeline_bg"> <div class="timeline_wrapper"> <div class="title"> <div class="title_line"></div> <h5>My Timeline</h5> <div class="title_line"></div> </div> <!-- title end here --> <div id="lrzj_x"> <ul id="dates"> <li><a href="#">01-04</a> </li> <li><a href="#">04-06</a> </li> <li><a href="#">08-09</a> </li> <li><a href="#">09-10</a> </li> <li><a href="#">2010</a> </li> <li><a href="#">2011</a> </li> <li><a href="#">2012</a> </li> <li><a href="#">2013</a> </li> <li><a href="#">2014</a> </li> </ul> <ul id="lrzj_line"> <li id="#01-04"> <img src="images/1.png" width="256" height="256" /> <h1>2001-2004</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#04-06"> <img src="images/2.png" width="256" height="256" /> <h1>1930</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#08-09"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#09-10"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#2010"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#2011"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#2012"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#2013"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#2014"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> </ul> <a href="#" id="next">+</a> <a href="#" id="prev">-</a> </div> <!--time line script end here --> </div> <!-- timeline wrapper --> </div> <!-- time line end here --> 

Answer 1

只需在函數末尾添加(jQuery) 。

工作提琴