前端思考：专注前端开发，关注用户体验 » 个人随笔 http://www.artcss.com 一个像素的距离... Sat, 12 Feb 2011 03:34:07 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 由页面开关灯效果引起的跨iframe操作dom的思考 http://www.artcss.com/archives/870.html http://www.artcss.com/archives/870.html#comments Fri, 17 Sep 2010 10:32:55 +0000 Artcss http://www.artcss.com/?p=870 前两天需要在公司某网站页面头部加一个时下流行的页面开关灯效果,效果很简单，只要控制背景样式切换就行，但是现在的网站头不是个iframe，所以得在iframe里边操作iframe外边的dom。如果用原生的js，直接parent.document就可以获取到。考虑到原来网站引用了jQuery，所以想用jQuery的方法写，这个以前还真没写过，于是上google找答案…

jQuery子iframe区父级dom方法如下：$(‘ID’,window.parent.document)

子iframe操作父级页面dom的javascript代码如下:
Download demo.js
1
2
3
4
5
6
7

$(".deng").toggle(	function(){
		$('body',window.parent.document).addClass("bg2");
		$(this).html('开灯');
	},	function(){
		$('body',window.parent.document).removeClass("bg2");
		$(this).html('关灯');
	})
项目应用实例：完美音乐在线

网址：http://radio.wanmei.com/

延伸阅读：父级页面控制子iframe的Dom

用到的方法主要是：$(“fu_iframeID”).contents().find(“ID”)

Download demo.js
1
2
3
4
5

$("#fu").toggle(function(){
		$("#light").contents().find(".tools").addClass("bg1");
	},	function(){
		$("#light").contents().find(".tools").removeClass("bg1");
	})

点我试试

看到上边iframe里边的变化了吧


]]> http://www.artcss.com/archives/870.html/feed 2 静态页面js传参 http://www.artcss.com/archives/897.html http://www.artcss.com/archives/897.html#comments Sun, 12 Sep 2010 10:34:56 +0000 Artcss http://www.artcss.com/?p=897

js在静态页面传参，主要就是怎么在目的页面获取到相应的参数，这里通过一个小例子，演示一下参数传递的方法。

实例描述：比如有两个页面，分别叫a.html和b.html。b.html页面中有一个tab选项卡菜单，分别是“手机数码”、“电脑”、“家用电器”。这里要实现的是，怎么从a.html页面，连接到b.html中不同的选项卡中不同的项。比如点击a页面的电脑，连接到到b页面的第二个选项卡。

主要用到的是JavaScript substring()方法

语法

stringObject.substring(start,stop)

参数 描述
start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop

可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

如果省略该参数，那么返回的子串会一直到字符串的结尾。
获取参数的javascript代码如下:
Download getconfig.js
1
2
3
4
5
6
7
8
9

(function(){
	var hf = window.location.href;
	var index = hf.substring(hf.lastIndexOf('=')+1,hf.length);
	function showtab(index){
		$("#"+index).addClass("hover").siblings().removeClass("hover");
		$("."+index).show().siblings().hide();
	}
	window.load = showtab(index);
})();
猛击下边几个链接看看是不是成功了

手机数码
电脑
家用电器

项目应用实例：《神魔大陆》-克兰蒙多生活指南

链接地址：http://event51.wanmei.com/shenmo/201008/life/

]]> http://www.artcss.com/archives/897.html/feed 4 仿校内textarea输入框字数限制效果 http://www.artcss.com/archives/831.html http://www.artcss.com/archives/831.html#comments Wed, 09 Jun 2010 16:42:18 +0000 Artcss http://www.artcss.com/?p=831 这是一个仿校内textarea回复消息输入框限制字数的效果，具体表现如下：

普通状态是一个输入框，当光标获取焦点时，出现字数记录和回复按钮

PS:上边那个小三角可不是用的图片。

普通状态效果如下：

获取焦点时：

字数限制的javascript代码如下:
Download oTab.js
1
2
3
4
5
6
7
8

$(function(){
	function maxLimit(){
		var num=$(this).val().substr(0,140);
		$(this).val(num);
		$(this).next().children("span").text($(this).val().length+"/140");
	};
	$("#textlimit").keyup(maxLimit);//调用方法
});
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

经jQuery中文群的一位同仁指点，现把限制字数的子数值用一个参数传进来，以便函数重复利用 ]]> http://www.artcss.com/archives/831.html/feed 1 jQuery滑动导航菜单 http://www.artcss.com/archives/821.html http://www.artcss.com/archives/821.html#comments Fri, 04 Jun 2010 11:29:21 +0000 Artcss http://www.artcss.com/?p=821 今天用jQuery写了个滑动导航菜单，加入了缓动展开的效果。比以前常用的用css伪类:hover+ie6模拟:hover的js写的那个效果好，所以拿出来分享一下，可能还可以更好的改进，欢迎大家多拍砖。

先看一下效果图

实例：Demo

用到的javascript代码如下:
Download oTab.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(function(){
	$("ul.sub").parent().append("<span></span>");
	$("ul.sub ul").parent().append("<em></em>");
	$('#nav ul').closest('li').hover(function(){
		$(this).find("span").addClass("arrow");
		$(this).find("em").removeClass("arrow");
		$(this).children("ul").stop(true,true).slideDown('fast').show();
		$("#nav ul>li").hover(function(){$(this).addClass("hover")},
		function(){$(this).removeClass("hover")});
	},function(){
		$(this).children("ul").stop(true,true).hide();
		$(this).find("span").removeClass("arrow");
		$(this).find("em").addClass("arrow");
	})
});
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

]]> http://www.artcss.com/archives/821.html/feed 3 网页浮动工具条 http://www.artcss.com/archives/799.html http://www.artcss.com/archives/799.html#comments Sat, 22 May 2010 13:36:36 +0000 Artcss http://www.artcss.com/?p=799 前两天用jQuery写了个网页浮动工具条，主要效果如下：

1、自动判断浏览器宽度。

当浏览器窗口小于1024时，工具条会自动隐藏

支持浏览器窗口拖拽

2、当拖动浏览器窗口大小时，工具条位置也会相应调整，始终保持贴在网页主体内容右侧。

用到的javascript代码如下:

Download showBar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

$(function(){
var name = $('#float_scroll'); //浮动工具条的ID
function showBar(time){
	setTimeout(function(){
		$(name).show();},time);
	}
function hideBar(time){
	setTimeout(function(){
		$(name).hide();},time);
}
$('.oClose').click(function(){
	$(name).hide();
		return false;
});
showBar(1000);
//hideBar(31000); //页面加载完毕多久后关闭工具条
var pageW = $(".edge").get(0).offsetWidth;//主体页面宽度;
function scrollBar(){
	var offset = $(window).height()/2 - $(name).height()/2 + $(document).scrollTop();
	var oLeft;
	if($(window).width() >= $(name).width()*2+pageW){
		oLeft = $(window).width()/2+pageW/2;
	}else if($(window).width() <= pageW){
		oLeft = pageW - $(name).width();
	}else{
		oLeft = $(window).width() - $(name).width();
	}
	$(name).animate({top:offset},{duration:200,queue:false});
	$(name).animate({left:oLeft},{duration:100,queue:false});
 
	$(".num").text($(window).width());
	$(".num2").text(oLeft);
}
scrollBar();
$(window).resize(scrollBar);
$(window).scroll(scrollBar);
});
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

]]> http://www.artcss.com/archives/799.html/feed 0 最简单的代码实现Tab http://www.artcss.com/archives/762.html http://www.artcss.com/archives/762.html#comments Tue, 18 May 2010 09:39:24 +0000 Artcss http://www.artcss.com/?p=762 在工作中经常遇到这种Tab切换效果，网上这种效果也是一搜一大堆，但不一定完全适合自己。写过许多次后，发现了一种方法不但代码简洁，而且调用方便，所以分享给大家。

这是基于jquery写的一个Tab，选项卡标题的id和选项卡内容class的名称保持一致即可。

用到的javascript代码如下:

Download oTab.js
1
2
3
4
5
6
7
8
9

$(function(){
function oTab (){
	$(this).addClass("current").siblings().removeClass("current").parent().siblings()
	.hide().siblings("."+$(this).attr("id")).show();
}
//调用方法
$(".tabt span,.tabt2 span").mouseover(oTab);//同时调用两个或以上
$(".tabt3 span").click(oTab);
});
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

下面是添加了定时器，tab自动切换的效果

用到的javascript代码如下:
Download oTab.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$(function(){
var i=0;
function oTab (){
	$(this).addClass("current").siblings().removeClass("current").parent().siblings()
	.hide().siblings("."+$(this).attr("id")).show();
	i = $(".tabt4 span").index(this);
}
//切换函数
function oStart(i){
	$(".tabt4 span").eq(i).addClass("current").siblings().removeClass("current");
	$("#auto dd").eq(i).show().siblings("dd").hide();
}
//自动切换
function oTimer(){
	oStart(i);
	i++;
	if(i==4) {
		i=0;
	}
}
//设置定时器
var myTimer = setInterval(oTimer,1000);
//鼠标悬停和移开的情况用hover
$("#auto").hover(function(){
	if(myTimer) {
		clearInterval(myTimer);
	}
},function(){
	myTimer = setInterval(oTimer,1000);
});
//调用方法
$(".tabt span,.tabt2 span,.tabt4 span").mouseover(oTab);
$(".tabt3 span").click(oTab);
});
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

]]> http://www.artcss.com/archives/762.html/feed 3 用户上传头像，等比例缩放 http://www.artcss.com/archives/602.html http://www.artcss.com/archives/602.html#comments Mon, 08 Feb 2010 13:16:00 +0000 Artcss http://blog.artskin.cn/?p=602 其实关于用户上传头像大小问题早就有了比较完美的解决办法，那就是再上传时通过裁切来实现。

最近做一个专题，用裁切有点大材小用，而且着急上线，就写了个简单js来满足头像自适应预留位置大小。

具体要求如下：

1、当用户上传的头像宽和高均小于指定大小（200X150）时，图片按实际大小显示，且水平垂直居中

2、当用户上传的头像宽或高大于指定大小（200X150）时，分两种情况：

  • 如果比3:4扁的话，则宽度缩为200，高度根据宽度自适应，且水平垂直居中。
  • 如果比3:4窄的话，则高度缩为150，宽度根据高度自适应，且水平垂直居中。
用到的javascript代码如下[jQuery版]：
Download script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

$(document).ready(function() {
$("#tt a").click(function(){
	$("#tt a").removeClass("on");
	$(this).addClass("on");
	$(".userbox img").hide();
	var userPic = $("."+$(this).attr("id"));
	userPic.show();
	var url = userPic.attr("src");	//获取当前图片的ID
	$("#yuanshi").attr("src",url);
	$("#yuanshi").hide();
	$("#yuanshi").show("slow");
 
	var userW = userPic.width();
	var userH = userPic.height();
	var bool = false;
	if(userW<200 && userH<150 ){	//判断如果图片高宽均小于指定大小时的情况
		userW = userW;
		userH = userH;
		bool =true;
	}else{
		if(userH/userW < 3/4){
			userPic.css("width",200);
		}else{
			userPic.css("height",150);
		}
	}
	if(userH < 150){	//设置图片垂直居中
		var userTop;
		if(bool){
			userTop = (150 - userH)/2;
		}else{
			userH  = userH*200/userW;
			userTop = (150 - userH)/2;
		}
		userPic.css("margin-top",userTop);
	}else{
		userPic.css("margin-top","0px");
	}
});
$("#tt a:first").addClass("on");
$(".userbox img:not(:first)").hide();
});
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

]]> http://www.artcss.com/archives/602.html/feed 0 让IE6更快的走向灭亡[转] http://www.artcss.com/archives/569.html http://www.artcss.com/archives/569.html#comments Sat, 06 Feb 2010 09:09:17 +0000 Artcss http://blog.artskin.cn/?p=569 最近关于浏览器的最重要的事情就是IE的极光0day漏洞了，这个漏洞导致包括Google在内的多家美国公司受到黑客的攻击，当然也有很多色情网站被黑客利用，从而使用户受到严重的攻击，而IE6用户首当其冲，成为该漏洞的最大受害者。

其实我们天天在想到底哪一天IE6才会真正死去，但是从2001年发布以来，IE6一直统治着国内的浏览器市场，直到现在还占据着国内50%以上的浏览器市场份额。

但是我想，无论你是普通用户还是网站开发人员或者是国内的浏览器开发者，我们都应该采取一些措施，共同促进IE6的灭亡。

如果你是IE6的忠实用户，请尽快升级你的IE6

给你一个升级IE6的理由？好吧：

  1. 你和你的公司正在受到安全威胁。这个没有更好的理由来反驳了吧？就连国际知名的大公司如Google、yahoo等都因为使用IE6而受到严重攻击，还有哪家公司的IE6不会受到攻击呢？
  2. 世界上各国政府都在建议大家升级浏览器。在IE6的0day漏洞被曝光之后，德国、法国和澳大利亚等国政府纷纷号召国民放弃使用IE6；
  3. 就连微软自己都建议你放弃IE6。微软安全研究与预防博客发文称，IE6受0day漏洞影响最为严重，IE8基本不受该漏洞影响。事实上，微软也不止一次号召用户升级浏览器。
  4. 这不是IE6的最后一个严重安全漏洞。IE6从发布到现在不知道出现过多少严重的安全漏洞，而这次远不是终结，它还有至少144个漏洞！
  5. 微软在2014年之后将不再对IE6提供支持。2014年很久远吗？或者你相信2012年就是世界末日？
  6. IE6对web标准的支持缺乏。IE6的技术还是10年前的，互联网技术经过10年的发展已经能够发生了巨大的改变，网站前端技术在不断进步，更先进的CSS、HTML和Javascript等技术已经能给用户带来更好的体验——而IE6用户将无法体验这些先进的内容。比如，前端观察用到的一些CSS3特性将无法在IE6甚至是IE8中体验到。
  7. 国内的一部分企业开始要求员工升级浏览器。比如腾讯公司，已经要求所有员工将IE6升级到IE7。
  8. IE6太过时了，国外网友大部分都不再使用IE6了。统计显示，目前国外用户已经逐渐淘汰IE6了。IE8和Firefox是主流(via 人民网)。
  9. 国外各大网站开始明确表示将不再支持IE6。比如 Google 将停止支持IE 6 用户必须至少升至IE 7。

(部分参考自：http://mashable.com/2010/01/18/5-more-reasons-why-ie6-must-die/)

如果这几个理由都不够，那么请看国外统计的坚持使用IE6的原因，当然这里有些调侃的意味，如果你正好是其中一种情况，请不要生气 :) ：

当然在国内，坚持使用IE6的用户可能还是因为另外两个原因：

  1. 习惯了IE6的操作方式，不喜欢IE7和其它浏览器的tab式浏览。当然一个人的习惯是最重要的。tab的浏览器方式是谁发明的已经不可考了，不过Opera和Firefox纷纷使用，后来国内的maxthon浏览器也采用了那种方式，然后到06年IE7的时候，也采用了tab的方式。这说明tab是一种很好的浏览方式，高效、方便，不然广大网民早就开始反对这种方式了，而各大浏览器也不会坚持下去了。所以建议你尝试一下新技术，从你的习惯中走出来。
  2. IE6比较快，IE7和IE8太慢了。IE7和IE8的确太慢了，不过新版的Firefox 3.6和Chrome一直是很快的哦。

前端开发人员可以争取放弃兼容IE6

如果你是一名光荣的前端开发人员，希望你能尽可能的做更多的事情来让IE6更快的死去：

  1. 以身作则，自己放弃IE6。从前端观察和其它技术网站的访问统计上看，IE6的用户比例竟然还有30%以上，这让我很震惊。作为一名前端开发者，用IE6做自己的主浏览器，那么你做的网站应该也不会在IE7/8以及其它更先进的浏览器中做测试的吧？
  2. 说服你的BOSS或客户，放弃兼容IE6。有必要为了让网站在IE6中和其它浏览器中表现一直而花掉2倍甚至是3倍的时间和精力吗？我认为对不同的浏览器，可以采取适当的区分——让网站在现代浏览器如Firefox 3.5+、Chrome/Safari和Opera中实现最佳的表现，而在IE中实现相对比较差的界面——当然在不影响布局和功能的情况下。
  3. 号召你的朋友弃用IE6。号召你身边的朋友使用IE7/8或者Firefox、Chrome等浏览器。另外，很多人都有个人博客，可以在自己的博客上号召IE6用户升级他们的浏览器。你也可以参与到众多的促进IE6升级的在线项目中来，比如 webrebuild.org的IE６升级活动以及效果很不错的IE6 Update中。

浏览器厂商应该负更多的责任

想起的一句话：此地钱多人傻，速来！这当然只是笑话。

不过据说现在中国网民数量已经高达3.6亿！而且这个数字还在不断增长。这显然是一个巨大的市场。

所以最近各大公司纷纷涉足浏览器市场，各自都推出自有品牌的浏览器，在Maxthon、世界之窗、腾讯TT、绿色浏览器等混战多年的情况下又出现搜狐浏览器、新浪浏览器和360浏览器。但是它们无一不是以IE为内核的(maxthon和搜狐浏览器有IE和webkit双内核的版本)，没有自己的内核。所以各位网民，不要以为你用了所谓“安全”浏览器你的电脑就安全了，它的内核IE本身都是不安全的，这些外壳浏览器谈何安全——不过有些浏览器会添加一些可以避免你误操作的功能。

对国内的浏览器市场来说，我认为这种“战国纷争”的局面是很不错的，至少能够普及一点儿“浏览器”知识，提高网民对互联网和互联网安全的认识。

但是我认为国内的浏览器厂商应该负起更多的责任。

你们的浏览器产品确实有很多特色，也有很多很有用或者很酷的功能，比较重视中国人的使用习惯。但是当用户因为IE的漏洞而被攻击的时候，你们会承担责任吗？还是将责任推到微软那里？这似乎有些不公平哦～～

对IE来说，最安全的、功能最强、稳定性最好的应该就是IE8了，如果你们能够推动用户去升级他们的内核到最新版，肯定能降低你们要为安全承担的风险。另外，减少一个内核支持也会减少你们的开发和维护支出吧。

总结

让IE6退出历史舞台，不是一朝一夕的事情，用户的惰性让他不愿意主动去升级，微软的浏览器升级模式又那么古老（而Firefox的提示升级和Chrome的后台自动升级模式倒省去了不少麻烦）。所以我们只有靠自己的力量来推动IE6的灭亡了。

转自：http://www.qianduan.net/let-ie6-faster-dead.html

]]> http://www.artcss.com/archives/569.html/feed 3 我的小博终于又好了 http://www.artcss.com/archives/496.html http://www.artcss.com/archives/496.html#comments Sat, 30 Jan 2010 18:49:11 +0000 Artcss http://blog.artskin.cn/?p=496 在国内轰轰烈烈的打击.CN域名的风波下，我的博客不幸“遇难了”。

原因就是我原来租用的空间商为了不被波及，发出了一条这样的通知：“由于中国互联网络信息中心对域名使用进行管制，本站暂时取消域名绑定服务。”，看到这个，心凉了半截，那我的博客以后怎么办呢？

也因为前段时间工作比较忙，所以一直也没弄。就这样我的小博一直停了一个多月。这两天有空，考虑到红旗下杂事儿比较多，经过再三思量，终于把博客搬到国外了，不是咱不爱国，只是想找一个稳定的空间，不想老这样折腾。

]]> http://www.artcss.com/archives/496.html/feed 3 弹出层详解，从简单到复杂 http://www.artcss.com/archives/477.html http://www.artcss.com/archives/477.html#comments Fri, 25 Dec 2009 11:55:38 +0000 Artcss http://www.artskin.cn/blog/?p=477 在工作过程中经常遇到做弹出的层效果，有的需要在元素右下弹出，有的需要弹出在浏览器正中间，有的需要弹出后再拖拽，有的需要背景要变暗，有的需要弹出的层跟随鼠标移动……

网上此类效果其实很多，有javascript原生的，有基于框架写的,但自己好多时候用不到那么高级的效果，所以就把这些功能都分开来一步一步实现。

其实原理很简单.有两种实现途径:一种是通过元素创建和删除，一种是通过显示和隐藏，其余的具体要做成什么样子，就留给CSS来控制了。下面从最简单的开始（不基于框架）

一、最简单的弹出

用到的javascript代码如下：
Download script.js
1
2
3
4
5
6
7
8
9
10
11

function show(){
	var oShow = document.getElementById('show');
	oShow.style.display = 'block';
	var oClose = document.createElement("span");
		oClose.innerHTML = "×";
		oShow.appendChild(oClose);
		oClose.onclick = function(){
			oShow.style.display = 'none';
			oShow.removeChild(this);
		}
}
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

二、弹出层—到浏览器中央

用到的javascript代码如下：
Download script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function show(){
	var iWidth = document.documentElement.clientWidth;	//获取浏览器宽度
	var iHeight = document.documentElement.clientHeight;	//获取浏览器高度
 
	var oShow = document.getElementById('show');
		oShow.style.display = 'block';
        oShow.style.left = (iWidth-302)/2+"px";	//居中横坐标
		oShow.style.top = (iHeight-202)/2+"px";	//居中纵坐标
	var oClose = document.createElement("span");
		oClose.innerHTML = "×";
		oShow.appendChild(oClose);
		oClose.onclick = function(){
			oShow.style.display = 'none';
			oShow.removeChild(this);
		}
}
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

三、弹出层—到浏览器中央—背景变暗

用到的javascript代码如下：
Download script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function show(){
	var iWidth = document.documentElement.clientWidth;
	var iHeight = document.documentElement.clientHeight;
 
	var bgObj = document.createElement("div");	//创建背景层
	bgObj.setAttribute("id","bgbox");
	bgObj.style.width = iWidth+"px";
	bgObj.style.height =Math.max(document.body.clientHeight, iHeight)+"px";
	document.body.appendChild(bgObj);		//将创建的层插入body中
 
	var oShow = document.getElementById('show');
		oShow.style.display = 'block';
		oShow.style.left = (iWidth-302)/2+"px";
		oShow.style.top = (iHeight-202)/2+"px";
 
	var oClosebtn = document.createElement("span");
		oClosebtn.innerHTML = "×";
		oShow.appendChild(oClosebtn);
 
	function oClose(){
		oShow.style.display = 'none';
		oShow.removeChild(oClosebtn);
		document.body.removeChild(bgObj);		
	}
 
	oClosebtn.onclick = oClose;
	bgObj.onclick = oClose;
}
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

四、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出

键盘事件的javascript代码如下：
Download script.js
1
2
3
4
5
6
7
8
9
10
11

function getEvent(){
	return window.event || arguments.callee.caller.arguments[0];
	// 获得事件Event对象，用于兼容IE和FireFox
}
 
document.onkeyup = function(){
	var event = getEvent();
	if (event.keyCode == 27){
		oClose();
	}
}
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

四、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出—支持鼠标拖动

鼠标拖动的javascript代码如下：
Download script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
titleBar =  document.getElementById('titlebar');
titleBar.onmousedown = function() {
	var evt = getEvent();
	moveable = true; 
	moveX = evt.clientX;
	moveY = evt.clientY;
	moveTop = parseInt(oShow.style.top);
	moveLeft = parseInt(oShow.style.left);
 
	document.onmousemove = function() {
		if (moveable) {
			var evt = getEvent();
			var x = moveLeft + evt.clientX - moveX;
			var y = moveTop + evt.clientY - moveY;
			if ( x > 0 &&( x + 302 < iWidth) && y > 0 && (y + 202 < iHeight) ) {
				oShow.style.left = x + "px";
				oShow.style.top = y + "px";
			}
		}	
	};
	document.onmouseup = function () { 
		if (moveable) { 
			document.onmousemove = docMouseMoveEvent;
			document.onmouseup = docMouseUpEvent;
			moveable = false; 
			moveX = 0;
			moveY = 0;
			moveTop = 0;
			moveLeft = 0;
		} 
	};
}
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

欢迎大家多提改进意见或建议，共同学习和探讨

]]> http://www.artcss.com/archives/477.html/feed 10