글 수 157
| 자료출처 : | |
|---|---|
| 미리보기 : | http://www.daerew.com/example/?example=이동가능따라다니는레이어 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JTricks - Javascript Tricks and Code Samples</title>
<style type=text/css>
<!--
#floatdiv {
position:absolute;
width:180px;
height:100px;
left:0px;
top:0px;
padding:10px;
background:#FFFFFF;
border:2px solid #2266AA;
}
-->
</style>
</head>
<body>
<div id="floatdiv">
대략 내용이 들어가고 <br />
<button onclick="move_upper_left()">좌측 위로</button><br />
<button onclick="move_upper_right()">우측 위로</button><br />
<button onclick="move_lower_left()">좌측 아래로</button><br />
<button onclick="move_lower_right()">우측 아래로</button><br /><br />
<button onclick="javascript:scroll(0,0)">최상단으로</button>
<span id="script_source">
<script type="text/javascript">
<!--
/* Script by: www.jtricks.com
* Version: 20060303
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var target_x = -270; // 초기 가로좌표 설정
var target_y = 300; // 초기 세로좌표 설정
var has_inner = typeof(window.innerWidth) == 'number';
var has_element = document.documentElement && document.documentElement.clientWidth;
var fm_id='floatdiv';
var floating_menu =
document.getElementById
? document.getElementById(fm_id)
: document.all
? document.all[fm_id]
: document.layers[fm_id];
var fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;
function move_menu()
{
if (document.layers)
{
floating_menu.left = fm_next_x;
floating_menu.top = fm_next_y;
}
else
{
floating_menu.style.left = fm_next_x + 'px';
floating_menu.style.top = fm_next_y + 'px';
}
}
function compute_shifts()
{
fm_shift_x = has_inner
? pageXOffset
: has_element
? document.documentElement.scrollLeft
: document.body.scrollLeft;
if (target_x < 0)
fm_shift_x += has_inner
? window.innerWidth
: has_element
? document.documentElement.clientWidth
: document.body.clientWidth;
fm_shift_y = has_inner
? pageYOffset
: has_element
? document.documentElement.scrollTop
: document.body.scrollTop;
if (target_y < 0)
fm_shift_y += has_inner
? window.innerHeight
: has_element
? document.documentElement.clientHeight
: document.body.clientHeight;
}
function float_menu()
{
var step_x, step_y;
compute_shifts();
step_x = (fm_shift_x + target_x - fm_next_x) * .07;
if (Math.abs(step_x) < .5)
step_x = fm_shift_x + target_x - fm_next_x;
step_y = (fm_shift_y + target_y - fm_next_y) * .07;
if (Math.abs(step_y) < .5)
step_y = fm_shift_y + target_y - fm_next_y;
if (Math.abs(step_x) > 0 ||
Math.abs(step_y) > 0)
{
fm_next_x += step_x;
fm_next_y += step_y;
move_menu();
}
setTimeout('float_menu()', 10); // 이동속도 설정 숫자가 적을수록 빠름
};
compute_shifts();
if (document.layers)
{
// Netscape 4 cannot perform init move
// when the page loads.
fm_next_x = 0;
fm_next_y = 0;
}
else
{
fm_next_x = fm_shift_x + target_x;
fm_next_y = fm_shift_y + target_y;
move_menu();
}
float_menu();
function move_upper_left() // 버튼 클릭시의 좌표설정
{
target_x=10;
target_y=10;
}
function move_upper_right()
{
target_x=-270;
target_y=10;
}
function move_lower_left()
{
target_x=10;
target_y=-200;
}
function move_lower_right()
{
target_x=-270;
target_y=-200;
}
//-->
</script>
</span>
</div>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
</body>
</html>
<html>
<head>
<title>JTricks - Javascript Tricks and Code Samples</title>
<style type=text/css>
<!--
#floatdiv {
position:absolute;
width:180px;
height:100px;
left:0px;
top:0px;
padding:10px;
background:#FFFFFF;
border:2px solid #2266AA;
}
-->
</style>
</head>
<body>
<div id="floatdiv">
대략 내용이 들어가고 <br />
<button onclick="move_upper_left()">좌측 위로</button><br />
<button onclick="move_upper_right()">우측 위로</button><br />
<button onclick="move_lower_left()">좌측 아래로</button><br />
<button onclick="move_lower_right()">우측 아래로</button><br /><br />
<button onclick="javascript:scroll(0,0)">최상단으로</button>
<span id="script_source">
<script type="text/javascript">
<!--
/* Script by: www.jtricks.com
* Version: 20060303
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var target_x = -270; // 초기 가로좌표 설정
var target_y = 300; // 초기 세로좌표 설정
var has_inner = typeof(window.innerWidth) == 'number';
var has_element = document.documentElement && document.documentElement.clientWidth;
var fm_id='floatdiv';
var floating_menu =
document.getElementById
? document.getElementById(fm_id)
: document.all
? document.all[fm_id]
: document.layers[fm_id];
var fm_shift_x, fm_shift_y, fm_next_x, fm_next_y;
function move_menu()
{
if (document.layers)
{
floating_menu.left = fm_next_x;
floating_menu.top = fm_next_y;
}
else
{
floating_menu.style.left = fm_next_x + 'px';
floating_menu.style.top = fm_next_y + 'px';
}
}
function compute_shifts()
{
fm_shift_x = has_inner
? pageXOffset
: has_element
? document.documentElement.scrollLeft
: document.body.scrollLeft;
if (target_x < 0)
fm_shift_x += has_inner
? window.innerWidth
: has_element
? document.documentElement.clientWidth
: document.body.clientWidth;
fm_shift_y = has_inner
? pageYOffset
: has_element
? document.documentElement.scrollTop
: document.body.scrollTop;
if (target_y < 0)
fm_shift_y += has_inner
? window.innerHeight
: has_element
? document.documentElement.clientHeight
: document.body.clientHeight;
}
function float_menu()
{
var step_x, step_y;
compute_shifts();
step_x = (fm_shift_x + target_x - fm_next_x) * .07;
if (Math.abs(step_x) < .5)
step_x = fm_shift_x + target_x - fm_next_x;
step_y = (fm_shift_y + target_y - fm_next_y) * .07;
if (Math.abs(step_y) < .5)
step_y = fm_shift_y + target_y - fm_next_y;
if (Math.abs(step_x) > 0 ||
Math.abs(step_y) > 0)
{
fm_next_x += step_x;
fm_next_y += step_y;
move_menu();
}
setTimeout('float_menu()', 10); // 이동속도 설정 숫자가 적을수록 빠름
};
compute_shifts();
if (document.layers)
{
// Netscape 4 cannot perform init move
// when the page loads.
fm_next_x = 0;
fm_next_y = 0;
}
else
{
fm_next_x = fm_shift_x + target_x;
fm_next_y = fm_shift_y + target_y;
move_menu();
}
float_menu();
function move_upper_left() // 버튼 클릭시의 좌표설정
{
target_x=10;
target_y=10;
}
function move_upper_right()
{
target_x=-270;
target_y=10;
}
function move_lower_left()
{
target_x=10;
target_y=-200;
}
function move_lower_right()
{
target_x=-270;
target_y=-200;
}
//-->
</script>
</span>
</div>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
<p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p><p>늘어나라 </p>
</body>
</html>
