我在我的网站上使用时间轴JScript，并且原始版本在Internet Explorer中运行没有问题，但是当我将它移动到我的网站时，它无法再在IE中运行（其他浏览器工作正常）。我无法弄清楚原因。
通过不工作，我的意思是，当我点击右键或一年时，它会转到我网站的顶部而不是转移到那一年幻灯片，但在其他浏览器中，它运行良好。
原始版本使用的是jQuery v1.6，我使用的是Jquery-1.7.1.min。
另一个问题是我的<h1>代码在Chrome浏览器中无法正常运行，我是否遗漏了任何内容？还链接代码。
好的，我的<h1>代码在添加Google字体样式表后现在正在运行，但时间线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 -->