梦网页设计制作 - Javascripthttp://www.yuxiaomiao.com.cn/css+div-石家庄网站建设-SEO网站优化排名服务 - RainbowSoft Studio Z-Blog 1.8 Walle Build 100427zh-CNCopyright 2006-2009 梦网页设计. 站点地图   Copyright 2006-2009 冀ICP备08101**号 Some Rights Reserved.欢迎联系梦设计，QQ:819204705.您可以在河北石家庄梦设计工作室css+div资料站了解到：css+div|css+div布局|css+div排版|SEO|SEO服务|SEO优化|SEO技术|SEO工具|SEO教程|SEO培训|什么是SEO|网站优化|搜索引擎优化等网站资讯Mon, 06 Sep 2010 14:55:14 +0800Javascript教程与代码索引null@null.com (梦设计工作室)http://www.yuxiaomiao.com.cn/Javascript/javascript-jiaocheng-suoyin/Wed, 04 Feb 2009 17:42:54 +0800http://www.yuxiaomiao.com.cn/Javascript/javascript-jiaocheng-suoyin/Javascript是一种解释性的，基于对象的脚本语言(an interpreted, object-based scripting language)。

HTML网页在互动性方面能力较弱，例如下拉菜单，就是用户点击某一菜单项时，自动会出现该菜单项的所有子菜单，用纯HTML网页无法实现；又如验证HTML表单(Form)提交信息的有效性，用户名不能为空，密码不能少于4位，邮政编码只能是数字之类，用纯HTML网页也无法实现。要实现这些功能，就需要用到Javascript。

Javascript是一种脚本语言，比HTML要复杂。不过即便你先前不懂编程，也不用担心，因为Javascript写的程序都是以源代码的形式出现的，也就是说你在一个网页里看到一段比较好的Javascript代码，恰好你也用得上，就可以直接拷贝，然后放到你的网页中去。正因为可以借鉴、参考优秀网页的代码，所以让Javascript本身也变得非常受欢迎，从而被广泛应用。原来不懂编程的人，多参考Javascript示例代码，也能很快上手。

Javascript主要是基于客户端运行的，用户点击带有Javascript的网页，网页里的Javascript就传到浏览器，由浏览器对此作处理。前面提到的下拉菜单、验证表单有效性等大量互动性功能，都是在客户端完成的，不需要和Web Server发生任何数据交换， 因此，不会增加Web Server的负担。

几乎所有浏览器都支持Javascript，如Internet Explorer(IE)，Firefox， Netscape， Mozilla， Opera等。

Javascript简介
Javascript写在哪里
编写Javascript代码
Javascript变量(Variables)
Javascript常用运算符
Javascript条件语句
Javascript循环语句
Javascript保留字

教程出自中国站长站  前面发表了Javascript打造自适应图片大小的弹出窗口如果感兴趣，也可以去看一下

]]>Javascripthttp://www.yuxiaomiao.com.cn/Javascript/javascript-jiaocheng-suoyin/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=36http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=36&key=fe8afa5d 拖放效果JavaScript讲解a@b.com (yuxiaomiao)http://www.yuxiaomiao.com.cn/Javascript/tuofang-xiaoguo-jiangjie/Thu, 27 Nov 2008 18:33:23 +0800http://www.yuxiaomiao.com.cn/Javascript/tuofang-xiaoguo-jiangjie/         拖放效果（拖拽）是常见的JS特效之一，学名Drag-and-drop 。
        首先是程序原理：以SimpleDrag为例来说基本原理，首先初始化程序要有一个拖放对象。
this.Drag = (drag);
用两个参数来记录开始时鼠标相对拖放对象的坐标
this._x = this._y = 0;
对于添加移除事件，还要用到两个事件对象事件函数分别是拖动程序和停止拖动程序
this._fM = BindAsEventListener(this, this.Move); this._fS = Bind(this, this.Stop);
拖动对象必须是绝对定位
this.Drag.style.position = "absolute";div>
最后把Start开始拖放程序绑定到拖放对象mousedown事件
addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));
鼠标放在拖放对象并按住，就会触发Start程序，主要是用来准备拖动，在这里记录鼠标相对拖放对象的坐标
this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop;
并把_fM拖动程序和_fS停止拖动程序分别绑定到document的mousemove和mouseup事件：
addEventHandler(document, "mousemove", this._fM); addEventHandler(document, "mouseup", this._fS);


 

绑定到document可以保证事件在整个窗口文档中都有效。
当鼠标在文档上移动时，就会触发Move程序了，这里就是实现拖动的程序。通过现在鼠标的坐标值跟开始拖动时鼠标相对的坐标值的差就可以得到拖放对象应该设置的left和top了
this.Drag.style.left = oEvent.clientX - this._x + "px"; this.Drag.style.top = oEvent.clientY - this._y + "px";
最后放开鼠标后就触发Stop程序结束拖放。这里的主要作用是把Start程序中给document添加的事件移除
removeEventHandler(document, "mousemove", this._fM); removeEventHandler(document, "mouseup", this._fS);
如此一来一个简单的拖放程序就ok了！！！
扩展细节详见下一篇.....
]]>Javascripthttp://www.yuxiaomiao.com.cn/Javascript/tuofang-xiaoguo-jiangjie/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=8http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=8&key=581b6d4cJavascript打造自适应图片大小的弹出窗口a@b.com (yuxiaomiao)http://www.yuxiaomiao.com.cn/Javascript/Javascript-zishiying-tanchuchuangkou/Mon, 24 Nov 2008 00:53:28 +0800http://www.yuxiaomiao.com.cn/Javascript/Javascript-zishiying-tanchuchuangkou/      很多时候我们需要提供这样的功能给访问者：当访问者点击页面中的缩略图时，其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。如果我们想对显示全尺寸图片的窗口的外观进行某些控制（比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时），那我们就要应用到Javascript的强大功能了。

实现此功能的最简单作法是用以下HTML代码创建一个图像链接：

<a href="http://www.yuxiaomiao.com.cn/IMAGE/LOGO/rss.png" target="_blank"><img src="http://www.yuxiaomiao.com.cn/IMAGE/LOGO/rss.png"></a>
　　
其中<a>标记的href属性指定全尺寸图片的URL，target属性设置为_blank指定在新窗口中显示该图片；<img>标记的src属性指定缩略图的URL。
　　
如果我们想对显示全尺寸图片的窗口的外观进行某些控制（比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时），则可调用 window.open 方法，该方法接收三个参数，分别指定要打开文件的URL，窗口名及窗口特性，在窗口特性参数中可指定窗口的高度、宽度，是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏，宽、高分别为400、350的窗口中：

<a href="http://www.yuxiaomiao.com.cn/IMAGE/LOGO/rss.png" target="_blank" onClick="window.open(this.href,, height=350,width=400,toolbar=no,location=no,status=no,menubar=no);return false"><img src="http://www.yuxiaomiao.com.cn/IMAGE/LOGO/rss.png"></a>

这里就提出了个问题，如果所有全尺寸图片都具有统一的大小（比如都是400x350），那么以上代码适用于所有的缩略图片链接（只是href属性指向的全尺寸图片文件不同）。但如果全尺寸图片的大小并不统一，还用以上代码则我们需要先取得每幅全尺寸图片的大小，然后在window.open方法的窗口特性参数中一一设置height和width为正确的值，在图片数量较多的情况下，这显然效率太低了。那么是否有一劳永逸的方法，即让弹出窗口能自动适应要显示图片的大小？通过研究，发现可以使用 DHTML 中的 Image 对象来达到我们的目的，Image 对象可动态装载指定的图片，通过读取其 width 和 height 属性即能获得装入图片的大小，以此来设置弹出窗口的大小，即可实现自适应图片大小的弹出窗口了。下面即是实现代码:

以下为引用的内容：
<script language="javascript" type="text/javascript">
<!--
var imgObj;
function checkImg(theURL,winName){
  // 对象是否已创建
  if (typeof(imgObj) == "object"){
    // 是否已取得了图像的高度和宽度
    if ((imgObj.width != 0) && (imgObj.height != 0))
      // 根据取得的图像高度和宽度设置弹出窗口的高度与宽度，并打开该窗口
      // 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量
      OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));
    else
      // 因为通过 Image 对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查
      setTimeout("checkImg('" + theURL + "','" + winName + "')", 100)
  }
}

function OpenFullSizeWindow(theURL,winName,features) {
  var aNewWin, sBaseCmd;
  // 弹出窗口外观参数
  sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
  // 调用是否来自 checkImg
  if (features == null || features == ""){
    // 创建图像对象
    imgObj = new Image();
    // 设置图像源
    imgObj.src = theURL;
    // 开始获取图像大小
    checkImg(theURL, winName)
  }
  else{
    // 打开窗口
    aNewWin = window.open(theURL,winName, sBaseCmd + features);
    // 聚焦窗口
    aNewWin.focus();
  }
}
//-->
</script>

使用时将上面的代码放在网页文档的<head></head>标记对中，然后在链接的点击事件中调用OpenFullSizeWindow函数，如<a href="http://www.yuxiaomiao.com.cn/IMAGE/LOGO/rss.png"  onClick="OpenFullSizeWindow(this.href,,);return false"><img src="http://www.yuxiaomiao.com.cn/IMAGE/LOGO/rss.png"></a> 即可。

以上代码在IE 5.x－6.0中测试通过。以上代码有梦设计工作室整理于网络，希望对大家的网页设计制作有所帮助。
梦设计工作室 2008.11.24

]]>Javascripthttp://www.yuxiaomiao.com.cn/Javascript/Javascript-zishiying-tanchuchuangkou/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=5http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=5&key=2ba8434f