gpt4 book ai didi

javascript - 时间轴 JScript 在 IExplorer 中不起作用

转载 作者:行者123 更新时间:2023-11-28 08:06:22 28 4
gpt4 key购买 nike

我在我的网站上使用timeline 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 -->

最佳答案

只需在函数末尾添加(jQuery)

Working fiddle

关于javascript - 时间轴 JScript 在 IExplorer 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29467870/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com