阅读全文...
1、可以覆盖父窗口，做了关闭按钮。
<html> <head> <script> function locking(){ document.all.ly.style.display="block"; document.all.ly.style.width=document.body.clientWidth; document.all.ly.style.height=document.body.clientHeight; document.all.Layer2.style.display='block'; } function Lock_CheckForm(theForm){ document.all.ly.style.display='none';document.all.Layer2.style.display='none'; return false; } </script> <style type="text/css"> <!-- .STYLE1 {font-size: 12px} a:link { color: #FFFFFF; text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } --> </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"></meta></head> <body> <p align="center"> <input type="button" value="弹出DIV" onClick="locking()" /> </p> <div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 2; left: 0px; display: none;"> </div> <!-- 浮层框架开始 --> <div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/10); background-color: #fff; display: none;" > <table width="540" height="300" border="0" cellpadding="0" cellspacing="0" style="border: 0 solid #e7e3e7; border-collapse: collapse ;" > <tr> <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px; font-weight: bold; font-size: 12px;" height="10" valign="middle"> <div align="right"><a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">[关闭]</a> </div></td> </tr> <tr> <td height="130" align="center"> </td> </tr> </table> </div> <!-- 浮层框架结束 --> </body> </html>
提示：你可以先修改部分代码再运行。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无缝滚动效果</title> <style type="text/css"> <!-- #nli_con { height: 200px; width: 400px; overflow: hidden; border: 1px solid #999999; } div,dl,dt,dd { margin: 0px; padding: 0px; } dl { padding-top: 5px; padding-bottom: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; font-size: 14px; margin-right: 10px; margin-left: 10px; } dd { font-size: 12px; } --> </style> <script language="javascript"> var $ = function (d){ typeof d == "string" &&(d = document.getElementById(d)); return $.fn.call(d); }; $.fn = function (){//附加2个方法 this.$ADD = function (fn){CLS.add(this,fn)}; this.addEvent = function (sEventType,fnHandler){ if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);} else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);} else {this["on" + sEventType] = fnHandler;} } this.removeEvent = function (sEventType,fnHandler){ if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);} else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);} else { this["on" + sEventType] = null;} } return this; }; var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}}; var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}} var Marquee = Class.create(); Marquee.prototype = { initialize: function(id,name,out,speed) { this.name = name; this.box = $(id); this.out = out; this.speed = speed; this.d = 1; this.box.style.position = "relative"; this.box.scrollTop = 0; var _li = this.box.firstChild; while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling; this.lis = this.box.getElementsByTagName(_li.tagName); this.len = this.lis.length; for(var i=0;i<this .lis.length;i++){//计算该复制多少节点，保证无缝滚动，没必要的就不复制 var __li = document.createElement(_li.tagName); __li.innerHTML = this.lis[i].innerHTML; this.box.appendChild(__li); if(this.lis[i].offsetTop>=this.box.offsetHeight)break; } this.Start(); this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[])); this.box.addEvent("mouseout",Bind(this,this.Start,[])); }, Start:function (){ clearTimeout(this.timeout); this.timeout = setTimeout(this.name+".Up()",this.out*1000) }, Up:function(){ clearInterval(this.interval); this.interval = setInterval(this.name+".Fun()",10); }, Fun:function (){ this.box.scrollTop+=this.speed; if(this.lis[this.d].offsetTop < = this.box.scrollTop){ clearInterval(this.interval); this.box.scrollTop = this.lis[this.d].offsetTop; this.Start(); this.d++; } if(this.d >= this.len + 1){ this.d = 1; this.box.scrollTop = 0; } } }; $(window).addEvent("load",function (){ marquee = new Marquee("nli_con","marquee",1,2);//加载完后运行代码， }); </this></script> </head> <body> <div id="nli_con"> <dl> <dt><a href=http://www.w3cnet.cn/' target='_blank'><strong>1. 域名与网址有什么区别？</strong></a></dt> <dd>一个完整网址范例如下： http://www.w3cnet.cn....</dd> </dl> <dl> <dt><a href='http://www.5jun.com/' target='_blank'><strong>2. 什么是虚拟主机？ </strong></a></dt> <dd>虚拟主机是使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机，每一台虚拟主机都具有独立的域名，具有完整的Internet服务器（WWW、FTP、Email等）功能，虚拟主机之间完全独立，并可由用户自行管理，在外界看来，每一台虚拟主机和一台独立的主机完全一样。迅捷主机网为中小客户提供优质的网络环境和服务器，并由高级网管负责监控。</dd> </dl> <dl> <dt><a href='http://www.5jun.com/' target='_blank'><strong>3. 关于中小企业网站建设的知识</strong></a></dt> <dd> 中小企业一直是企业上网工程主要服务的对象，中小企业上网的效果总是“犹抱琵琶半遮面”显现不出什么效果，本站整理了多年对中小企业服务的经验...</dd> </dl> <dl> <dt><a href='http://www.5jun.com/' target='_blank'><strong>4. 为什么要建立网站标准？什么是网站标准？</strong></a></dt> <dd> 我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的</dd> </dl> <dl> <dt><a href='http://www.5jun.com/' target='_blank'><strong>5. 企业网站建设须注意的10大问题</strong></a></dt> <dd> 企业网站已经成为一个企业互联网战略的基础，有人说:"10年以后，互联网业将消失。"...</dd> </dl> <dl> <dt><a href='http://www.5jun.com/' target='_blank'><strong>6. 2009牛年，网站怎样发展好</strong></a></dt> <dd> 第一，选择做网站内容， 制定网站内容，根据你的团队工作能力，工作量接受范围度等等，制定一个框架性的简单的方案。 最好能发挥自己的专长，如果你是三国里的张飞...</dd> </dl> <dl> <dt><a href='http://www.5jun.com/' target='_blank'><strong>7. Internet域名是什么??</strong></a></dt> <dd>Internet域名，是Internet网络上的一个服务器或一个网络系统的名字，在全世界，没有一个重复的域名。域名的形式是以若干个英文字母和数字组成，由...</dd> </dl> </div> </body> </html>
