javascript中两疑难问题,各30分,请求解决
一、页面定位的问题
<a href= "# "> <img alt= "加粗 " src= "Image/bold.gif " border= "0 " onclick= "Bold(); " /> </a>
图片中有一个单击事件,当我单击图片时,垂直滚动条就跑到页面顶部了,如果执行该事件使页面位置保持不变(要求:兼容firefox)?
二、动态显示菜单的位置问题
HTML 代码:
<a href= "# " onmouseover= "changeSkin(event) "> 风 格 </a>
JS代码:
function changeSkin(oEvent)
{
var oDiv=document.getElementById( "skinMenu ");
oDiv.style.visibility= "visible ";
oDiv.style.left=oEvent.clientX+5;
oDiv.sty
此段代码在ie中执行成功,在firefox中无法定位(即无法将div层显示在鼠标的底部)
该如何修改才能在firefox中执行成功
[解决办法]
1. <a href= "javascript:void(0) ">
2.http://zhidao.baidu.com/question/31251229.html
[解决办法]
第二个问题是event的标准问题
在ie中用event
在ff中是作为第一个参数传递的,也就是
changeSkin(event)
function changeSkin(event)
这里都用event来替换,应该可以兼容了
[解决办法]
二、动态显示菜单的位置问题
我以前做的一个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 " />
<title> 无标题文档-SH! </title>
<style type= "text/css ">
<!--
body {
margin:0px;
padding:0px;
}
.tagDiv {
position:absolute;
padding:2px;
z-index:101;
background-color: #CCFF99;
display:inline;
filter: Alpha(opacity=80);
-moz-opacity:.8;
opacity:0.8;
font-size:12px;
font-family: "宋体 ", Arial, sans-serif;
}
#bgImg{
cursor:crosshair;
}
#apDiv1{
cursor:pointer;
}
#selBox {
position:absolute;
width:600px;
height:450px;
z-index:1;
visibility: visible;
overflow: hidden;
}
#bgImg{
}
#apDiv1 {
position:absolute;
left:0px;
top:0px;
padding:2px;
z-index:101;
background-color: #CCFF99;
display:inline;
filter: Alpha(opacity=60);
-moz-opacity:.6;
opacity:0.6;
font-size:12px;
font-family: "宋体 ", Arial, sans-serif;
}
-->
</style>
<script language= "javascript ">
function $(element) {
if (arguments.length > 1)
{
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (typeof element == 'string ')
{
if (document.getElementById)
{
element = document.getElementById(element);
}
else if (document.all)
{
element = document.all[element];
}
else if (document.layers)
{
element = document.layers[element];
}
}
return element;
}
</script>
<script language= "javascript ">
Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return method.apply(obj, arguments);
};
return temp;
}
var vv = null;
var v1 = function(_evt)
{
var evt = _evt?_evt:event;
var l = (evt.offsetX || evt.layerX||0);
var t = (evt.offsetY || evt.layerY||0);
$( "apDiv1 ").innerHTML = "x: "+ l + ", y: " + t;
$( "apDiv1 ").style.left = parseInt(l)+5 + "px ";
$( "apDiv1 ").style.top = parseInt(t)+5 + "px " ;
}
var v2 = function(_evt)
{
var evt= _evt?_evt:event;
if((evt.srcElement || evt.target).id!= "bgImg ") return false;
var l = (evt.offsetX || evt.layerX ||0);
var t = (evt.offsetY || evt.layerY ||0);
$( "apDiv1 ").innerHTML = "x: "+ l + ", y: " + t;
$( "apDiv1 ").style.left = l+ "px ";
$( "apDiv1 ").style.top = t+ "px " ;
if($( "bgImg ").onmousemove)
{
$( "bgImg ").onmousemove = null;
$( "apDiv1 ").style.backgroundColor = "#F00 ";
$( "apDiv1 ").style.color = "#FFF ";
}
else
{
$( "bgImg ").onmousemove = v1.bind(vv);
$( "apDiv1 ").style.backgroundColor = "#cf9 ";
$( "apDiv1 ").style.color = "#000 ";
}
}
var Init = function ()
{
vv = window;
$( "bgImg ").onmousemove = v1.bind(vv);
$( "selBox ").onclick = v2.bind(vv);
}
</script>
</head>
<body onload= "Init() ">
<div id= "selBox ">
<div id= "apDiv1 "> X:Y: </div>
<div id= "bgImg " style= "width:600px; height:500px; background-color:#006699; "> </div>
</div>
</body>
</html>
[解决办法]
1、 <a href= "# "> <img alt= "加粗 " src= "Image/bold.gif " border= "0 " onclick= "Bold();return false; " /> </a>
2、判断浏览器,各个浏览器写相应程序,具体firefox中应该是什么事件我也不大清楚
[解决办法]
1. <a href= "void(0) "> ... </a>
2. oEvent 用这样来替代
function(_oEvent){
var oEvent = _oEvent?_oEvent:oEvent;
...
}
[解决办法]
参考以下这个脚本:
http://www.dynarch.com/products/dhtml-menu/