javascript - Marquee 在 IE 中拖动我的 css <ul> 内容在 chrome 中完美工作-6ren

javascript - Marquee 在 IE 中拖动我的 css
内容在 chrome 中完美工作

转载作者：行者123 更新时间：2023-11-28 12:02:32

我正在学校制作网页下拉菜单，并编写了完美的脚本。但是我的菜单被我的字幕拖走了。我已经在 JSfiddle 上发布了代码。链接在这里... http://jsfiddle.net/v4NA2/4/#&togetherjs=OoovMU3HFy

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"           "http://www.w3.org/TR/html4/loose.dtd">
<title>Lobos Online : Welcome</title>
<body onload="menu.css" style="background-image: url(bg_bluetiles.gif);">
<div align="center">
<table bgcolor="#FFFFFF" border="1" bordercolor="#808080" cellpadding="0"     cellspacing="0" height="0" width="303">
<tbody>
<tr>
<td align="center" height="0%" width="0%">
<table border="0" cellpadding="0" cellspacing="0" width="0%">
<tbody>
<tr>
<td align="center" valign="top">
<a href="http://lhslobos.org/default.htm">
<img src="LHSBanner2013-2014d.jpg" border="0" height="110" width="1118"></a>

</td>
</tr>
</tbody>
</table>
<!-- Unordered List Begins AKA my drop down Menu -->
<ul id="menu">
<li>
<a class="drop" href="index.html">Home</a>

<!-- Begin Home Item -->
</li>
<li class="menu_right">
<a class="drop">Main Directory</a>

<div class="dropdown_1column align_right">
<div class="col_1">
<h3>Links:</h3>
<ul class="simple">
<li><a href="http://lhslobos.org/About-LHS/default.htm">About LHS</a>

</li>
<li><a href="http://lhslobos.org/Academics/default.htm">Academics</a>

</li>
<li><a href="http://lhslobos.org/Administration/default.htm">Administration</a>
</li>
<li><a href="http://lhslobos.org/Athletics/default.htm">Athletics</a>
</li>
<li><a href="http://lhslobos.org/Faculty/default.htm">Faculty</a>
</li>
<li><a href="http://lhslobos.org/Guidance/default.htm">Guidance</a>

</li>
<li><a href="http://lhslobos.org/Student-Life/default.htm">Student Life</a>

</li>
</ul>
</div>
<li>
<a class="drop" href="http://lhslobos.org/About-LHS/community.htm">Community</a>

</li>
</div>
</li>
</ul>
<!-- Unordered List Ends -->
<p><font face="Cambria">
<marquee class="html-marquee">Welcome to Littlerock High School, the home of the Lobos... a place where all students are capable of high academic achievement. </marquee>
</font>

</p>
<table border="2" bordercolor="#003D79" cellpadding="0" cellspacing="0" width="1%">
<tbody>
<tr>
<td>
<a href="http://lhslobos.org/photo_gallery.htm">
<img src="888x570_LHS_SchoolFrontAngle2.jpg" border="0" height="570" width="888"></a>

</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="80%">
<tbody>
<tr>
<td align="center">
<br>
<b><font face="Cambria">
<font color="#495247">LOGIN:&nbsp;
</font><font color="#2F7760">
<a href="https://powerschool.avhsd.org/public/">
<font color="#003D79">PowerSchool</font></a>&nbsp;&nbsp;</font><font color="#808080">|</font><font color="#2F7760">&nbsp;
<a href="http://www.classjump.com/?section=register">
<font color="#003D79">ClassJump</font></a>&nbsp;&nbsp;</font><font color="#808080">|</font><font color="#2F7760">&nbsp;
<a href="http://www.apexvs.com/ApexUI/default.aspx">
<font color="#003D79">Apex Learning</font></a>&nbsp;&nbsp;</font><font color="#808080">|</font><font color="#2F7760">&nbsp;
<a href="http://gapps.avhsd.org/"><font color="#003D79">Google Apps</font></a></font></font></b>

</td>
</tr>
</tbody>
</table>
<p class="logo_main"><b>
<font size="2"><font color="#495247" face="Cambria">Quick Links:</font><span style="TEXT-DECORATION: none"><font color="#495247" face="Cambria">&nbsp;
</font><font color="#ffffff" face="Cambria">
<a href="http://avdistrict.org/sarc"><font color="#495247">SARC</font></a></font></span><font face="Cambria"><font color="#495247">
&nbsp;|&nbsp;
</font>
<a href="http://lhslobos.org/about-lhs.htm/SPSA%202012_13%20LHS.pdf">
<font color="#495247">SPSA</font></a><font color="#495247">&nbsp; |</font></font><font color="#495247" face="Cambria">&nbsp; </font><font color="#004600" face="Cambria">
<span style="TEXT-DECORATION: none">
<a target="_self" href="http://www2.ed.gov/programs/titleiparta/index.html">
<font color="#495247">NCLB</font></a></span></font><font color="#495247" face="Cambria"> 
&nbsp;|&nbsp;
</font>
<span style="TEXT-DECORATION: none">
<font color="#c0c0c0" face="Cambria">
<a href="http://www.avdistrict.org/"><font color="#495247">AVHSD</font></a></font></span><font color="#495247" face="Cambria">&nbsp; 
|&nbsp; </font><font color="#ffffff" face="Cambria"><u>
<a href="http://www.cde.ca.gov/be/st/ss/index.asp">
<font color="#495247">CA Standards</font></a></u></font><font color="#495247" face="Cambria">&nbsp; 
|&nbsp;
</font><font color="#494949" face="Cambria">
<a href="http://www.mylocker.net/california/littlerock/littlerock-high-school/index/index.html">
<font color="#495247">My Locker</font></a></font><font color="#495247" face="Cambria">&nbsp; 
|&nbsp;
</font></font><font color="#ffffff" face="Cambria">
<a href="http://webstores.activenetwork.com/school-software/littlerock_lobos_onl/">
<font color="#495247" size="2">Web Store</font></a></font></b>

</p>
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="bottom" width="0%">
<img border="0" src="StopBullyingSafeSchoolZone.png" width="75" height="75">
</td>
<td align="center" valign="top" width="0%"> <font color="#495247" face="Cambria" size="2">Antelope Valley Union 
High School District Disclaimer:<br>
<br>Any personal opinions expressed on Antelope Valley Union 
High School District (AVUHSD) sites are not those of the school or 
school district. <br>All outside links were deemed educationally 
appropriate at the time of inclusion on AVUHSD web pages. <br>Any 
opinions expressed are not those of AVUHSD. Linked pages are the 
sole property of the creator and not AVUHSD. Information is provided 
without warranties.
<br>The AVUHSD assumes no responsibility for any harm or damage that 
may be incurred by users for the content of any site to which 
district pages may be linked. <br>References to products, services, 
or publications does not imply endorsement.</font>

<p><font size="2" face="Cambria" color="#495247">Littlerock High School 
- 10833 E Ave R - Littlerock, CA 93550 - 661-944-5209 - Fax 
661-944-5191 - Website Prepared by
</font><font size="2"><font face="Cambria" color="#494949">
<a href="Academics/webmanagershistory/default.htm"><font color="#495247">LHS Web 
Managers</font>

</a>
</font><font face="Cambria" color="#495247">
&nbsp;</font></font><i><font color="#6b6d6b" face="Times New Roman"><a style="TEXT-DECORATION: none" href="Faculty/sbooth.htm"><font color="#495247" size="4">☺</font></a></font></i><font size="2" face="Cambria" color="#495247"></font>

</p>
</td>
<td align="right" valign="bottom" width="0%">   <a href="http://www.cde.ca.gov/">
<font color="#495247">
<img src="CA_DofE_Seal.png" border="0" height="85" width="85"></font></a>

</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

CSS

/* Color List */

/* #00A000 - Kelly Green */

/* Royal Blue #074BA0 */

/* Marquee Customized */
.html-marquee {
border:0 dashed #2F7760;
height:20px;
width:1075x;
background-color: #2F7760;
font-family:Cambria;
font-size:16px;
color: #FFFFFF;
font-style: italic;
font-weight: bold;
}
/* End Custom Marquee */
body, ul, li {
font-size:14px;
font-family: Cambria, Georgia, serif;
line-height:21px;
text-align:left;
}
/* Navigation Menu */
#menu {
list-style:none;
width:1018px;
height:40px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
/* #^#^#^#^#^#^#^#^# Corners Not Rounded #^#^#^#^#^#^#^#^# */
/*
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; */
/*Background color and gradients */
background: #FFFFFF;
/* Background for IE */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));
/*Borders */
border: 1px solid #003D79;
-moz-box-shadow:inset 0px 0px 1px #003D79;
-webkit-box-shadow:inset 0px 0px 1px #003D79;
box-shadow:inset 0px 0px 1px #003D79;
}
#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:27px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #FFFFFF;
/* Border Around TAB */
padding: 4px 9px 4px 9px;
/* Background color and gradients for TABS */
background: #FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family: Cambria, Georgia, serif;
font-size:15px;
font-weight:bold;
color: #003D79;
/* COLOR of MENU BAR TEXT*/
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #FFFFFF;
/* Shadow Under TAB TEXT */
}
#menu li:hover a {
color:#029feb;
/* CHANGE COLOR OF TEXT */
font-weight:bold;
text-shadow: 1px 1px 1px #FFFFFF;
/* TEXT SHADOW */
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat rightright 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat rightright 7px;
}
/* Drop Down */
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em;
/* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #FFFFFF;
border-top:none;
/* Gradient background */
/* ON HOVER BG */
background:#FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {
width: 140px;
}
.dropdown_2columns {
width: 280px;
}
.dropdown_3columns {
width: 420px;
}
.dropdown_4columns {
width: 560px;
}
.dropdown_5columns {
}
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}
/* Columns */
.col_1, .col_2, .col_3, .col_4, .col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {
width:130px;
}
.col_2 {
width:270px;
}
.col_3 {
width:410px;
}
.col_4 {
width:550px;
}
.col_5 {
width:690px;
}
/* Right alignment */
#menu .menu_right {
float:rightright;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
rightright:-1px;
top:auto;
}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li {
font-family: Cambria, Georgia, serif;
line-height:21px;
font-size:14px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
/* ############### Colors For Unordered List text ##################### */
#menu li:hover div a {
font-size:14px;
color:#003D79;
}
#menu li:hover div a:hover {
color:#029feb;
}
/* ######################################################## */
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left {
/* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

Java 脚本

function FP_swapImg() { //v1.0
var doc = document,
args = arguments,
elm, n;
doc.$imgSwaps = new Array();
for (n = 2; n < args.length;
n += 2) {
elm = FP_getObjectByID(args[n]);
if (elm) {
doc.$imgSwaps[doc.$imgSwaps.length] = elm;
elm.$src = elm.src;
elm.src = args[n + 1];
}
}
}

function FP_preloadImgs() { //v1.0
var d = document,
a = arguments;
if (!d.FP_imgs) d.FP_imgs = new Array();
for (var i = 0; i < a.length; i++) {
d.FP_imgs[i] = new Image;
d.FP_imgs[i].src = a[i];
}
}

function FP_getObjectByID(id, o) { //v1.0
var c, el, els, f, m, n;
if (!o) o = document;
if (o.getElementById) el = o.getElementById(id);
else if (o.layers) c = o.layers;
else if (o.all) el = o.all[id];
if (el) return el;
if (o.id == id || o.name == id) return o;
if (o.childNodes) c = o.childNodes;
if (c) for (n = 0; n < c.length; n++) {
el = FP_getObjectByID(id, c[n]);
if (el) return el;
}
f = o.forms;
if (f) for (n = 0; n < f.length; n++) {
els = f[n].elements;
for (m = 0; m < els.length; m++) {
el = FP_getObjectByID(id, els[n]);
if (el) return el;
 }
}
return null;
}

// -->

谢谢你来自 ,Web 管理员@lhslobos.org

最佳答案

您正在解决几个问题。我会对此进行很多更改，但特别是不要使用

它永远不会像您期望的那样:http://www.w3.org/wiki/HTML/Elements/marquee
这将是首选:http://www.w3schools.com/cssref/#marquee
尝试使用 HTML5 文档类型并跳过冗长的 HTML4 声明。无论如何，HTML5 更易于编码。

关于javascript - Marquee 在 IE 中拖动我的 css <ul> 内容在 chrome 中完美工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19820934/

文章推荐： javascript - 防止按下多个按钮

文章推荐： javascript - 我怎样才能在拉斐尔中绘制印度卢比符号

文章推荐： javascript - 不使用trim检查是否存在空格

文章推荐： html - 如何在导航子菜单中创建三列

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Marquee 在 IE 中拖动我的 css
内容在 chrome 中完美工作

首页

博学

6Ren·AI

商城

javascript - Marquee 在 IE 中拖动我的 css 内容在 chrome 中完美工作

javascript - Marquee 在 IE 中拖动我的 css
内容在 chrome 中完美工作