웹 페이지의 오른쪽 하단에있는 팝업 양식의 구현 코드

저자：Eve Cole 업데이트 시간：2025-05-15 18:48:02

复制代码代码如下 :

<!->->

<스타일 유형 = "텍스트/CSS">

#MSG_WIN {위치 : 절대; 오른쪽 : 0px; 디스플레이 : 없음; 오버플로 : 숨겨진; Z- 인덱스 : 99; 테두리 : 1px Solid #c00; 배경 : #f9effc; 너비 : 210px; 글꼴 크기 : 12px; 마진 : 0px;}

#msg_win .icos {위치 : 절대; 상단 : 2px;*상단 : 0px; 오른쪽 : 2px; z-index : 9;}

.Icos a {float : 왼쪽; 색상 : #ffffff; 마진 : 1px; 텍스트-정렬 : 중심; 중심; 굵은 체중 : 볼드; 폭 : 14px; 높이 : 22px; 라인-하이트 : 22px; 패딩 : 1px; 텍스트 설명 : 없음; font-family : webdings;}.

.Icos A : 호버 {색상 :#ffcc00;}

#MSG_TITLE {배경 : #FA6705; 국경-바닥 : 1px 솔리드 #710B97; 국경-탑 : 1px 고체 #fff; Border-Left : 1px solid #fff; color : #ffffff; 높이 : 25px; line-height : 25px; text-indent : 5px; font-weight;}.

#msg_content {마진 : 1px; 마진 오른쪽 : 0; 너비 : 210px; 높이 : 160px; 오버플로; 텍스트 정렬 : 센터}

</스타일>

<!->->

<div id = "msg_title"> 标题标题

</div>

<Object ClassId = "ClsID : D27CDB6E-AE6D-11CF-96B8-444553540000"

codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0">

PluginsPage = "http://www.macromedia.com/go/getflashplayer"type = "application/x-shockwave-flash"> </embed>

</객체>

</div>

var 메시지 = {

세트 : function () {// 最小化与恢复状态切换

var set = this.minbtn.status == 1? [0, 1, 'block', this.char [0], '最小化'] : [1, 0, 'none', this.char [1], '恢复'];

this.minbtn.status = set [0];

this.win.style.borderbottomwidth = set [1];

this.content.style.display = set [2];

this.minbtn.innerhtml = set [3]

this.minbtn.title = set [4];

this.win.style.top = this.gety (). 상단;

닫기 : function () {// 关闭

this.win.style.display = 'none';

document.all.xhs1.stop ();

Window.onscroll = null;

setOpacity : function (x) {// 设置透明度

var v = x> = 100? '': '알파 (불투명도 =' + x + ');

this.win.style.visibility = x <= 0? '숨겨진': '가시적'; // 즉, 버그

this.win.style.filter = V;

this.win.style.opacity = x / 100;

show : function () {// 渐显

ClearInterval (this.timer2);

var me = this, fx = this.fx (0, 100, 0.1), t = 0;

this.timer2 = setInterval (function () {

t = fx ();

me.setopacity (t [0]);

if (t [1] == 0) {clearinterval (me.timer2)}

}, 6); // 10 ~ 6

fx : 함수 (a, b, c) {// 缓冲计算

var cmath = math [(a -b)> 0? "바닥": "CEIL"], C = C || 0.1;

return function () {return [a += cmath ((b -a) * c), a -b]}

gety : function () {// 计算移动坐标

var d = document, b = document.body, e = document.documentElement;

var s = math.max (b.scrolltop, e.scrolltop);

var h = /backcompat/i.test(document.compatmode)? B. ClientHeight : E.ClientHeight;

var h2 = this.win.offsetheight;

return {foot : s + h + h2 + 2 + 'px', 상단 : S + H -H2 -2 + 'px'}}

moveto : 함수 (y) {// 移动动画

ClearInterval (this.Timer);

var me = this, a = parseint (this.win.style.top) || 0;

var fx = this.fx (a, parseint (y));

var t = 0;

this.timer = setInterval (function () {

t = fx ();

me.win.style.top = t [0] + 'px';

if (t [1] == 0) {

ClearInterval (Me.Timer);

me.bind ();

}

}, 6); // 10 ~ 6

bind : function () {// 绑定窗口滚动条与大小变化事件

var me = this, st, rt;

window.onscroll = function () {

클리어 타임 아웃 (ST);

클리어 타임 아웃 (me.timer2);

Me.SetOpacity (0);

st = settimeout (function () {

me.win.style.top = me.gety (). 상단;

me.show ();

}, 100); // 600 MOD 100

};

Window.onResize = function () {

클리어 타임 아웃 (RT);

rt = settimeout (function () {me.win.style.top = me.gety (). top}, 100);

}

init : function () {// 创建 html

function $ (id) {return document.getElementById (id)};

this.win = $ ( 'msg_win');

var set = {minbtn : 'msg_min', closeBtn : 'msg_close', 제목 : 'msg_title', 내용 : 'msg_content'};

for (var id in set) {this [id] = $ (set [id])};

var me = 이것;

this.minbtn.onclick = function () {me.set (); this.blur ()};

this.closebtn.onclick = function () {me.close ()};

this.char = navigator.useragent.tolowercase (). indexof ( 'firefox') + 1? [ '_', '::', '×'] : [ '0', '2', 'r']; // ff 不支持 웹dings 字体

this.minbtn.innerhtml = this.char [0];

this.closebtn.innerhtml = this.char [2];

settimeout (function () {// 初始化最先位置

me.win.style.display = 'block';

me.win.style.top = me.gety (). 풋;

me.moveto (me.gety (). 상단);

}, 0);

이것을 반환하십시오;

}

};

message.init ();

</스크립트>