이벤트 객체를
ie에선 전역객체로 사용하고
다른건 첫번째 인수로 보냅니다
[글쓴이:] 웅파
말경주 소스(사다리타기)
말 갯수 |
초기속도 1 2 3 |
|
롤링배너 만들기 ^^ 디비 연동판 입니다
석이
http://netmask.co.kr
오래 되어서 우째 돌아가는지 잘 모르겠네요 php 안한지도 좀 된거 같고 ^^
약하지만 함 써보세요
제작자 김민석
kimms@wowtv.co.kr
msn minsouk@hotmail.com
0266760175
이정도만 하면 간단한거 다 만들수 있겠네요 그냥 심심하신분은 해보셔요
실제 wowmall.co.kr 이라는 홈페이지에서 돌리고 있는 소스 입니다.
저기 들어가시면 왼쪽에 있는 TV 모양 롤링 배너 입니다.
그리고 테이블 하나를 쪼개서 오른쪽에 한줄 공지 사항도 나오고 있습니다.
일부러 그렇게 해 놓은거니 -_- 뭐 디비가 L 자이니 뭐 이런소리 하지 마시길 ^^
데이터가 적으면 이렇게 쓰는게 더 좋은 겁니다.
======================================================================================================================
실제 홈페이지에서 부르는 페이지 입니다.
cat Ticker.php
======================================================================================================================
풍선도움말 스크립트
행복한고니
http://mygony.com
http://mygony.com/tt/index.php/142
이번엔 풍선도움말 스크립트를 만들어봤습니다.
풍선도움말이 뭔지 모르시는 분들은 없을테니, 대충 설명은 생략하고 우선 소스부터 올립니다.
※ 사용하실때는 반드시 윗부분의 주석까지 포함해야 합니다.
/**
* Created by 행복한고니
*
* Homepage : http://mygony.com
* Last update : 2005/04/10
*
* 2005-04-10
* – 첫번째 릴리즈
*/
function balloonHint(Id)
{
balloonHint.layerId = Id;
document.addEventListener(‘mouseover’, balloonHint.Show, false);
document.addEventListener(‘mouseout’, balloonHint.Hide, false);
}
balloonHint.layerId = null;
balloonHint.Show = function (evt) {
if (typeof evt == “undefined” || typeof evt.target == “undefined”) {
(evt=event).target = event.srcElement;
}
var hint = evt.target.getAttribute(“hint”);
if (hint == null || hint.length == 0) return;
if (balloonHint.layer == null) balloonHint.makeLayer();
with (balloonHint.layer) {
innerHTML = sourceHTML.replace(“{{hint}}”, hint);
show(evt.clientX, evt.clientY);
}
}
balloonHint.Hide = function (evt) {
if (typeof evt == “undefined” || typeof evt.target == “undefined”) {
(evt=event).target = event.srcElement;
}
var hint = evt.target.getAttribute(“hint”);
if (hint == null || hint.length == 0) return;
balloonHint.layer.hide();
}
balloonHint.makeLayer = function()
{
if (typeof document.body == “undefined”) {
document.body = document.getElementsByTagName(“BODY”)[0];
}
balloonHint.layer = document.getElementById(balloonHint.layerId);
balloonHint.layer.sourceHTML = balloonHint.layer.innerHTML;
balloonHint.layer.style.position = “absolute”;
if (typeof window.createPopup == “undefined”) {
balloonHint.layer.show = function(x, y) {
balloonHint.layer.style.display = “block”;
balloonHint.layer.style.left = (x+document.body.scrollLeft+1) + “px”;
balloonHint.layer.style.top = (y+document.body.scrollTop+1) + “px”;
}
balloonHint.layer.hide = function() {
balloonHint.layer.style.display = “none”;
}
} else {
balloonHint.layer.popup = window.createPopup();
balloonHint.layer.show = function(x, y) {
with (balloonHint.layer) {
style.display = “block”;
var w = offsetWidth, h = offsetHeight;
style.display = “none”;
popup.document.body.innerHTML = innerHTML;
popup.show(x, y, w, h, document.body);
}
}
balloonHint.layer.hide = function() {
balloonHint.layer.popup.hide();
}
}
}
if (typeof document.addEventListener == “undefined”) {
if (typeof document.attachEvent != “undefined”) {
document.addEventListener = function (eventType, listener) {
document.attachEvent(“on”+eventType, listener);
}
document.removeEventListener = function (eventType, listener) {
document.detachEvent(“on”+eventType, listener);
}
}
}
2. 사용법 (Usage)
우선, 풍선도움말을 디자인해서 코드를 DIV 태그 안에 집어넣습니다. 꼭 display 속성을 none으로 해주셔야 합니다.
그 다음에 풍선도움말을 활성화시킵니다. 아이디는 위에서 정한 아이디와 같기만 하면 뭐라도 상관없습니다.
이제 풍선도움말을 보여주고자 하는 태그에 hint 속성을 부여합니다.
http://mygony.com
이걸로 끝입니다. 저 스스로가 귀찮은 것은 딱 질색이라서 최대한 간단하게 사용하실 수 있도록 만들었습니다.
※ 주의! 풍선도움말 레이어의 글꼴 스타일 등의 형식은 반드시 레이어안에 직접 작성해주세요.
랜덤출력 tr 행에 사용
/**
랜덤 출력 적용함수
페이지내의 모든 TBODY.RandomContainer 를 찾아서 랜덤 설정을 적용한다.
*/
function ShowRandomItem()
{
var containers = document.getElementsByTagName('TBODY');
for (var i = 0; i < containers.length; i++)
{
if (containers.item(i).className != 'RandomContainer')
continue;
var container = containers.item(i);
var count = 0;
if (container.id.match(/:([0-9]+)$/))
count = Number(RegExp.$1);
else
count = 1;
var rows = container.childNodes;
var item_list = new Array(), item_count = 0;
for (var j = 0; j < rows.length; j++)
{
var row = rows.item(j);
if (row.tagName != 'TR' || row.className != 'RandomItem' || row.id == null || row.id == '')
continue;
if (row.id.match(/:([0-9]+)$/)) {
var weight = Number(RegExp.$1);
if (weight > 0) { // 가중치가 0이면 포함시키지 않는다.
item_count++;
for (var k = 0; k < weight; k++)
item_list[item_list.length] = row.id;
}
}
else { // 가중치를 판단할 수 없으면 1로 간주
item_list[item_list.length] = row.id;
item_count++;
}
}
// 랜덤 표시 설정을 적용한다.
var show_count = 0;
while (show_count < count && show_count < item_count)
{
var rand = Math.random();
var index = Math.floor(rand * 1000) % item_list.length;
var id = item_list[index];
//debug('index: ' + index + ', id: ' + id);
var row = document.getElementById(id);
if (row != null) {
//debug('found_row: ' + row.id);
// 표시하는 방법은 tr 개체를 복사해서 다시 tbody에 추가하는 방식
var cloned = row.cloneNode(true);
cloned.className = '';
cloned.id = '';
container.appendChild(cloned);
show_count++;
// 중복 선택되는 것을 막기 위해 한번 표시된 행은 제거해버린다.
container.removeChild(row);
}
}
// 뒷처리 표시되지 않는 RandomItem 클래스의 모든 행을 제거
for (var j = rows.length - 1; j >= 0; j--) {
var row = rows.item(j);
if (row.tagName == 'TR' && row.className == 'RandomItem')
container.removeChild(row);
}
}
}
// 디버그용 출력함수
function debug(message)
{
var debug_out = document.getElementById('debug_out');
if (message == null)
debug_out.value = '';
else
debug_out.value += message + "
";
}
function document_load()
{
debug(); // 디버그 출력 초기화
ShowRandomItem();
debug(document.getElementById('eventlist:2').innerHTML);
}
헤더 |
0번 내용 |
1번 내용 |
2번 내용 |
3번 내용 |
4번 내용 |
5번 내용 |
6번 내용 |
7번 내용 |
8번 내용 |
9번 내용 |
푸터 |
새로고침 하는 거다.