我有一个弹出菜单动画。在动画的最后一帧,我隐藏动画div并显示3个与动画的最终帧相同的按钮,只有它们是3个单独的按钮,在div中。
我希望在父div的mouseout
调用roll up函数时发生反向。
当我滚动按钮时,它会触发div上的mouseout
。
我已尝试过其他一些父母子女处理的答案,但仍无法让它发挥作用。我认为其他答案不起作用,因为我有div的事件听众我display:none and then display:block.
的javascript
// JavaScript Document
//cost
var frame = 0;
var frameWidth = 215;
var xpos3 = 0;
var div3;
var direction3 = 1;
var ypos = 648;
var div4;
var drop = 0;
var div5;
function cost(leftright) {
direction3 = leftright;
}
//end cost
var xpos = 131;
var direction = "right";
var div;
var xpos2 = 0;
var direction2 = "left";
var div2;
function mail(leftright) {
direction = leftright;
}
function home2(leftright) {
direction2 = leftright;
}
function dropp() {
drop = 0;
direction3 = 1;
}
function gogo() {
div = document.getElementById('mail');
setInterval(moveMail, 1);
div2 = document.getElementById('home');
setInterval(moveHome, 1);
setInterval(costDrop, 1);
div3 = document.getElementById('cost');
setInterval(function () { moveCost() }, 25);
div4 = document.getElementById('drop');
div5 = document.getElementById('dropand');
}
function moveMail() {
if (direction == "right") {
if (xpos != 131) {
xpos += 1;
div.style.backgroundPosition = (xpos) + "px";
}
}
if (direction == "left") {
if (xpos != 0) {
xpos -= 1;
div.style.backgroundPosition = (xpos) + "px";
}
}
}
//-------------------move home
function moveHome() {
if (drop == 0) {
if (direction2 == "right") {
if (xpos2 != 214) {
xpos2 += 1;
div2.style.backgroundPosition = (xpos2) + "px";
}
}
if (direction2 == "left") {
if (xpos2 != 0) {
xpos2 -= 1;
div2.style.backgroundPosition = (xpos2) + "px";
}
}
}
}
//----------------move cost
function costDrop() {
if (drop == 0) {
if (direction3 == 0) {
if (ypos != 324) {
ypos -= 1;
div4.style.backgroundPosition = (0) + "px " + (-ypos) + "px";
}
}
if (direction3 == 1) {
if (ypos != 648) {
ypos += 1;
div4.style.backgroundPosition = (0) + "px " + (-ypos) + "px";
}
}
}
}
function moveCost() {
if (drop == 0) {
if (direction3 == 1) {
if (xpos3 != 0) {
frame -= 1;
xpos3 = frame * frameWidth;
div3.style.backgroundPosition = -(xpos3) + "px";
}
}
if (direction3 == 0) {
if (xpos3 != 6235) {
frame += 1;
xpos3 = frame * frameWidth;
div3.style.backgroundPosition = -(xpos3) + "px";
}
}
}
if ((ypos == 324) && (xpos3 == 6235)) {
drop = 1;
div5.style.display = "block";
} else {
div5.style.display = "none";
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Den Design - Design Page Main</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="buttons.js"></script>
</head>
<body onload="gogo()">
<div id="load">
<img src="bgbg.jpg" width="1920" height="2160" alt="" /><img src="blankButton.png" width="214" height="108" alt="" /><img src="blankDrop.png" width="214" height="432" alt="" /><img src="costSprite.png" width="6450" height="108" alt="" /><img src="dropDown.png" width="214" height="648" alt="" /><img src="graphicdesign2.png" width="214" height="108" alt="" /><img src="home.png" width="214" height="108" alt="" /><img src="homeFun.png" width="214" height="108" alt="" /><img src="homeUnder.png" width="214" height="108" alt="" /><img src="mail.png" width="226" height="108" alt="" /><img src="mailFun.png" width="226" height="108" alt="" /><img src="outter.png" width="225" height="549" alt="" /><img src="rollgraphic.png" width="214" height="108" alt="" /><img src="rolltech.png" width="214" height="108" alt="" /><img src="rollweb.png" width="214" height="108" alt="" /><img src="tech3.png" width="214" height="108" alt="" /><img src="webdendesign.png" width="909" height="106" alt="" /><img src="webdesign1.png" width="214" height="108" alt="" />
</div>
<div id="wrapper">
<div id="webdendesign">
<img src="webdendesign.png" width="909" height="106" alt="" />
</div>
<div id="drop">
</div>
<div id="outter" onmouseover="dropp()">
</div>
<div id="dropand">
<div id="web"></div>
<div id="graphic"></div>
<div id="tech"></div>
</div>
<div id="mail">
</div>
<div id="mailFun">
<img src="mailFun.png" alt="" width="226" height="108" usemap="#MapMail" />
<map name="MapMail">
<area alt="MapMail" shape="rect" coords="56,7,225,105" href="#" onmouseover="mail('left')" onmouseout="mail('right')">
</map>
</div>
<div id="home">
</div>
<div id="homeFun">
<img src="homeFun.png" alt="" width="214" height="108" usemap="#MapHome" />
<map name="MapHome">
<area alt="MapHome" shape="poly" coords="20,98,37,79,37,53,32,26,21,13,44,7,175,9,201,38,203,72,182,94,164,101" href="#" onmouseover="home2('right')" onmouseout="home2('left')">
</map>
</div>
<div id="homeUnder">
<img src="homeUnder.png" width="214" height="108" alt="" />
</div>
<div id="cost">
</div>
<div id="costFun">
<img src="homeFun.png" alt="" width="214" height="108" usemap="#MapCost" />
<map name="MapCost">
<area alt="MapCost" shape="poly" coords="18,97,35,78,35,52,30,25,19,12,42,6,173,8,199,37,201,71,180,93,162,100" href="#" onmouseover="cost(0)" onmouseout="cost(1)">
</map>
</div>
<div id="costUnder">
<img src="costUnder.png" width="215" height="108" alt="" />
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body {
background-color: #000000;
}
#load {
display: none;
}
ul {
display: block;
}
#wrapper {
position: relative;
width: 1150px;
height: 2000px;
margin-left: auto;
margin-right: auto;
background-image: url(tempBG.jpg);
background-repeat: no-repeat;
z-index: 0;
}
#drop {
position: absolute;
top: 216px;
left: 392px;
width: 214px;
height: 314px;
background-image: url(dropDown.png);
background-repeat: no-repeat;
background-position: 0px -648px;
z-index: 1;
}
#dropand {
position: absolute;
top: 106px;
left: 392px;
width: 214px;
height: 432px;
z-index: 5;
}
#outter {
position: absolute;
top: 80px;
left: 375px;
width: 264px;
height: 482px;
z-index: 5;
}
#button {
position: absolute;
top: 0px;
width: 214px;
height: 108px;
background-image: url(webdesign1.png);
}
#web {
position: absolute;
top: 106px;
left: 0px;
width: 214px;
height: 108px;
background-image: url(webdesign1.png);
z-index: 1;
}
#web:hover {
position: absolute;
top: 106px;
left: 0px;
width: 214px;
height: 108px;
background-image: url(rollweb.png);
z-index: 1;
}
#graphic {
position: absolute;
top: 214px;
left: 0px;
width: 214px;
height: 108px;
background-image: url(graphicdesign2.png);
}
#graphic:hover {
position: absolute;
top: 214px;
left: 0px;
width: 214px;
height: 108px;
background-image: url(rollgraphic.png);
}
#tech {
position: absolute;
top: 322px;
left: 0px;
width: 214px;
height: 108px;
background-image: url(tech3.png);
}
#tech:hover {
position: absolute;
top: 322px;
left: 0px;
width: 214px;
height: 108px;
background-image: url(rolltech.png);
}
#mail {
position: absolute;
top: 106px;
left: 0px;
background-image: url(mail.png);
width: 226px;
height: 108px;
background-position: 131px;
background-repeat: no-repeat;
z-index: 3;
}
#mailFun {
position: absolute;
top: 106px;
left: 0px;
width: 226px;
height: 108px;
z-index: 5;
}
/*-------home button-----*/
#home {
position: absolute;
top: 106px;
left: 200px;
background-image: url(home.png);
width: 214px;
height: 108px;
background-position: 0px;
background-repeat: no-repeat;
z-index: 3;
}
#homeFun {
position: absolute;
top: 106px;
left: 200px;
width: 214px;
height: 108px;
z-index: 4;
}
#homeUnder {
position: absolute;
top: 106px;
left: 200px;
width: 214px;
height: 108px;
z-index: 2;
}
/* 215w 108h cost button x6235*/
#cost {
position: absolute;
top: 106px;
left: 392px;
background-image: url(costSprite.png);
width: 215px;
height: 108px;
background-position: 0px;
background-repeat: no-repeat;
z-index: 2;
}
#costFun {
position: absolute;
top: 106px;
left: 392px;
width: 215px;
height: 108px;
z-index: 7;
}
#costUnder {
position: absolute;
top: 106px;
left: 392px;
width: 215px;
height: 108px;
z-index: 1;
}
#webdendesign {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
临时隐藏的外部人员,我想替换为div onmouseout
看起来像什么,隐藏的png触发菜单备份成本
http://webdendesign.com/test/