Не имею опыта по теме, но очень надо, помогите пожалуйста.
суть вопроса:
внутри iframe плавает акула, которая имитирует слежение за перемещением мыши, когда доводится мышь до края фрейма акула на половину вылазит за него, помогите пожалуйста это исправить
вот тут можно это посмотреть:
http://progc.isgreat.org/shark/index.html
вот код акулы и кнопки"вкл/выкл акулу":
<SCRIPT type=text/javascript>
/*
MV
*/
var ns = (document.layers)?1:0;
/*
Button:
this code is to show a "button" to switch
the Shark ON/OFF.
It is always shown on the frame's
bottom-right corner.
------------------------------------------------
*/
var imgwidth=100; // Image width
var imgheight=100; // Image height
var button = Array(); // to pre-cache images
button[0]=new Image();
button[0].src="images/Shark/Shark_OFF.png";
button[1]=new Image();
button[1].src="images/Shark/Shark_ON.png";
var text="<div width=10 bgcolor=#2B5178 border='0'><div><a href='javascript:showhideAnimation()'><center><img name='Button' src='"+button[0].src+"' width='"+imgwidth+"' height='"+imgheight+"' border='0'></center></a></font></div></div>" // A bit of HTML code to display the button
//Initialize some variables to make the button always to appear on the frame's bottom-right corner
if (ns) {
document.write("<LAYER NAME='SharkOnOff' LEFT=0 TOP=0>"+text+"</LAYER>");
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}else {
document.write("<div id='SharkOnOff' style='position:absolute; visibility:show; left:900px; top:600px; z-index:2' border='0'>"+text+"</div>");
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}
// Moves the button in the right position
function checkLocation() {
objectXY="SharkOnOff";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
x=availableX-(imgwidth+30)+currentX;
y=availableY-(imgheight+20)+currentY;
eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
setInterval('checkLocation()', 10);
/*
end of Button management
------------------------------------------------
*/
/*
Shark:
this code provides some facilities
to show a Shark moving on the screen.
The Shark does not actually follow the
mouse, but a "Dot" (not shown!).
------------------------------------------------
*/
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
(document.layers)?window.onMouseMove=getMousePosition:document.onmousemove=getMousePosition;
var Dot_Ro=60; //Dot's distance from the mouse pointer
var Dot_Theta=0; //Dot's initial angle
var Dot_Speed; //Dot's absolute Angular speed
var Dot_Direction=1; //Dot's direction (1=clockwise)
var Dot_x=0; //Dot's original position
var Dot_y=0;
var alpha; //Angle from the Shark to the mouse
var mult; //Ausiliary variable to define the angle
var picX = 20; //Shark's coords.
var picY = 100;
var mouseX = 0; //Mouse coords.
var mouseY = 0;
var step = 10; //Pixels
var speed = 200;//u-seconds
// Dir specifies the right picture;
// img pre-caches images.
var dir = Array();
dir[-4]="images/Shark/Shark_3.png";
dir[-1]="images/Shark/Shark_6.png";
dir[-2]="images/Shark/Shark_5.png";
dir[-3]="images/Shark/Shark_4.png";
dir[3]="images/Shark/Shark_8.png";
dir[4]="images/Shark/Shark_7.png";
dir[1]="images/Shark/Shark_2.png";
dir[2]="images/Shark/Shark_1.png";
dir[0]="";
var img = Array();
for (var i=-4; i<5; i++){
img[i]=new Image();
img[i].src=""+dir[i];
}
// Some HTML code to show the Shark.
if (ns) {
document.write("<LAYER NAME='SharkDiv' LEFT=0 TOP=0><img src="+img[1].src+" name='pic'></LAYER>");
}else {
document.write("<div id='SharkDiv' style='position:absolute'>");
document.write("<img name='pic' src=" + img[1].src + "></div>");
}
// Shows the proper image for the Shark.
function display(direction) { //direction must be from -4 to 4, but not 0.
if (ns) {
document.pic.src = img[direction].src;
}else{
pic.src = img[direction].src;
}
}
function getMousePosition(e) {
mouseY=(ns)?e.pageY:window.event.y + document.body.scrollTop;
mouseX=(ns)?e.pageX:window.event.x + document.body.scrollLeft;
}
//Calculate new position
function calcNewPos() {
/*
All this calculations make the Dot
to come near the mouse-pointer,
and the Shark to follow the dot.
*/
var dist=Math.sqrt(Math.pow(mouseY-picY,2) + Math.pow(mouseX-picX,2));
Dot_Speed=Math.PI/15;
Dot_Theta+=Dot_Direction*Dot_Speed;
Dot_x=mouseX+Dot_Ro*Math.cos(Dot_Theta);
Dot_y=mouseY+Dot_Ro*Math.sin(Dot_Theta);
var arg = (Dot_y-picY) / (Dot_x-picX);
mult = (Dot_x - picX < 0)? mult = -1:1;
alpha = Math.atan(arg);
var dx = mult * step * Math.cos(alpha);
var dy = mult * step * Math.sin(alpha);
picX += dx;
picY += dy;
}
//Shows or hides the Shark when the "button" is pressed
function showhideAnimation() {
if (ns) {
document.layers['SharkDiv'].visibility=document.layers['SharkDiv'].visibility=="hide"?"show":"hide";
document.Button.src = document.layers['SharkDiv'].visibility=="hide"?button[1].src:button[0].src;
}else {
SharkDiv.style.visibility=="hidden"?SharkDiv.style.visibility = "visible":SharkDiv.style.visibility = "hidden";
Button.src = SharkDiv.style.visibility=="hidden"?button[1].src:button[0].src;
}
}
// Moves the Shark around the screen
function moveShark() {
// moves the Shark in a new position...
calcNewPos();
if (ns) {
document.layers['SharkDiv'].left = picX;
document.layers['SharkDiv'].top = picY;
}else{
SharkDiv.style.left = picX - pic.width / 2;
SharkDiv.style.top = picY - pic.height / 2;
}
// ... and changes the image.
alpha=-180*alpha/Math.PI;
alpha+=22.5;
var OK=0;
for(var i=0; (i<4)&& !OK; i++){
if (alpha<-Math.PI+45*i){
display(mult*(i+1));
OK=1;
}
}
}
// Changes Dot's turning direction
function ChangeDotDirection() {
Dot_Direction=-Dot_Direction;
Dot_Theta+=Math.PI;
}
//Go!
setInterval('moveShark()', speed);
setInterval('ChangeDotDirection()', speed*50);
</script>
