简易javascript的滑动门效果

下面是JS和DIV结构,CSS样式忽略,可以自定义。


  • 01
  • 02
01

js实现动态IE标题栏效果

以前经常玩的把戏,现在用的不多了,通过本代码你会了解一下JavaScript对象交换的知识,挺简单的,有空的时候根据此可以写出不少JS功能来。
<script language=”JavaScript”>
var n=0;
function title(){
 n++;
    if (n==3) {n=1}
    if (n==1) {document.title=’☆★IT中国★☆’}
    if (n==2) {document.title=’★☆IT中国☆★’}
    setTimeout(“title()”,1000);
}
title();
</script>

iframe框架用JavaScript子页面控制父页面

parent.html  中的代码为:

<iframe marginwidth=”0″ framespacing=”0″ marginheight=”0″ frameborder=”0″ 
 name=”uploadframe” id=”uploadframe” src=”c.html” scrolling=”no” width=”100″ height=”100″ ></iframe>

如想在c.html 中写一些代码去改变parent.html 中的一些内容,以下代码可作为参考:

1、parent.window.frames 可返回parent.html 中所有的iframe;返回结果应该是一个数组,用parent.window.frames[iframeId]可得到iframeId;

2、用parent.document.getElementById(‘xxxx’)可得到父里的xxxx,并改变相应的值,例如:parent.document.getElementById(‘xxxx’).className = ‘test’; 

3、如果我想在父中再创建一个元素,直接用parent.appendChild(yyyy)在firefox中是可以的,但在IE(最起码IE6)是不行的; 所以,要把创建这个动作放在父中来完成,在子中调用;

例如:父中的代码为:

function addIframe(vNum){
 var iframe = document.createElement(“iframe”);
 iframe.setAttribute(“marginwidth”, “0”); 
 iframe.setAttribute(“framespacing”, “0”); 
 iframe.setAttribute(“marginheight”, “0”); 
 iframe.setAttribute(“frameborder”, “0”); 
 iframe.setAttribute(“name”, vNum); 
 iframe.setAttribute(“id”, vNum); 
 iframe.setAttribute(“src”, “http://www.zishu.cn”); 
 iframe.setAttribute(“scrolling”, “no”); 
 iframe.setAttribute(“width”, “100”); 
 iframe.setAttribute(“height”, “100”); 
 document.getElementsByTagName(‘body’)[0].appendChild(iframe);
 return;
}

子中可以这样调用:

<script>
parent.addIframe(‘xxxx’);
</script>

这样就能完整创建一个元素了;

4、同理,如果我想在子中把iframe给隐藏,本来想直接用parent.document.getElementById(‘uploadframe’).style.display = ‘none’;来弄,但无论是在IE还是FIREFOX中,都是行不通的;只能用上边的方法把动作放在父中。

Iframe框架自动适应宽度和高度 IE与Firefox 下测试通过

只需修改框架页

<!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=utf-8″ />
<title>iframe</title>
</head>
<body>
<script type=”text/javascript”>
 function SetCwinHeight(){
  var bobo=document.getElementById(“bobo”); //iframe id
  if (document.getElementById){
   if (bobo && !window.opera){
    if (bobo.contentDocument && bobo.contentDocument.body.offsetHeight){
     bobo.height = bobo.contentDocument.body.offsetHeight;
    }else if(bobo.Document && bobo.Document.body.scrollHeight){
     bobo.height = bobo.Document.body.scrollHeight;
    }
   }
  }
 }
</script>
<iframe width=”100%” id=”bobo” onload=”Javascript:SetCwinHeight()” height=”1″ frameborder=”0″ src=”http://www.google.com”></iframe>
这里有什么?
</body>
</html>

DOM中的getElementsByClassName

今天在脚本中应用到了根据类名取元素的方法,却对其效率不甚满意。于是,小幅修改了其探测元素类名的方法,提升了约3成的效率.DOM中的getElementsByClassName解释如下:DOM API 中提供3种方法取元素(getElementById,getElementsByName,getElementsByTagName),经常编写CSS的人自然就会产生疑问,有没有根据样式类名取元素的方法,可惜,DOM1/2 里面都没有这样的方法,prototype 很早就扩展过DOM的方法,添加了 getElementsByClassName,从方法名上看,似乎非常正统,与前面3种方法名称也像,分析其代码,却发现还是通过 getElementsByTagName 来实现。这个方法称不上优雅,因为需要遍历所有的元素,探测元素是否包含目标样式类名,返回符合条件的元素数组。google了一下,却没有找到更优雅高效的替代方法。

function getElementsByClassName(className, parentElement){
var elems = ($(parentElement)||document.body).getElementsByTagName("*");
var result=[];
for (i=0; j=elems[i]; i++){
   if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
result.push(j);
   }
}
return result;
}

既然有getElementsByClassName,一样可以有 getElementsByAttribute(如:getElementsByValue、getElementsByStyle、getElementsByType)

document.getElementsByClassName = function(className,oBox) {
//适用于获取某个HTML区块内部含有某一特定className的所有HTML元素
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
var child = children[ii];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}

document.getElementsByType = function(sTypeValue,oBox) {
//适用于获取某个HTML区块内部同属于某一特定type的所有HTML元素,如:input,script,link等等
this.d= oBox || document;
var children = this.d.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var ii = 0; ii < children.length; ii++) {
if (children[ii].type == sTypeValue) {
elements.push(children[ii]);
}
}
return elements;
}

function $() {
var elements = new Array();
for (var ii = 0; ii < arguments.length; ii++) {
var element = arguments[ii];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}

$Cls = function (s,o){
return document.getElementsByClassName(s,o);
};

$Type = function (s,o){
return document.getElementsByType(s,o);
};

$Tag = function (s,o){
this.d=o || document;
return this.d.getElementsByTagName(s);
};

$Name = function (s){ //通过name的方式只能针对整个document而言,不能为其限定范围
return document.getElementsByName(s);

Flash链接代码

一,用flash软件,给动画添加超链接

on(release) {
getUrl("http://hi.baidu.com/wangleiit","_blank");
}

二,动画没有超链接的情况下,在网页上实现

<button style="width:你的FLASH宽度;height:你的FLASH高度;background:transparent;border:o;padding:0;cursor:hand" onclick="window.location.href=’链接地址’">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="460" height="145">
        <param name="movie" value="images/swf/5.swf">
        <param name="quality" value="high">
        <param name="wmode" value="transparent">
        <embed src="images/swf/5.swf" width="460" height="145" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
      </object></button>

上下翻滚JS特效代码

<!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>建站代码-上下翻滚JS</title>

</head>

<body>
<div id="adsfar" style="background:#FF0000">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td bgcolor="#FFFFFF">11111111111111111</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">22222222222222222</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">33333333333333333</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">44444444444444444444444444</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">55555555555555555555555</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">66666666666666666666666666666</td>
    </tr>
</table>
</div>
<script type="text/javascript">
marque(400,28,"adsfar")
var scrollId;
var stopscroll;
var stoptime;
var preTop;
var leftElem;
var currentTop;
var marqueesHeight;
function marque(width,height,marqueId,marqueTagName){
   try{
      marqueesHeight = height;
      stopscroll     = false;

      scrollId = document.getElementById(marqueId);
      with(scrollId){
       style.width     = width + "px";
       style.height    = marqueesHeight + "px";
       style.overflow = ‘hidden’;
       noWrap          = true;
      }

      scrollId.onmouseover = new Function(‘stopscroll = true’);
      scrollId.onmouseout = new Function(‘stopscroll = false’);

      preTop     = 0;
      currentTop = 0;
      stoptime   = 0;
      alert( scrollId.scrollHeight);
      if(height < scrollId.scrollHeight){
          leftElem = document.getElementById(marqueId);
          //alert(leftElem.cloneNode(true));
          scrollId.appendChild(leftElem.cloneNode(true)); //cloneNode(true) 如果这个布尔参数设置为 true,被克隆的节点会复制原始节点的所有子节点。
           
          init_srolltext();
      }
   }catch(e) {}
}

function init_srolltext(){
scrollId.scrollTop = 0;
setInterval(‘scrollUp()’, 18);
}

function scrollUp(){
if(stopscroll) return;
currentTop += 1;
if(currentTop == marqueesHeight+1) {
    stoptime += 1;
    currentTop -= 1;
    if(stoptime == (marqueesHeight)*1) {//??
      currentTop = 0;
      stoptime = 0;
    }
}else{

    preTop = scrollId.scrollTop;    //网页被卷去的高
   //alert(preTop);
    scrollId.scrollTop += 1;
    if(preTop == scrollId.scrollTop){
      scrollId.scrollTop = marqueesHeight;
      scrollId.scrollTop += 1;
    }
}
}
</script>

</body>
</html>

八款JS框架介绍及比较

Dojo
    Dojo 是目前最为强大的JS框架,它在自己的 Wiki 上给自己下了一个定义,Dojo 是一个用 JavaScript 编写的开源的DHTML工具箱。Dojo 很想做一个“大一统”的工具箱,不仅仅是浏览器层面的,野心还是很大的。Dojo 包括 Ajax、Browser、Event、Widget 等跨浏览器 API,包括了 JS 本身的语言扩展,以及各个方面的工具类库,和比较完善的 UI 组件库,也被广泛应用在很多项目中,他的 UI 组件的特点是通过给 HTML 标签增加 TAG 的方式进行扩展,而不是通过写 JS 来生成,Dojo 的 API 模仿 Java 类库的组织方式。用 Dojo 写 Web OS 可谓非常方便。Dojo 现在已经 4.0 了,Dojo 强大的地方在于界面和特效的封装,可以让开发者快速构建一些兼容标准的界面。
    优点:库相当完善,发展时间也比较长,功能强大,据说利用 Dojo 的 io.bind() 可以实现 comet 看见其功能强大非一般,得到 IBM 和 SUN 的支持。
    缺点:文件体积比较大,200多KB,初次下载相当慢,此外,Dojo 的类库使用显得不是那么易用,JS语法增强方面不如 Prototype

 

Prototype
    它是一个非常优雅的 JS 库,定义了 JS 的面向对象扩展,DOM 操作API,事件等等,以 Prototype 为核心,形成了一个外围的各种各样的 JS 扩展库,是相当有前途的 JS 底层框架,值得推荐,感觉也是现实中应用最广的库类(RoR 集成的 AJAX JS 库),之上还有 Scriptaculous 实现一些JS组件功能和效果。
    优点:基本底层,易学易用,甚至是其他一些js特效开发包的底层,体积算是最小的了。
    缺点:如果说缺点,可能就是功能是他的弱项

 

dScriptaculous
    Scriptaculous 是基于prototype.js 框架的 JS 效果。包含了 6 个 js 文件,不同的文件对应不同的 js 效果,所以说,如果底层用 prototype 的话,做js效果用 Scriptaculous 那是再合适不过的了,连大名鼎鼎的 digg 都在用他,可见不一般
    优点:基于prototype 是最大的优点,由于使用 prototype 的广泛性,无疑对用户书锦上添花。
    缺点:刚刚兴起,需要时间的磨练

 

Yui-ext
    基于 Yahoo UI 的扩展包 yui-ext 是具有 CS 风格的 Web 用户界面组件,能实现复杂的 Layout 布局,界面效果可以和 backbase 媲美,而且使用纯 javascript 代码开发。真正的可编辑的表格 Edit Grid,支持 XML 和 Json 数据类型,直接可以迁入 Grid。许多组件实现了对数据源的支持,例如动态的布局,可编辑的表格控件,动态加载的 Tree 控件、动态拖拽效果等等。从 1.0 beta 版开始同 Jquery 合作,推出基于 jQuery 的 Ext 1.0,提供了更多有趣的功能。
    优点:结构化,类似于 java 的结构,清晰明了,底层用到了 Jquery 的一些函数,使整合使用有了选择,最重要的一点是界面太让让人震撼了。
    缺点:太过复杂,整个界面的构造过于复杂。

 

Jquery
    JQuery 是一款同 prototype 一样优秀 js 开发库类,特别是对 css 和 XPath 的支持,使我们写 js 变得更加方便!如果你不是个 js 高手又想写出优秀的 js 效果,那么 JQuery 可以帮你达到目的!并且简介的语法和高的效率一直是jQuery追求的目标。
优点:注重简介和高效,js 效果有 yui-ext 的选择,因为 yui-ext 重用了很多 jQuery 的函数
    缺点:据说太嫩,历史不悠久。

 

Mochikit
    MochiKit 自称为一个轻量级的 js 框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发,另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便,能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML 文档定制的,如果与 MochiKit 和 Ajax 结合在一起,使用 XHTML 包装的微格式尤其方便。Mochikit 可以直接对字符串或者数字格式化输出,比较实用和方便。它还有自己的 js 代码解释器
    优点:MochiKit.DOM 这部分很实用,简介也是很突出的
    缺点:轻量级的缺点

 

Mootools
    MooTools 是一个简洁,模块化,面向对象的 JavaScript 框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的 JavaScript 代码。Mootools 跟 prototypejs 相类似,语法几乎一样。但它提供的功能要比 prototypejs 多,而且更强大。比如增加了动画特效、拖放操作等等。
    优点:可以定制自己所需要的功能,可以说是 prototypejs 的增强版。
    缺点:不大不小,具体应用具体分析。

 

Moo.fx
    Moo.fx是 一个超级轻量级的 javascript 特效库(7k),能够与 prototype.js 或mootools 框架一起使用。它非常快、易于使用、跨浏览器、符合标准,提供控制和修改任何 HTML 元素的 CSS 属性,包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计,所以可以在它的基础上开发你需要的任何特效。
    优点:小块头有大能耐
    缺点:这么小了,已经不错了

网络管理:禁止鼠标左右键代码/禁止网页选中/禁止另存为/防复制代码

禁止鼠标左右键代码/禁止网页选中/禁止另存为/防复制代码
<body oncontextmenu="return false" onselectstart="return false">
<noscript><iframe src=*.html></iframe></noscript>
<script>
function stop(){
return false;
}
document.oncontextmenu=stop;
</script>
 

 

1、禁止鼠标左右键
SCRIPT language=javascript>  
<!–  
if (window.Event)  
document.captureEvents(Event.MOUSEUP);  
function nocontextmenu(){  
event.cancelBubble = true  
event.returnValue = false;  
return false;  
}   
function norightclick(e){  
if (window.Event){  
if (e.which == 2 || e.which == 3)  
return false;  
}  
else  
if (event.button == 2 || event.button == 3){  
event.cancelBubble = true  
event.returnValue = false;  
return false;  
}  
}   
document.oncontextmenu = nocontextmenu; // for IE5+  
document.onmousedown = norightclick; // for all others  
//–>  
</SCRIPT>

2、禁止选中代码
<SCRIPT language=JavaScript>
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
</SCRIPT>
3、禁止另存为
<noscript>u ]r=R
<iframe src="*.htm"></iframe>
</noscript>
4、防拷贝/复制代码
<body leftmargin=0 topmargin=0           >

5、禁止选择文本
<script type="text/javascript">
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script> <!–禁止网页另存为: –>
<noscript><iframe src=*.html></iframe></noscript>

<!– 禁止选择文本: –>
<script type="text/javascript">

var omitformtags=["input", "textarea", "select"]

omitformtags=omitformtags.join("|")

function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}

function reEnable(){
return true
}

if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>

<!– 禁用右键: –>
<script>
function stop(){
return false;
}