CSS Beauty 风格的两列新闻显示样式

本文向您推荐的是 CSS Beauty 风格的两列新闻显示样式, 新闻是一般网站必不可少的功能, 而新闻列表的表现方式也是多姿多彩的, 本文介绍的是按两列显示的新闻列表方案, 同时还有一个 TAB 浏览的 Javascript 技巧和 FORM 元素的样式设计.

CSS Beauty 风格的两列新闻显示样式 – 示例

CSS 部分:

 
<style type="text/css">
<!--
body, td, div, p, span, textarea, select {
	font-size: 12px; font-family: verdana, arial, helvetica, sans-serif
}
a {
	color: #DCB20C; text-decoration: none; font-size: 12px;
}
a:hover {
	color: #CC9933; text-decoration: underline; font-size: 12px;
}

/* ClearFix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-table;}

/* Hides from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* 公用 FORM 样式 */
input, textarea{
	background: #fff;
	border: 1px solid #83cde1;
	border-top: 3px solid #83cde1;
}
input:hover, textarea:hover {
	background: #F0FDE2;
	border-top: 3px solid #b1e77a
}
input:focus, textarea:focus {
	background: #FCFFEC;
	border-top: 3px solid #b1e77a
}
.submit { border: 0; width: auto; }
.submit:hover, .submit:active { border:0; }
.radio { background: none; border: 0; }


#news {
	margin:0;
	padding:0 15px 5px 10px;
	border-bottom: 1px dotted #BBE0EB;
}

/* TAB样式 开始 */
#news ul.domtabs {
	list-style: none;
	font-size: 0.9em;
	border-bottom: 1px dotted #BBDFED;
	margin: 0 0 20px 0;
	padding: 0 30px 2px 0;
	text-align: right;
}
#news ul.domtabs li {
	display: inline;
	margin: 0;
}
#news ul.domtabs a:link,
#news ul.domtabs a:visited,
#news ul.domtabs a:active,
#news ul.domtabs a:hover {
	text-decoration: none;
	padding: 2px 5px 4px 5px;
	position: relative;
	bottom: 0;
	color: #89C7D9;
}
#news ul.domtabs li.active a:link,
#news ul.domtabs li.active a:visited,
#news ul.domtabs li.active a:active,
#news ul.domtabs li.active a:hover {
	background:#fff;
	padding: 2px 10px 4px 10px;
	border: 1px dotted #BBDFED;
	border-bottom: 1px solid #fff;
	position: relative;
	bottom: 0;
	color: #418FA5;
}
#news ul.domtabs a:hover {
	text-decoration: underline;
}
#news ul.domtabs li.active a:hover {
	text-decoration: none;
}


/* 新闻列表样式 开始 */
#newswrap {
	margin:0;
}
#news-left, #news-right {
	float: right;
	width: 48%;
	max-width: 330px;
}
#news .more {
	clear: both;
	margin:0;
	padding: 0 15px 0 0;
	font-size: 0.85em;
	text-align: right;
	line-height: 1em;
}
#news .more img {
	vertical-align: bottom;
	border: 0;
	margin: 0 0 0 5px;
}
#news-right p, #news-left p {
	font-size: 0.85em;
	padding: 0 5px 0 0;
	margin: 0 0 0 12px;
	color: #4896AC;
}
#news-right p a, #news-left p a {
	font-weight: bold;
	display:block;
}
#news-right p a.continue, #news-left p a.continue {
	font-weight: normal;
}
#news p.author {
	color: #83cde1;
	border: 0;
	padding: 0 0 5px 0;
	margin: 0 10px 10px 12px;
	border-bottom: 1px dotted #BBE0EB;
}
#news p.author a {
	color: #86d734;
	font-weight: normal;
	display:inline;
	font-size: 0.85em;
}
#news p.author a:hover {
	text-decoration: underline;
}
#news p.author:hover {
	background: none;
}


/* FORM 表单样式 开始 */
#news #form {
	display: none;
}
#news form {
	float: right;
	margin: 0;
	padding: 0;
	background: #fff;
	font-size: 0.9em;
	width: 85%;
}
#news form p {
	padding: 0 0 0 20px;
	float: left;
	margin: 0;
	width: 180px;
	color: #4896AC;
}
#news form p.note {
	margin: 0 0 20px 0;
}
#news fieldset {
	border: 0;
}
#news legend {
	display: none;
}
#news label {
	display: block;
}
#news input {
	margin: 0 0 10px 0;
	display: block;
	width: 150px;
}
#news textarea {
	margin: 0;
	width: 150px;
	height: 100px;
}
#news .submit {
	width: auto;
	border: 0;
}

-->
</style>

HTML 部分:

 
<div id="news" class="domtab clearfix">

	<ul class="domtabs">
		<li class="active"><a href="#news-right">Current News</a></li>
		<li><a href="#submit-news">Submit News</a></li>
	</ul>

	<div style="display: block;" id="newswrap">	
	
		<div id="news-right">
			
			<p><a href="http://www.sitepoint.com/article/accessibility-techniques">Advanced Accessibility Techniques.</a> Techniques you can implement to achieve advanced accessibility beyond the W3C guidelines.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 07 at 07:24 AM</p>
						
			<p><a href="http://www.brothercake.com/site/resources/reference/3d/">Dynamic 3D with CSS and the DOM.</a>Underground - A 3D dungeon environment built using Tantek's technique of creating shapes out of the interaction of CSS borders.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 04 at 08:38 AM</p>
						
			<p><a href="http://www.brothercake.com/site/resources/scripts/dbx/">Docking boxes (dbx).</a> Adds animated drag 'n' drop, snap-to-grid, and show/hide-contents functionality to any group of elements.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 03 at 11:22 AM</p>
						
			<p><a href="http://www.useit.com/alertbox/screen_resolution.html">Screen Resolution and Page Layout.</a> Optimize Web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:50 AM</p>
						
			<p><a href="http://accessites.org/gbcms_xml/news_page.php?id=19">Visual Vs. Structural.</a> Does the choice of approach — visual vs structural — have any impact on the accessibility or usability of a site?</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 02 at 07:47 AM</p>
			
		</div>

		<div id="news-left">
			
			<p><a href="http://www.456bereastreet.com/archive/200608/google_valid_and_strict/">Google valid and strict.</a>Roger Johansson debunks the myth that Google has deprecated code tosave on bandwidth. He speculates why they still use old markup.</p>
			<p class="author">Posted by <a href="http://sonspring.com/">Nathan Smith</a> on Aug 15 at 01:37 AM</p>
						
			<p><a href="http://techfoolery.com/archives/2006/08/11/2021/">Animated Page Scroller</a>. An elegant JavaScript solution for page navigation</p>
			<p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:43 AM</p>
						
			<p><a href="http://www.aptana.com/" title="JavaScript Love Maker">Aptana Web IDE</a>. A robust, JavaScript-focused IDE for building dynamic web applications.</p>
			<p class="author">Posted by <a href="http://dustindiaz.com/">Dustin Diaz</a> on Aug 15 at 12:28 AM</p>
						
			<p><a href="http://www.flickrshow.com/">Flickrshow.</a> Provides you with the simplest way of displaying your Flickr photosets on your own website with the use of some javascript.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 10 at 11:06 AM</p>
						
			<p><a href="http://jquery.com/demo/thickbox/">ThickBox 2.0.</a> Version 2 of the JQuery based photo slideshow script, new features include iFrame support, multi-picture slideshows and more.</p>
			<p class="author">Posted by <a href="http://www.cssbeauty.com/">Alex Giron</a> on Aug 09 at 09:31 AM</p>
			
		</div>

		<p class="more"><a href="http://www.cssbeauty.com/news/">News Archive</a> <a href="http://www.cssbeauty.com/rss/news/"><img src="rss.gif" alt="RSS Feed" /></a></p>

	</div>

	<div id="form">
		<form action="/news/submit/snews.php" method="post" id="submit-news">
			<fieldset>
				<legend>Submit News</legend>

				<p>
				<label for="title">Title:</label>

				<input type="text" tabindex="1" name="n-title" id="title" />

				<label for="url">News URL:</label>
				<input type="text" tabindex="2" name="n-url" id="url" />

				<label for="description">News Description:</label>
				<textarea tabindex="3" name="n-description" id="description" rows="5" cols="15"></textarea>
				<small>Max 120 characters</small>

				</p>

				<p class="note"><strong>Note:</strong> Your submission will be placed on queue pending review, if accepted your news item will show up in the next few hours.</p>
					
				<p>
				<label for="name">Your Name:</label>
				<input type="text" tabindex="4" name="s-name" id="name" />

				<label for="email">Your email:</label>

				<input type="text" tabindex="5" name="s-email" id="email" />

				<label for="yurl">Your Website:</label>
				<input type="text" tabindex="6" name="s-url" id="yurl" />
					
				<input class="submit" type="image" src="submit.gif" alt="submit" tabindex="7" />
				</p>
			</fieldset>
		</form>
	</div>

</div>

本文只是摘录原网站的部分代码, 目的是整理其实现技巧, 如果您有其他目的或用途, 请联系原网站.

执行操作前弹出确认框

在管理网站内容时,往往有一个记录列表,而这些列表后面通常都有个编辑或者删除的链接,有时不小心点击了删除链接,会导致一些无法挽回的结果,看过本文后,你就可以在页面加上一些代码,当你要执行操作的时候,它就会弹出确认框.如果是误操作,可以轻而易举的取消.

执行操作前弹出确认框 – 示例

代码:

 
<script type="text/javascript" language="javascript">
<!--
function confirmAct()
{
	if(confirm('确定要执行此操作吗?'))
	{
		return true;
	}
	return false;
}
//-->
</script>

<a href="operate.php?mod=user&act=delete&id=564" onclick="return confirmAct();">执行操作</a>

代码说明: 在普通超链接代码中加入

onclick="return confirmAct();"

更新记录后关闭子窗口并刷新父窗口的Javascript

有时我们需要在新打开的窗口里面编辑信息,等编辑完了,需要将当前窗口关闭并且刷新父窗口,以使修改生效,本文就是介绍用 javascript 来实现"更新记录后关闭子窗口并刷新父窗口".

更新记录后关闭子窗口并刷新父窗口的Javascript – 示例

父窗口代码:

 
<a href="javascript:void(0)" onclick="window.open('child.html','child','width=400,height=300,left=200,top=200');">打开子窗口</a>

子窗口代码:

 
<script language="JavaScript" type="text/javascript">
<!--
function refreshParent()
{
	window.opener.location.href = window.opener.location.href;
	if (window.opener.progressWindow)
	{
		window.opener.progressWindow.close();
	}
	window.close();
}
//-->
</script>

<a href="javascript:void(0)" onclick="refreshParent()">刷新父窗口并关闭当前窗口</a>

实现的关键代码是在子窗口里面,父窗口只是执行打开子窗口的动作.

AJAX介绍–上手篇

本文章为 Mozilla Developer Center 的 AJAX:Getting Started 的翻译。这篇文章说明 AJAX 相关技术的基础,并提供实例供您上手。

AJAX 是啥?

AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词,但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略,在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。

这两个 JavaScript 功能 是:

* 在不重新读取页面的情况下对伺服器送出要求(request)
* 解析、使用 XML 文件

第一步 – 怎么发出 XMLHttpRequest

为了用 JavaScript 对伺服器发送 HTTP 要求,你必须先以相关的类别(class)制出实体(instance)。Internet Explorer 首先以 ActiveX 物件方式提供 XMLHTTP 类别,而 Mozilla、Safari 及其他浏览器则随后以 XMLHttpRequest 类别支援此 ActiveX 物件中的类别及属性。

因此,如果想跨浏览器,那么可以这么写:

 
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

(由于这段程式仅供说明,所以是采最简方式写出。本文第三步中有另一种我们比较常用的写法。)

有些版本的 Mozilla 浏览器在伺服器送回的资料未含 XML mime-type 档头(header)时会出错。为了避免这个问题,你可以用下列方法覆写伺服器传回的档头,以免传回的不是 text/xml。

 
http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

接下来是要决定伺服器传回资料后的处理方式,此时你只要以 onreadystatechange 这个属性指明要处理传回值的 JavaScript 函式名称即可,例如:

http_request.onreadystatechange = nameOfTheFunction;

注意,指定的函式名称后不加括号也没有参数。除了指定函式名称外,你也能用 Javascript 即时定义函式的方法来定一个新的处理函式,如下:

 
http_request.onreadystatechange = function(){
    // do the thing
};

决定处理方式之后你得确实发出 request,此时需叫用 HTTP request 类别的 open() 及 send() 方法,如下:

 
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

* open() 的第一个参数是 HTTP request 的方法,也就是从 GET、POST、HEAD 中择一使用,亦可用你主机上支援的方式。为遵循 HTTP 标准,请记得这些方法都是大写,不然有的浏览器(如 Firefox)或许不会理你。其它 HTTP request 可以支援的方法列表请参考 W3C 规格书 。
* 第二个参数是目标 URL。基于安全考量,你不能叫用同网域以外的网页。如果网域不同,则叫用 open() 时会出现「权限不足,拒绝存取」那类的错误。通常大伙会犯的错误多为在 domain.tld 网的网站下呼叫 www.domain.tld 中的网页,仅是一点点差别都不行。
* 第三个参数决定此 request 是否不同步进行,如果设定为 TRUE 则即使伺服器尚未传回资料也会继续执行其余的程式,这也就是 AJAX 中第一个 A 代表的意义。

send() 的参数在以 POST 发出 request 时可以是任何想传给伺服器的东西,而资料则以查询字串的方式列出,例如:

name=value&anothername=othervalue&so=on

不过如果你想要以 POST 方式传送资料,则必须先将 MIME 型态改好,如下:

 
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

否则伺服器就不会理你传过来的资料了。

第二步 – 处理伺服器传回的资料

传出 request 时必须提供处理传回值的函式名称。

http_request.onreadystatechange = nameOfTheFunction;

那么来看看这个函式该做些什么。首先,它必须检查 request 目前的状态:如果状态值为 4 代表伺服器已经传回所有资讯了,便可以开始解析所得资讯。

 
if (http_request.readyState == 4) {
    // everything is good, the response is received
} else {
    // still not ready
}

readyState 所有可能的值如下:

* 0 (还没开始)
* 1 (读取中)
* 2 (已读取)
* 3 (资讯交换中)
* 4 (一切完成)

接下来要检查伺服器传回的 HTTP 状态码。所有状态码列表可于 W3C 网站上查到,但我们要管的是 200 OK 这种状态。

 
if (http_request.status == 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
}

检查传回的 HTTP 状态码后,要怎么处理传回的资料就由你决定了。有两种存取资料的方式:

* http_request.responseText – 这样会把传回值当字串用
* http_request.responseXML – 这样会把传回值视为 XMLDocument 对象,而后可用 JavaScript DOM 相关函式处理

第三步 – 万事俱备 – 简单范例

好,接着就做一次简单的 HTTP 范例,演示方才的各项技巧。这段 JavaScript 会向伺服器要一份里头有「I’m a test.」字样的 HTML 文件(test.html),而后以 alert() 将文件内容列出。

 
<script type="text/javascript" language="javascript">
    function makeRequest(url) {
 
        var http_request = false;
 
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
                // See note below about this line
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
 
        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = function() { alertContents(http_request); };
        http_request.open('GET', url, true);
        http_request.send(null);
 
    }
 
    function alertContents(http_request) {
 
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
 
    }
</script>
<span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest('test.html')">
        Make a request
</span>

在此范例中:

* 首先使用者按下「Make a request」
* 这么一来就会呼叫 makeRequest() 函式,亦传入参数值 test.html (也就是那份 HTML 档的名称,放在同目录下)
* 接着发出 request,而后会将主导权交给 onreadystatechange 指定的 alertContents() 函式
* alertContents() 检查回应是否正常,而后以 alert() 将 test.html 的内容列出

你可以由此测试本例 ,也可以参考测试档案

第四步 – 处理 XML 回应值

前面的例子中,在收到 HTTP 传回值后我们以物件的 reponseText 属性使用 test.html 档案的内容,接着来试试 responseXML 属性的方法。

首先,我们得做个格式正确的 XML 文件,以便稍后取用。此档名唤 test.xml,内容如下:

 
<?xml version="1.0" ?>
<root>
    I'm a test.
</root>

在程式中,我们叫用档案的地方只须略事修改如下:

 
...
onclick="makeRequest('test.xml')">
...

接着在 alertContents() 中,我们必须将 alert(http_request.responseText); 改成这样:

 
var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

这样一来我们便可取得 responseXML 所传回的 XMLDocument 对象,而后以 DOM 相关的方法取用 XML 文件内容。你可以参考 test.xml 的原始码 以及修改过后的测试程式

其他与 DOM 相关的方法,请参考 Mozilla’s DOM implementation 文件。

用 Javascript 制作可暂停的滚动公告板

由标题很容易看出来,这是一个可以在显示每一个消息时都会暂停的动态滚动条,滚动条的样式完全由CSS控制,当然也包括显示尺寸。调整尺寸后就可以很容易的制作出一个单行的滚动公告板。

用 Javascript 制作可暂停的滚动公告板 – 示例

代码:

将以下代码放在网页的<head></head>之间。

 
<style type="text/css">

/*Example CSS for the two demo scrollers*/

#pscroller1{
width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}

#pscroller2{
width: 450px;
height: 22px;
border: 1px solid black;
padding: 3px;
}

#pscroller2 a{
text-decoration: none;
}

.someclass{ //class to apply to your scroller(s) if desired
}

BODY, td, div {
FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
A {
COLOR: #003499; TEXT-DECORATION: none; FONT-SIZE: 12px;
}
A:hover {
COLOR: #000000; TEXT-DECORATION: underline; FONT-SIZE: 12px;
}

</style>
 
<script type="text/javascript">

/*Example message arrays for the two demo scrollers*/

var pausecontent=new Array()
pausecontent[0]='<a href="http://YITU.org">艺图</a><br />欣赏高质量的国外艺术大师作品图片。欣赏经典名作,体味艺术人生。'
pausecontent[1]='<a href="http://www.codebit.cn">CodeBit.cn</a><br />收录经典小段代码,翻译转载国外优秀技术文章。'

var pausecontent2=new Array()
pausecontent2[0]='<a href="http://YITU.org">【艺图】 欣赏高质量的国外艺术大师作品图片。欣赏经典名作,体味艺术人生。</a>'
pausecontent2[1]='<a href="http://www.codebit.cn">【CodeBit.cn】 收录经典小段代码,翻译转载国外优秀技术文章。</a> '

</script>

<script type="text/javascript">

/***********************************************
* Pausing up-down scroller- ? Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function pausescroller(content, divId, divClass, delay){
	this.content=content //message array content
	this.tickerid=divId //ID of ticker div to display information
	this.delay=delay //Delay between msg change, in miliseconds.
	this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
	this.hiddendivpointer=1 //index of message array for hidden div
	document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style

="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; 

visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
	var scrollerinstance=this
	if (window.addEventListener) //run onload in DOM2 browsers
		window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
	else if (window.attachEvent) //run onload in IE5.5+
		window.attachEvent("onload", function(){scrollerinstance.initialize()})
	else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
	setTimeout(function(){scrollerinstance.initialize()}, 500)
}

// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------

pausescroller.prototype.initialize=function(){
	this.tickerdiv=document.getElementById(this.tickerid)
	this.visiblediv=document.getElementById(this.tickerid+"1")
	this.hiddendiv=this.hiddendiv=document.getElementById(this.tickerid+"2")
	this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
	//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
	this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
	this.getinline(this.visiblediv, this.hiddendiv)
	this.hiddendiv.style.visibility="visible"
	var scrollerinstance=this
	this.tickerdiv.onmouseover=function(){scrollerinstance.mouseoverBol=1}
	this.tickerdiv.onmouseout=function(){scrollerinstance.mouseoverBol=0}
	setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}


// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------

pausescroller.prototype.animateup=function(){
	var scrollerinstance=this
	if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
		this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
		this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
		setTimeout(function(){scrollerinstance.animateup()}, 50)
	}else{
		this.getinline(this.hiddendiv, this.visiblediv)
		this.swapdivs()
		setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
	}
}

// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------

pausescroller.prototype.swapdivs=function(){
	var tempcontainer=this.visiblediv
	this.visiblediv=this.hiddendiv
	this.hiddendiv=tempcontainer
}

pausescroller.prototype.getinline=function(div1, div2){
	div1.style.top=this.visibledivtop+"px"
	div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}

// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------

pausescroller.prototype.setmessage=function(){
	var scrollerinstance=this
	if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
		setTimeout(function(){scrollerinstance.setmessage()}, 100)
	else{
		var i=this.hiddendivpointer
		var ceiling=this.content.length
		this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
		this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
		this.animateup()
	}
}

pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
	if (tickerobj.currentStyle)
		return tickerobj.currentStyle["paddingTop"]
	else if (window.getComputedStyle) //if DOM2
		return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
	else
		return 0
}

</script>

然后将下面的代码插入到网页的<body></body>之间,可以放在你想显示的任意位置。

 
<script type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)

</script>

调用说明:

new pausescroller(pausecontent, "pscroller1", "someclass", 3000)

其中 pausecontent 是你在<head></head>之间的代码定义的显示内容。pscroller1 是你在CSS中定义的唯一的滚动层ID, someclass 是任意您想附加的显示样式, 3000 是控制暂停的时间,以毫秒为单位。

控制显示样式的方法就是用标准的CSS语法:

 
#pscroller1{
width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}

如果想创建单行的滚动条可以简单的将 height 值改为 20px 或是 25px 即可。

可暂停的滚动公告板,就这样完成了。

怎么用 javascript 实现拖拽

在网页上实现拖拽其实不难,第一我们需要知道鼠标的位置,第二我们需要知道当用户点击一个网页元素时这个元素要能够拖拽。

怎么用 javascript 实现拖拽 – 示例1

获取鼠标移动信息

开始我们需要获取鼠标的坐标.我们添加一个document.onmousemove 就可以达到此目的:

 
document.onmousemove = mouseMove;

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

怎么用 javascript 实现拖拽 – 示例2

我们首先要声明一个 evnet 对象,无论移动、点击、按键等,都会激活一个 evnet ,在 Internet Explorer 里, event 是全局变量,会被存储在 window.event 里. 在 firefox 或者其他浏览器,event 会被相应的函数获取.当我们将mouseMove函数赋值于document.onmousemove,mouseMove 会获取鼠标移动事件。

为了让 ev 在所有浏览器下获取了 event 事件,在Firefox下"||window.event"将不起作用,因为ev已经有了赋值。在 MSIE 中 ev 为空,所以得到 window.event 。

因为在这篇文章中我们需要多次获取鼠标位置,所以我们设计了一个 mouseCoords 函数,它包含一个参数 : event 。

因为我们要在 MSIE 和其他浏览器下运行,Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置,如果你有一个 500*500 的窗口并且你的鼠标在绝对中间,那么 pageX 和 pageY 的值都是 250,如果你向下滚动 500, 那么 pageY 将变成 750。

MSIE 正好相反,它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置,而不是文档。在同样的例子中,如果你向下滚动500,clientY 依然是 250,因此,我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后,MSIE 中文档并不是从 0,0 开始,而是通常有一个小的边框(通常是 2 象素),边框的大小定义在 document.body.clientLeft 和 clientTop 中,我们也把这些加进去。

很幸运,我们现在已经用 mouseCoords 函数解决了坐标问题,不需为此费心了。

捕捉鼠标点击

下面我们需要知道鼠标什么时候点击和什么时候释放,如果你跳过此步,当你的鼠标移动到这些可拖动的元素是,他们就开始“拖动”了,这将是非常恼人并且违反直觉的。

这里有两个函数帮助我们:onmousedown 和 onmouseup ,我们预先设置一个函数获取 document.onmousedown 和 document.onmouseup,这样看起来我们已经能够获取 document.onmousedown 和 document.onmouseup,但是,当我们获取了 document.onmousedown ,同时也激活了点击属性,如:text, images, tables 等,但是我们只想取得那些能够拖动得属性,所有我们设置函数来获取我们想要移动的对象。

 
document.onmouseup = mouseUp;
var dragObject     = null;

function makeClickable(object){
	object.onmousedown = function(){
		dragObject = this;
	}
}

function mouseUp(ev){
	dragObject = null;
}

我们现在有了一个可定义的 dragObject,它获取你点击的任意元素,如果你释放鼠标按钮, dragObject 被清空,所以如果 dragObject != null ,我们就知道我们可能在拖动着什么。

怎么用 javascript 实现拖拽 – 示例3

移动一个元素

我们现在已经知道如何捕捉鼠标的移动和点击,剩下的就是拖动了,
首先,要明确我们想要拖动的位置,将 position 设置为 “absolute” 意味着当你设置 style.top 或 style.left ,这个尺度是从页面的 top-left 开始算的,这样我们就可以继续了。

当我们设置 item.style.position=’absolute’,所有的需要做的就是改变 top 或 left 的值,这样就可以移动了。

 
document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;

var dragObject  = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);

	if(dragObject){
		dragObject.style.position = 'absolute';
		dragObject.style.top      = mousePos.y - mouseOffset.y;
		dragObject.style.left     = mousePos.x - mouseOffset.x;

		return false;
	}
}
function mouseUp(){
	dragObject = null;
}

function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

怎么用 javascript 实现拖拽 – 示例4

你可能注意到这些代码基本上是前面的集合,将前面的示例合在一起,就可以实现拖拽了。

当我们点击一个元素,我们还会获取其他变量,mouseOffset 定义着我们的鼠标位置,如果我们有一个 20*20 的图片,并且点击在它的中间,那么 mouseOffset 就是 {x:10, y:10},如果点击在图片的 top-left ,这个值就是 {x:0, y:0} 。我们用这些方法获取我们的鼠标和图片的信息,如果忽略这些,我们将永远处在相同的元素位置。

我们的 mouseOffset 函数使用了另外的函数 getPosition,getPosition 的目的是返回元素相当于文档的位置,我们仅仅读取 item.offsetLeft 或 item.style.left ,将得到元素相对于其父元素的位置,而不是整个文档,所有的脚本都是相对于文档,这样就会好一些。

为了完成 getPosition 的任务,必须循环取得此的父级,我们将得到元素的 left-top 的位置.我们可以管理想要的 top 与 left 列表.

当我们有了这些信息,并且移动鼠标,mouseMove 将一直运行,首先,我们要确定元素的 style.position 是 absolute,接着我们拖拽元素到任何我们我们已经定义好的位置,当鼠标释放,dragObject 被重置, mouseMove 将不再做任何事情。

拖拽一个元素

前面的例子目的很简单,就是拖拽item到我们希望到的地方.我们经常还有其他目的如删除item,比如我们可以将item拖到垃圾桶里,或者其他页面定义的位置.

很不幸,我们有一个很大的难题,当我们拖拽,item会在鼠标之下,比如mouseove,mousedown,mouseup或者其他mouse action.如果我们拖拽一个item到垃圾桶上,鼠标信息还在item上,不在垃圾桶上.

怎么解决这个问题呢?有几个方法可以来解决.第一,这是以前比较推荐的,我们在移动鼠标时item会跟随鼠标,并占用了mouseover/mousemove等鼠标事件,我们不这样做,只是让item跟随着鼠标,并不占用mouseover等鼠标事件,这样会解决问题,但是这样并不好看,我们还是希望item能直接跟在mouse下.

另一个选择是不做item的拖拽.你可以改变鼠标指针来显示需要拖拽的item,然后放在鼠标释放的位置.这个解决方案,也是因为美学原因不予接受.

最后的解决方案是,我们并不去除拖拽效果.这种方法比前两种繁杂许多,我们需要定义我们需要释放目标的列表,当鼠标释放时,手工去检查释放的位置是否是在目标列表位置上,如果在,说明是释放在目标位置上了.

 
/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/

var dropTargets = [];

function addDropTarget(dropTarget){
	dropTargets.push(dropTarget);
}

function mouseUp(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);

	for(var i=0; i<dropTargets.length; i++){
		var curTarget  = dropTargets[i];
		var targPos    = getPosition(curTarget);
		var targWidth  = parseInt(curTarget.offsetWidth);
		var targHeight = parseInt(curTarget.offsetHeight);

		if(
			(mousePos.x > targPos.x)                &&
			(mousePos.x < (targPos.x + targWidth))  &&
			(mousePos.y > targPos.y)                &&
			(mousePos.y < (targPos.y + targHeight))){
				// dragObject was dropped onto curTarget!
		}
	}

	dragObject   = null;
}

怎么用 javascript 实现拖拽 – 示例5

鼠标释放时会去取是否有drop属性,如果存在,同时鼠标指针还在drop的范围内,执行drop操作.我们检查鼠标指针位置是否在目标范围是用(mousePos.x>targetPos.x),而且还要符合条件(mousePos.x<(targPos.x + targWidth)).如果所有的条件符合,说明指针确实在范围内,可以执行drop指令了.

把所有的内容集合到一起

最后我们拥有了所有的drag/drop的脚本片断!下一个事情是我们将创建一个DOM处理。

下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面,它可以用户记录一个list(列表),定为一个导航窗口在左边或者右边,或者更多的函数你可以想到的.

下一步我们将通过"假代码"让reader看到真代码,下面为推荐:

  • 当document第一次载入时,创建dragHelper DIV.dragHelper将给移动的item加阴影.真实的item没有被dragged,只是用了insertBefor和appendChild来移动了,我们隐藏了dragHelper
  • 有了mouseDown与mouseUp函数.所有的操作会对应到当到iMouseDown的状态中,只有当mouse左键为按下时iMouseDown才为真,否则为假.
  • 我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相对彼此的容器.任何参数(containers)将通过CreatedcragContainer进行重组与序列化,这样可以自由的移动.CreateDragContainer函数也将item进行绑定与设置属性.
  • 现在我们的代码知道每个item的加入,当我们移动处mouseMove,mouseMove函数首先会设置变量target,鼠标移动在上面的item,如果这个item在容器中(checked with getAttribute):
    • 运行一小段代码来改变目标的样式.创造rollover效果
    • 检查鼠标是否没有放开,如果没有
      • 设置curTarget代表当前item
      • 记录item的当前位置,如果需要的话,我们可以将它返回
      • 克隆当前的item到dragHelper中,我们可以移动带阴影效果的item.
      • item拷贝到dragHelper后,原有的item还在鼠标指针下,我们必须删除掉dragObj,这样脚本起作用,dragObj被包含在一个容器中.
      • 抓取容器中所有的item当前坐标,高度/宽度,这样只需要记录一次,当item被drag时,每随mouse移动,每移钟就会记录成千上万次.
    • 如果没有,不需要做任何事,因为这不是一个需要移动的item
  • 检查curTarget,它应该包含一个被移动的item,如果存在,进行下面操作
    • 开始移动带有阴影的item,这个item就是前文所创建的
    • 检查每个当前容器中的container,是否鼠标已经移动到这些范围内了
      • 我们检查看一下正在拖动的item是属于哪个container
      • 放置item在一个container的某一个item之前,或者整个container之后
      • 确认item是可见的
    • 如果鼠标不在container中,确认item是不可见了.
  • 剩下的事就是捕捉mouseUp的事件了
 
// iMouseDown represents the current mouse button state: up or down
/*
lMouseState represents the previous mouse button state so that we can
check for button clicks and button releases:

if(iMouseDown && !lMouseState) // button just clicked!
if(!iMouseDown && lMouseState) // button just released!
*/
var mouseOffset = null;
var iMouseDown  = false;
var lMouseState = false;
var dragObject  = null;

// Demo 0 variables
var DragDrops   = [];
var curTarget   = null;
var lastTarget  = null;
var dragHelper  = null;
var tempDiv     = null;
var rootParent  = null;
var rootSibling = null;

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function CreateDragContainer(){
	/*
	Create a new "Container Instance" so that items from one "Set" can not
	be dragged into items from another "Set"
	*/
	var cDrag        = DragDrops.length;
	DragDrops[cDrag] = [];

	/*
	Each item passed to this function should be a "container".  Store each
	of these items in our current container
	*/
	for(var i=0; i<arguments.length; i++){
		var cObj = arguments[i];
		DragDrops[cDrag].push(cObj);
		cObj.setAttribute('DropObj', cDrag);

		/*
		Every top level item in these containers should be draggable.  Do this
		by setting the DragObj attribute on each item and then later checking
		this attribute in the mouseMove function
		*/
		for(var j=0; j<cObj.childNodes.length; j++){

			// Firefox puts in lots of #text nodes...skip these
			if(cObj.childNodes[j].nodeName=='#text') continue;

			cObj.childNodes[j].setAttribute('DragObj', cDrag);
		}
	}
}

function mouseMove(ev){
	ev         = ev || window.event;

	/*
	We are setting target to whatever item the mouse is currently on

	Firefox uses event.target here, MSIE uses event.srcElement
	*/
	var target   = ev.target || ev.srcElement;
	var mousePos = mouseCoords(ev);

	// mouseOut event - fires if the item the mouse is on has changed
	if(lastTarget && (target!==lastTarget)){
		// reset the classname for the target element
		var origClass = lastTarget.getAttribute('origClass');
		if(origClass) lastTarget.className = origClass;
	}

	/*
	dragObj is the grouping our item is in (set from the createDragContainer function).
	if the item is not in a grouping we ignore it since it can't be dragged with this
	script.
	*/
	var dragObj = target.getAttribute('DragObj');

	 // if the mouse was moved over an element that is draggable
	if(dragObj!=null){

		// mouseOver event - Change the item's class if necessary
		if(target!=lastTarget){
			var oClass = target.getAttribute('overClass');
			if(oClass){
				target.setAttribute('origClass', target.className);
				target.className = oClass;
			}
		}

		// if the user is just starting to drag the element
		if(iMouseDown && !lMouseState){
			// mouseDown target
			curTarget     = target;

			// Record the mouse x and y offset for the element
			rootParent    = curTarget.parentNode;
			rootSibling   = curTarget.nextSibling;

			mouseOffset   = getMouseOffset(target, ev);

			// We remove anything that is in our dragHelper DIV so we can put a new item in it.
			for(var i=0; i<dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]);

			// Make a copy of the current item and put it in our drag helper.
			dragHelper.appendChild(curTarget.cloneNode(true));
			dragHelper.style.display = 'block';

			// set the class on our helper DIV if necessary
			var dragClass = curTarget.getAttribute('dragClass');
			if(dragClass){
				dragHelper.firstChild.className = dragClass;
			}

			// disable dragging from our helper DIV (it's already being dragged)
			dragHelper.firstChild.removeAttribute('DragObj');

			/*
			Record the current position of all drag/drop targets related
			to the element.  We do this here so that we do not have to do
			it on the general mouse move event which fires when the mouse
			moves even 1 pixel.  If we don't do this here the script
			would run much slower.
			*/
			var dragConts = DragDrops[dragObj];

			/*
			first record the width/height of our drag item.  Then hide it since
			it is going to (potentially) be moved out of its parent.
			*/
			curTarget.setAttribute('startWidth',  parseInt(curTarget.offsetWidth));
			curTarget.setAttribute('startHeight', parseInt(curTarget.offsetHeight));
			curTarget.style.display  = 'none';

			// loop through each possible drop container
			for(var i=0; i<dragConts.length; i++){
				with(dragConts[i]){
					var pos = getPosition(dragConts[i]);

					/*
					save the width, height and position of each container.

					Even though we are saving the width and height of each
					container back to the container this is much faster because
					we are saving the number and do not have to run through
					any calculations again.  Also, offsetHeight and offsetWidth
					are both fairly slow.  You would never normally notice any
					performance hit from these two functions but our code is
					going to be running hundreds of times each second so every
					little bit helps!

					Note that the biggest performance gain here, by far, comes
					from not having to run through the getPosition function
					hundreds of times.
					*/
					setAttribute('startWidth',  parseInt(offsetWidth));
					setAttribute('startHeight', parseInt(offsetHeight));
					setAttribute('startLeft',   pos.x);
					setAttribute('startTop',    pos.y);
				}

				// loop through each child element of each container
				for(var j=0; j<dragConts[i].childNodes.length; j++){
					with(dragConts[i].childNodes[j]){
						if((nodeName=='#text') || (dragConts[i].childNodes[j]==curTarget)) continue;

						var pos = getPosition(dragConts[i].childNodes[j]);

						// save the width, height and position of each element
						setAttribute('startWidth',  parseInt(offsetWidth));
						setAttribute('startHeight', parseInt(offsetHeight));
						setAttribute('startLeft',   pos.x);
						setAttribute('startTop',    pos.y);
					}
				}
			}
		}
	}

	// If we get in here we are dragging something
	if(curTarget){
		// move our helper div to wherever the mouse is (adjusted by mouseOffset)
		dragHelper.style.top  = mousePos.y - mouseOffset.y;
		dragHelper.style.left = mousePos.x - mouseOffset.x;

		var dragConts  = DragDrops[curTarget.getAttribute('DragObj')];
		var activeCont = null;

		var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);
		var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);

		// check each drop container to see if our target object is "inside" the container
		for(var i=0; i<dragConts.length; i++){
			with(dragConts[i]){
				if(((getAttribute('startLeft'))                               < xPos) &&
					((getAttribute('startTop'))                                < yPos) &&
					((getAttribute('startLeft') + getAttribute('startWidth'))  > xPos) &&
					((getAttribute('startTop')  + getAttribute('startHeight')) > yPos)){

						/*
						our target is inside of our container so save the container into
						the activeCont variable and then exit the loop since we no longer
						need to check the rest of the containers
						*/
						activeCont = dragConts[i];

						// exit the for loop
						break;
				}
			}
		}

		// Our target object is in one of our containers.  Check to see where our div belongs
		if(activeCont){
			// beforeNode will hold the first node AFTER where our div belongs
			var beforeNode = null;

			// loop through each child node (skipping text nodes).
			for(var i=activeCont.childNodes.length-1; i>=0; i--){
				with(activeCont.childNodes[i]){
					if(nodeName=='#text') continue;

					// if the current item is "After" the item being dragged
					if(
						curTarget != activeCont.childNodes[i]                              &&
						((getAttribute('startLeft') + getAttribute('startWidth'))  > xPos) &&
						((getAttribute('startTop')  + getAttribute('startHeight')) > yPos)){
							beforeNode = activeCont.childNodes[i];
					}
				}
			}

			// the item being dragged belongs before another item
			if(beforeNode){
				if(beforeNode!=curTarget.nextSibling){
					activeCont.insertBefore(curTarget, beforeNode);
				}

			// the item being dragged belongs at the end of the current container
			} else {
				if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){
					activeCont.appendChild(curTarget);
				}
			}

			// make our drag item visible
			if(curTarget.style.display!=''){
				curTarget.style.display  = '';
			}
		} else {

			// our drag item is not in a container, so hide it.
			if(curTarget.style.display!='none'){
				curTarget.style.display  = 'none';
			}
		}
	}

	// track the current mouse state so we can compare against it next time
	lMouseState = iMouseDown;

	// mouseMove target
	lastTarget  = target;

	// track the current mouse state so we can compare against it next time
	lMouseState = iMouseDown;

	// this helps prevent items on the page from being highlighted while dragging
	return false;
}

function mouseUp(ev){
	if(curTarget){
		// hide our helper object - it is no longer needed
		dragHelper.style.display = 'none';

		// if the drag item is invisible put it back where it was before moving it
		if(curTarget.style.display == 'none'){
			if(rootSibling){
				rootParent.insertBefore(curTarget, rootSibling);
			} else {
				rootParent.appendChild(curTarget);
			}
		}

		// make sure the drag item is visible
		curTarget.style.display = '';
	}
	curTarget  = null;
	iMouseDown = false;
}

function mouseDown(){
	iMouseDown = true;
	if(lastTarget){
		return false;
	}
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;

window.onload = function(){
	// Create our helper object that will show the item while dragging
	dragHelper = document.createElement('DIV');
	dragHelper.style.cssText = 'position:absolute;display:none;';
		
	CreateDragContainer(
		document.getElementById('DragContainer1'),
		document.getElementById('DragContainer2'),
		document.getElementById('DragContainer3')
	);

	document.body.appendChild(dragHelper);
}

<!--the mouse over and dragging class are defined on each item-->

<div class="DragContainer" id="DragContainer1">
	<div class="DragBox" id="Item1"  overClass="OverDragBox" dragClass="DragDragBox">Item #1</div>
	<div class="DragBox" id="Item2"  overClass="OverDragBox" dragClass="DragDragBox">Item #2</div>
	<div class="DragBox" id="Item3"  overClass="OverDragBox" dragClass="DragDragBox">Item #3</div>
	<div class="DragBox" id="Item4"  overClass="OverDragBox" dragClass="DragDragBox">Item #4</div>
</div>
<div class="DragContainer" id="DragContainer2">
	<div class="DragBox" id="Item5"  overClass="OverDragBox" dragClass="DragDragBox">Item #5</div>
	<div class="DragBox" id="Item6"  overClass="OverDragBox" dragClass="DragDragBox">Item #6</div>
	<div class="DragBox" id="Item7"  overClass="OverDragBox" dragClass="DragDragBox">Item #7</div>
	<div class="DragBox" id="Item8"  overClass="OverDragBox" dragClass="DragDragBox">Item #8</div>
</div>
<div class="DragContainer" id="DragContainer3">
	<div class="DragBox" id="Item9"  overClass="OverDragBox" dragClass="DragDragBox">Item #9</div>
	<div class="DragBox" id="Item10" overClass="OverDragBox" dragClass="DragDragBox">Item #10</div>
	<div class="DragBox" id="Item11" overClass="OverDragBox" dragClass="DragDragBox">Item #11</div>
	<div class="DragBox" id="Item12" overClass="OverDragBox" dragClass="DragDragBox">Item #12</div>
</div>

你现在拥有了拖拽的所有东西.

下面的三个demo是记录事件历史.当你的鼠标在item上移动,将记录所生的事件,如果你不明白可以尝试一下鼠标的划过或者拖动,看有什么发生.

怎么用 javascript 实现拖拽 – 示例6

这是一篇翻译文章,原文地址:
http://www.webreference.com/programming/javascript/mk/column2/index.html

本站在翻译国外教程文章时,一般以意译为主,重点放在技术实现上,同时,略过和主要技术无关的内容。想要了解详细情况,请访问原文。