[Javascript]Tạo cửa sổ động

Lucky_Star · #1 (**permalink**) 22-05-2008, 09:11 AM

Đây là 1 chức năng của JavaScript code để giúp bạn tạo ra 1 cửa sổ động. Nó đã thử nghiệm thành công trên IE6, Mozilla/Firefox, Opera 7.54 (Windows), Safari, Mozilla (Macintosh). Download file .js này về và include nó vào trong trang html của bạn như hình dưới:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Floating Window</title>
<script src="Drag.js"></script>
</head>
<body>

.......

</body>
</html>

Code của cửa sổ động như sau:

<div id="window" style="position:absolute; z-index:10; left:350px; top:160px; width:400px;background-color:#dde3eb; border:1px solid #464f5a; display:none;">

<div style="padding-bottom:8px; width:400px; background-color:#718191; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);">

<div style="position:absolute; top:2px; left:5px; font-size:16px; font-weight:bold; color:#FFFFFF;">Drag me!</div>

<div style="position:absolute; top:3px; left:377px; float:right;" onClick="this.parentNode.parentNode.style.display = 'none';">

<img src="How can I create a floating window on my html page.files/close_btn.gif" border="0"/>

</div>

</div>
<br/>
<div style="margin-left:20px;">your content here...</div>

<div style="margin-left:30px;">your content here...</div>

<div style="margin-left:40px;">your content here...</div>
<br/>

</div>

Nếu bạn có thêm kỹ năng trong CSS và lập trình JavaScript, bạn có thể thêm vào nhiều thiết kế và chức năng hấp dẫn cho chính cửa sổ này của mình.

Ðiều Chỉnh
Tạo trang in Email trang này
Xếp Bài
Chế độ bình thường Chuyển sang chế độ Pha trộn Chuyển sang chế độ dạng cây

Chủ đề giống nhau
Ðề tài	Người Gởi	Chuyên mục	Trả lời	Bài mới gởi
[Javascript]Quảng cáo chạy dọc 2 bên	Lucky_Star	Thiết kế web	0	22-05-2008 09:10 AM
[javascript]Đồng hồ bằng javascript	Lucky_Star	Thiết kế web	0	22-05-2008 09:07 AM

Ðang đọc: 1 (0 thành viên và 1 khách)