前端思考：专注前端开发，关注用户体验 » Javascript http://www.artcss.com 一个像素的距离... Sat, 12 Feb 2011 03:34:07 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 弹出层详解，从简单到复杂 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 MSClass通用不间断滚动JS封装类 http://www.artcss.com/archives/392.html http://www.artcss.com/archives/392.html#comments Mon, 19 Oct 2009 16:02:15 +0000 Artcss http://www.artskin.cn/blog/?p=392 今天介绍一个通用的不间断滚动js封装类MSClass.js，支持各种不间断滚动，使用方便。一般在不调用框架情况下，做不间断滚动我都用它。

原文链接：http://www.popub.net/script/MSClass.html

/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.65*\

　制作时间:2006-08-29 (Ver 0.5)
　发布时间:2006-08-31 (Ver 0.8)
　更新时间:2007-12-28 (Ver 1.65)
　更新说明: + 加入功能 * 修正、完善
	1.65.071228
		* 横向、纵向滚动格式调整 (解决横向滚动换行的问题，无需特殊设置)
		* 彻底解决由于IE问题导致上下滚动页面留白的问题 (本次更新主要解决此问题,感谢天上的书生参与测试)
	1.6.070131
		+ 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1)
		+ 判断是否可以滚动 (若内容区域小于显示区域,则自动取消滚动)
		+ 跳过初始化错误 (避免引起其它滚动的停止)
		+ 默认值 (除容器ID必选外，其他参数均可根据情况进行选择设置)
		+ 参数动态赋值 (方向可用英文表示top|up|bottom|down|left|right,使其更直观、方便)
		* 文字滚动不准确 (本次更新主要目的解决此Bug,感谢周珺参与测试)
	1.4.061211
		+ 鼠标悬停改变滚动方向 (鼠标悬停控制左右滚动)
		* 由于文档下载过慢而导致获取的高度/宽度不准确
		* 浏览器兼容问题 (IE、FF、Opera、NS、MYIE)
	1.2.060922
		+ 指定范围间歇滚动
		* 程序调整
		* 连续间歇滚动停止的错误
	1.0.060901
		+ 向下、向右滚动
		+ 开始等待时间
		+ 连续滚动
		* 调整时间单位
		* 滚动误差
		* 随机死循环
		* 加强性能
		* 程序优化
	0.8.060829
		  翻屏不间断向上、向左滚动

　演示地址:http://www.popub.net/script/MSClass.html
　下载地址:http://www.popub.net/script/MSClass.js

]]> http://www.artcss.com/archives/392.html/feed 0 javascript商品提示效果 http://www.artcss.com/archives/327.html http://www.artcss.com/archives/327.html#comments Sat, 10 Oct 2009 07:50:21 +0000 Artcss http://www.artskin.cn/blog/?p=327 今天写一个商品展示信息提示的js小例子，就是当鼠标放到商品图片上的时候出现一个半透明层，层上写商品的相关信息。

用到的javascript代码如下：

Download script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var oLight = document.getElementById("light");
var oList = oLight.getElementsByTagName("li");
for (var i=0,iLen = oList.length; i<iLen; i++){
	oList[i].onmouseover = function(){
		var oSpan = this.getElementsByTagName("span")[0];
		var oImg = this.getElementsByTagName("img")[0];
		oSpan.style.display="block";
		oSpan.innerHTML=oImg.alt;
	}
	oList[i].onmouseout = function(){
		var oSpan = this.getElementsByTagName("span")[0];
		var oImg = this.getElementsByTagName("img")[0];
		oSpan.style.display="none";
	}
}
点击下面“运行”直接查看效果

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

]]> http://www.artcss.com/archives/327.html/feed 0 clearbox 中文详解 http://www.artcss.com/archives/121.html http://www.artcss.com/archives/121.html#comments Sun, 19 Jul 2009 15:41:17 +0000 Artcss http://www.artskin.cn/blog/?p=121 图片展示效果认识最早的是Lightbox，不过最近发现一款比Lightbox漂亮的，叫Clearbox，官方网站地址：http://www.clearbox.hu

首先在头里加入如下代码：

<link href=”css/clearbox.css” rel=”stylesheet” type=”text/css” />
<script src=”js/clearbox.js” type=”text/javascript” charset=”gb2312″></script>

1.<a href=”images/cb_sample_01.jpg” rel=”clearbox” title=”A kép címe”>
<img src=”images/cb_sample_01_tn.jpg” /></a>

2.<a href=”images/cb_sample_04.jpg” rel=”clearbox[Virágok]“><img src=”images/cb_sample_04_tn.jpg” /></a>
<a href=”images/cb_sample_05.jpg” rel=”clearbox[Virágok]“><img src=”images/cb_sample_05_tn.jpg” /></a>
<a href=”images/cb_sample_06.jpg” rel=”clearbox[Virágok]“><img src=”images/cb_sample_06_tn.jpg” /></a>

3.<a href=”images/cb_sample_01.jpg” rel=”clearbox[Virágok,,10,,start]“>
<img src=”images/cb_sample_01_tn.jpg” /></a>

4.<a href=”images/cb_sample_01.jpg” rel=”clearbox[Virágok]“ tnhref=”pictures/cb_sample_01_tn.jpg”>ez a link egy képre mutat, de nincs megadva thumbnail kép</a>

5.<a href=”http://www.google.com” rel=”clearbox(800,,600,,click)”>google.com</a>
<a href=”http://www.google.com” rel=”clearbox(800,,600,,over)”>google.com</a>

参数设置：

CB_AllowedToRun：

此值可以设置为on或off。如果’off’ ，然后就到ClearBox ，所以图像不会出现在的帮助下，该脚本，但它最初是在网站上。

CB_AllowExtFunct：

此值可以设置为on或off。如果’on’ ，那么ClearBox每个图像和HTML内容加载将CB_ExternalFunction （ ）函数调用。

CB_Animation：

此值可以设置为on，off，normal，double，warp。动画ClearBox窗口可以设置他。
‘关闭’ ：在这种情况下，窗口不animálódik ，但添加到想要的大小。
‘正常’ ：在这种情况下，窗口的横向和纵向然后大小。
‘双’的同样大小的窗口中X和Y方向（默认）
‘经’ ：作为双，但之前的动画显示的图片上，提供它（高CPU的需求，因此，建议对小图片）

CB_AnimSpeed：

它的价值是一个正整数（ 1 – ） 。指定动画的速度。
CB_BodyMarginLeft
CB_BodyMarginRight
CB_BodyMarginTop
CB_BodyMarginBottom

如果一方打算给出具体的价值身体的利润率，因此，如果：利润率左，边顶，边底利润的权利，或任何为0 ，和一氧化氮的汽车，则有以下参数将其添加到ClearBox也。由于这HideContent层的确切尺寸需要！注：注意，如果你不给的CSS文件做身 体利润价值，但它也有一个默认值为保证金的浏览器！重要提示：请不要使用％的价值，因为层ClearBox HideContent将无法显示！

CB_CloseOnH：

此值可以设置为on或off。如果’off’ ，它阻碍表面的文件，单击窗口不会关闭ClearBox 。

CB_FlashHide：

此值可以设置为on或off。如果’on’ ，则flash 也会盖在弹出层的上面。

CB_Font
CB_Font2：

的价值，一个（或多个）的字体。下的文本，图片第一和第二行指定的字体。的CSS可以同时使用一种以上的可利用的价值，例如： ‘字体，绿色， Tahoma ‘ 。

CB_FontSize
CB_FontSize2：

它的价值，这是一个积极的整数（ 6 – ） 。

CB_FontColor
CB_FontColor2：

价值的十六进制颜色代码。下的文本，图片第一和第二排的颜色的。

CB_FontWeight
CB_FontWeight2：

其值为”normal’ ，或’bold’。

CB_FullSize：

如果’起飞’ ，然后是不显示的图像上的’下载文件’或’全尺寸’图标。

CB_HideColor：

指定脚本的邀请文件’妨碍’表面颜色的。

CB_HideOpacity：

默认值： ‘ 0.85 ‘ ，这意味着85 ％ ，乌山黑暗背景。

CB_HideOpacitySpeed：

指定多少毫秒妨碍文件的表面下的黑暗。

CB_ImgBorder：

指定的宽度范围内的图片。

CB_ImgBorderColor：

指定边框颜色的图像。

CB_ImgMinWidth
CB_ImgMinHeight：

正整数的值（ 50 – ） 。他们ClearBox窗口像素，最小宽度（较少窗口无法打开，即使是规模较小的形象） 。

CB_ImgNum：

规定，如果ClearBox galériáknál应显示的所有文件，这是一些图像显示。

CB_ImgNumBracket：

如果CB_ImgNum是打开的，它显示的图像是否有在括号中显示。

CB_ImgOpacitySpeed：

指定的毫秒数在图像的。

CB_ImgTextFade：

如果’起飞’ ，那么，下面的图片或文字的形象似乎并不逐步，但立即显示出来。

CB_NavTextPrv
CB_NavTextNxt
CB_NavTextFull
CB_NavTextDL：

可以指定的形象出现在按钮（链接）的名称。

CB_NavTextImgPrv
CB_NavTextImgNxt
CB_NavTextImgFull
CB_NavTextImgDL：

您可以选择是否显示图像按钮下方。如果有任何’起飞’ ，那么目前的形象，而不是上述参数的文字会出现下降。

CB_NoThumbnails：

其值为’对’或’关闭’ 。如果’起飞’ ， galériáknál它不会出现在小的图像。

CB_Padd：

价值的一个非负整数（ 0 – ） 。图片为（和lekerekítéseken ）提供额外的-几乎是无形-相框（白色帧的图片宽度以像素为单位的增加） 。

CB_PicDir：

ClearBox指定的路径图像。如果改变clearbox.css不会忘记作出必要的修改！

CB_PictureStart
CB_PicturePause
CB_PictureClose
CB_PictureLoading
CB_PictureNext
CB_PicturePrev：

如果你想改变ClearBox使用的开始，暂停，关闭前和下一步按钮，以及装载的形象，它是允许这样做。重要的是，只输入文件名， /和文件夹没有任何迹象！

CB_Preload：

是否指定galériáknál前和下列预先载入图像。

CB_RoundPix：

指定四舍五入的尺寸的图像。

CB_SelectsHide：

如果’的’ ，然后在SELECT ClearBox窗口被打开，箱子就会消失在背景中，并再次结束后的时代。

CB_ShowGalName：

如果’起飞’的名字然后将不会kiíratásra加莱拉。

CB_ShowImgURL：

指定的窗口形象，以ClearBox路径，如果没有地址的图片。

CB_SimpleDesign：

如果’的’ ，然后就不会有文字的图片（帧的图片将是一个统一的大小） 。

CB_SlShowTime：

指定是否要等待多少幻灯片效果（以秒计）收到显示下面的图像。

CB_TextH：

下面的图片中给出了高度的文字。

CB_TextNav：

指定galériáknál下方的图片前和明年的按钮（或字幕）显示器。

CB_TextOpacitySpeed：

指定的毫秒数在图像中的文字。

CB_WinPadd：

（ 0 – ）中指定一个正常的情况下，最低数量的像素边缘的浏览器窗口，以ClearBox 。

注：
1。这个效果有个比较难控制的地方就是弹出页面底下总有个URL，这个问题我经过反复尝试可以在链接后面加上title属性，这样就可以把URL换成你想换的任意内容。或者不想要的话直接换成空就可以了。
2。如果有js乱码的情况请在引如 js文件的语句里加上charset=”gb2312″ ，而不要使用默认的匈牙利编码。

]]> http://www.artcss.com/archives/121.html/feed 0 仿126经典滑动门 http://www.artcss.com/archives/471.html http://www.artcss.com/archives/471.html#comments Wed, 01 Jul 2009 05:43:42 +0000 Artcss http://artskin.jhost.cn/blog/?p=3 javascript仿126邮箱广告Tab切换效果，是我见过写得最精炼的Tab，大家引用时保留下原创作者

鼠标点击

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


鼠标滑过：

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

javascript代码如下：

Download script.js
1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">// <![CDATA[
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
// ]]>
</script>
]]> http://www.artcss.com/archives/471.html/feed 2