js特效集合

js 专栏收录该内容
0 篇文章 0 订阅

@js特效集合

【js】

/**
*
tabs
*
@author 橡树小屋
*/
var tabs=function(){
function tag(name,elem){
return (elem||document).getElementsByTagName(name);
}
//获得相应ID的元素
function id(name){
return document.getElementById(name);
}
function first(elem){
elem=elem.firstChild;
return elem&&elem.nodeType1?
elem:next(elem);
}
function next(elem){
do{
elem=elem.nextSibling;
}while(
elem&&elem.nodeType!=1
)
return elem;
}
return {
set:function(elemId,tabId){
var elem=tag(“li”,id(elemId));
var tabs=tag(“div”,id(tabId));
var listNum=elem.length;
var tabNum=tabs.length;
for(var i=0;i<listNum;i++){
elem[i].οnclick=(function(i){
return function(){
for(var j=0;j<tabNum;j++){
if(i
j){
tabs[j].style.display=“block”;
//alert(elem[j].firstChild);
elem[j].firstChild.className=“selected”;
}
else{
tabs[j].style.display=“none”;
elem[j].firstChild.className="";
}
}
}
})(i)
}
}
}
}();
window.οnlοad=function(){
tabs.set(“nav”,“menu_con”);
}
【CSS】

body{
background:#FFF;}
a{color:#585858}
#menu{width:360px;}
/-------------------nav样式----------------------/
#menu
#nav {display:block;width:100%;padding:0;margin:0;list-style:none;
background:url(…/images/bg.gif)}
#menu
#nav li {float:left;width:120px;}
#menu
#nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center}

/-------------------列表标题样式----------------------/
#menu_con{
width:358px; height:135px;border:1px solid #BF9660; border-top:none}
.selected{background:url(…/images/tag_bg.gif);}
.clear{
clear:both}
调用方法:

tabs.set(“nav”,“menu_con”);

代码下载 点击这里

只实现了点击切换的效果

2.常用的JS方法

[javascript] view plain copy
/全选取消按钮函数
function checkAll(chkobj) {
if ($(chkobj).text() == “全选”) {
$(chkobj).children(“span”).text(“取消”);
$(".checkall input:enabled").prop(“checked”, true);
} else {
$(chkobj).children(“span”).text(“全选”);
$(".checkall input:enabled").prop(“checked”, false);
}
}

//=工具类函数==
//只允许输入数字
function checkNumber(e) {
var keynum = window.event ? e.keyCode : e.which;
if ((48 <= keynum && keynum <= 57) || keynum == 8) {
return true;
} else {
return false;
}
}
//只允许输入小数
function checkForFloat(obj, e) {
var isOK = false;
var key = window.event ? e.keyCode : e.which;
if ((key > 95 && key < 106) || //小键盘上的0到9
(key > 47 && key < 60) || //大键盘上的0到9
(key == 110 && obj.value.indexOf(".") < 0) || //小键盘上的.而且以前没有输入.
(key == 190 && obj.value.indexOf(".") < 0) || //大键盘上的.而且以前没有输入.
key == 8 || key == 9 || key == 46 || key == 37 || key == 39) {
isOK = true;
} else {
if (window.event) { //IE
e.returnValue = false; //event.returnValue=false 效果相同.
} else { //Firefox
e.preventDefault();
}
}
return isOK;
}
//检查短信字数
function checktxt(obj, txtId) {
var txtCount = $(obj).val().length;
if (txtCount < 1) {
return false;
}
var smsLength = Math.ceil(txtCount / 62);
$("#" + txtId).html(“您已输入” + txtCount + “个字符,将以” + smsLength + “条短信扣取费用。”);
}
//四舍五入函数
function ForDight(Dight, How) {
Dight = Math.round(Dight * Math.pow(10, How)) / Math.pow(10, How);
return Dight;
}
//写Cookie
function addCookie(objName, objValue, objHours) {
var str = objName + “=” + escape(objValue);
if (objHours > 0) {//为0时不设定过期时间,浏览器关闭时cookie自动消失
var date = new Date();
var ms = objHours * 3600 * 1000;
date.setTime(date.getTime() + ms);
str += “; expires=” + date.toGMTString();
}
document.cookie = str;
}

//读Cookie
function getCookie(objName) {//获取指定名称的cookie的值
var arrStr = document.cookie.split("; “);
for (var i = 0; i < arrStr.length; i++) {
var temp = arrStr[i].split(”=");
if (temp[0] == objName) return unescape(temp[1]);
}
return “”;
}

//基于artdialog插件
//可以自动关闭的提示,基于artdialog插件
function jsprint(msgtitle, url, callback) {
var d = dialog({ content: msgtitle }).show();
setTimeout(function () {
d.close().remove();
}, 2000);
if (url == “back”) {
frames[“mainframe”].history.back(-1);
} else if (url != “”) {
frames[“mainframe”].location.href = url;
}
//执行回调函数
if (arguments.length == 3) {
callback();
}
}
//弹出一个Dialog窗口
function jsdialog(msgtitle, msgcontent, url, callback) {
var d = dialog({
title: msgtitle,
content: msgcontent,
okValue: ‘确定’,
ok: function () { },
onclose: function () {
if (url == “back”) {
history.back(-1);
} else if (url != “”) {
location.href = url;
}
//执行回调函数
if (argnum == 5) {
callback();
}
}
}).showModal();
}
//打开一个最大化的Dialog
function ShowMaxDialog(tit, url) {
dialog({
title: tit,
url: url
}).showModal();
}
//执行回传函数
function ExePostBack(objId, objmsg) {
if ($(".checkall input:checked").size() < 1) {
parent.dialog({
title: ‘提示’,
content: ‘对不起,请选中您要操作的记录!’,
okValue: ‘确定’,
ok: function () { }
}).showModal();
return false;
}
var msg = “删除记录后不可恢复,您确定吗?”;
if (arguments.length == 2) {
msg = objmsg;
}
parent.dialog({
title: ‘提示’,
content: msg,
okValue: ‘确定’,
ok: function () {
__doPostBack(objId, ‘’);
},
cancelValue: ‘取消’,
cancel: function () { }
}).showModal();

return false;  

}
//检查是否有选中再决定回传
function CheckPostBack(objId, objmsg) {
var msg = “对不起,请选中您要操作的记录!”;
if (arguments.length == 2) {
msg = objmsg;
}
if ($(".checkall input:checked").size() < 1) {
parent.dialog({
title: ‘提示’,
content: msg,
okValue: ‘确定’,
ok: function () { }
}).showModal();
return false;
}
__doPostBack(objId, ‘’);
return false;
}
//执行回传无复选框确认函数
function ExeNoCheckPostBack(objId, objmsg) {
var msg = “删除记录后不可恢复,您确定吗?”;
if (arguments.length == 2) {
msg = objmsg;
}
parent.dialog({
title: ‘提示’,
content: msg,
okValue: ‘确定’,
ok: function () {
__doPostBack(objId, ‘’);
},
cancelValue: ‘取消’,
cancel: function () { }
}).showModal();

return false;  

}

3.封装自己的JS组件,你也可以
前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供 . E x t e n d 的 神 奇 , 看 看 我 们 怎 么 自 定 义 自 己 的 组 件 , 比 如 我 们 想 扩 展 一 个 .Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个 .Extend("#id").MyJsControl({})做我们自己的组件,我们该如何去做呢,别急,我们慢慢来看看过程。

一、扩展已经存在的组件
1、需求背景
很多时候,我们使用jquery.ajax的方式向后台发送请求,型如

$.ajax({
type: “post”,
url: “/User/Edit”,
data: { data: JSON.stringify(postdata) },
success: function (data, status) {
if (status == “success”) {
toastr.success(‘提交数据成功’);
$("#tb_aaa").bootstrapTable(‘refresh’);
}
},
error: function (e) {
},
complete: function () {
}

        });

这种代码太常见了,这个时候我们有这样一个需求:在自己调用ajax请求的时候,我们不想每次都写error:function(e){}这种代码,但是我们又想让它每次都将ajax的错误信息输出到浏览器让用户能够看到。怎么办呢?

2、实现原理
要想实现以上效果其实并不难,我们可以将 . a j a x ( ) 封 装 一 层 , 在 封 装 的 公 共 方 法 里 面 定 义 e r r o r 对 应 的 事 件 即 可 。 确 实 , 这 样 能 达 到 我 们 的 要 求 , 但 是 并 不 完 美 , 原 因 很 简 单 : 1 ) 在 j q u e r y 的 基 础 上 面 再 封 装 一 层 , 效 率 不 够 高 ; 2 ) 需 要 改 变 调 用 者 的 习 惯 , 每 次 调 用 a j a x 的 时 候 需 要 按 照 我 们 定 义 的 方 法 的 规 则 来 写 , 而 不 能 直 接 用 原 生 的 .ajax({})封装一层,在封装的公共方法里面定义error对应的事件即可。确实,这样能达到我们的要求,但是并不完美,原因很简单:1)在jquery的基础上面再封装一层,效率不够高;2)需要改变调用者的习惯,每次调用ajax的时候需要按照我们定义的方法的规则来写,而不能直接用原生的 .ajax()error1jquery2ajax.ajax({})这种写法,这是我们不太想看到。

既然如此,那我们如何做到既不封装控件,又能达到以上要求呢?答案就是通过我们的$.extend去扩展原生的jquery.ajax。

其实实现起来也并不难,通过以下一段代码就能达到我们的要求。

(function (KaTeX parse error: Expected '}', got 'EOF' at end of input: ) { //1.得到.ajax的对象
var _ajax = $.ajax;
KaTeX parse error: Expected '}', got 'EOF' at end of input: … //4.扩展原生的.ajax方法,返回最新的参数
var _options = $.extend(options, {
error: function (XMLHttpRequest, textStatus, errorThrown) {
fn.error(XMLHttpRequest, textStatus, errorThrown);
},
success: function (data, textStatus) {
fn.success(data, textStatus);
},
beforeSend: function (XHR) {
fn.beforeSend(XHR);
},
complete: function (XHR, TS) {
fn.complete(XHR, TS);
}
});
//5.将最新的参数传回ajax对象
_ajax(_options);
};
})(jQuery);

如果没接触过jquery里面 . e x t e n d 这 个 方 法 的 童 鞋 可 能 看 不 懂 以 上 是 什 么 意 思 。 好 , 我 们 首 先 来 看 看 j q u e r y A P I 对 .extend这个方法的童鞋可能看不懂以上是什么意思。好,我们首先来看看jquery API对 .extendjqueryAPI.extend()方法是作何解释的。

什么意思呢?我们来看官方的两个例子就知道了

栗子一:

var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
$.extend(settings, options);
结果:

settings == { validate: true, limit: 5, name: “bar” }
栗子二:

var empty = {};
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = $.extend(empty, defaults, options);
结果:

settings == { validate: true, limit: 5, name: “bar” }
empty == { validate: true, limit: 5, name: “bar” }
以上的两个简单例子就说明extend()方法作用就是合并另个对象,有相同的则覆盖,没有相同的则添加。就是这么简单。

了解了$.extend()的作用,我们就能大概看懂上面那个扩展jquery.ajax的实现了吧。主要的步骤分为:

1)定义默认的error处理方法。

var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
toastr.error(XMLHttpRequest.responseText, ‘错误消息’, { closeButton: true, timeOut: 0, positionClass: ‘toast-top-full-width’ });
},
success: function (data, textStatus) { },
beforeSend: function (XHR) { },
complete: function (XHR, TS) { }
}

2)判断用户在调用$.ajax({})的时候是否自定了error:function(){},如果定义过,则使用用户定义的,反之则用默认的error处理方法。

3)使用 . e x t e n d ( ) 将 e r r o r 默 认 处 理 方 法 传 入 .extend()将error默认处理方法传入 .extend()error.ajax()的参数中。我们看options参数时包含$.ajax()方法里面所有的参数的,然后用默认的fn去扩展它即可。

通过以上三步就能够实现对 . a j a x ( ) 方 法 里 面 e r r o r 默 认 处 理 方 法 。 这 样 扩 展 , 对 于 我 们 使 用 者 来 说 完 全 感 觉 不 到 变 化 , 我 们 仍 然 可 以 .ajax()方法里面error默认处理方法。这样扩展,对于我们使用者来说完全感觉不到变化,我们仍然可以 .ajax()error使.ajax({});这样去发送ajax请求,如果没有特殊情况,不用写error处理方法。

3、组件扩展的意义
使用组件扩展,能够帮助我们在原有组件上面增加一些和我们系统业务相关的处理需求,而在使用时,还是和使用原生组件一样去调用,免去了在组件上面再封装一层的臃肿。

二、扩展自己组件
上面通过 . e x t e n d ( ) 方 法 扩 展 了 .extend()方法扩展了 .extend().ajax()的error事件处理方法。下面我们来封装一个自己的组件试试,功能很简单,但比较有说明性。我们就以select这个组件为例,很多情况下,我们的select里面的option都是需要从数据库里面取数据的,所以一般的做法就是发送一个ajax请求,然后在success方法里面拼html。现在我们就封装一个select远程取数据的方法。

1、代码实现以及使用示例
先上干货吧,将写好的整出来:

(function ($) {
//1.定义jquery的扩展方法combobox
$.fn.combobox = function (options, param) {
if (typeof options == ‘string’) {
return $.fn.combobox.methods[options](this, param);
}
//2.将调用时候传过来的参数和default参数合并
options = $.extend({}, $.fn.combobox.defaults, options || {});
//3.添加默认值
var target = $(this);
target.attr(‘valuefield’, options.valueField);
target.attr(‘textfield’, options.textField);
target.empty();
var option = $(’’);
option.attr(‘value’, ‘’);
option.text(options.placeholder);
target.append(option);
//4.判断用户传过来的参数列表里面是否包含数据data数据集,如果包含,不用发ajax从后台取,否则否送ajax从后台取数据
if (options.data) {
init(target, options.data);
}
else {
//var param = {};
options.onBeforeLoad.call(target, options.param);
if (!options.url) return;
$.getJSON(options.url, options.param, function (data) {
init(target, data);
});
}
function init(target, data) {
$.each(data, function (i, item) {
var option = $(’’);
option.attr(‘value’, item[options.valueField]);
option.text(item[options.textField]);
target.append(option);
});
options.onLoadSuccess.call(target);
}
target.unbind(“change”);
target.on(“change”, function (e) {
if (options.onChange)
return options.onChange(target.val());
});
}

//5.如果传过来的是字符串,代表调用方法。
$.fn.combobox.methods = {
    getValue: function (jq) {
        return jq.val();
    },
    setValue: function (jq, param) {
        jq.val(param);
    },
    load: function (jq, url) {
        $.getJSON(url, function (data) {
            jq.empty();
            var option = $('<option></option>');
            option.attr('value', '');
            option.text('请选择');
            jq.append(option);
            $.each(data, function (i, item) {
                var option = $('<option></option>');
                option.attr('value', item[jq.attr('valuefield')]);
                option.text(item[jq.attr('textfield')]);
                jq.append(option);
            });
        });
    }
};

//6.默认参数列表
$.fn.combobox.defaults = {
    url: null,
    param: null,
    data: null,
    valueField: 'value',
    textField: 'text',
    placeholder: '请选择',
    onBeforeLoad: function (param) { },
    onLoadSuccess: function () { },
    onChange: function (value) { }
};

})(jQuery);

先来看看我们自定义组件如何使用:

用法一:通过URL远程取数据并初始化
首先定义一个空的select


然后初始化它

$(function(){
$(’#sel_search_plant’).combobox({
url: ‘/apiaction/Plant/Find’,
valueField: ‘TM_PLANT_ID’,
textField: ‘NAME_C’
});
})

参数很简单,就不一一介绍了。很简单有木有~~

用法二:取值和设置
var strSelectedValue = $(’#sel_search_plant’).combobox(“getValue”);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲sel_search_plan…(’#sel_search_plant’).val()就能解决的事,何必要再封一层。这里仅仅是做演示,试想,如果是封装成类似select2或者multiselect这种组件,getValue和setValue的意义就有了,你觉得呢?

2、代码详细讲解
上面的实现代码,如果您一眼就能看懂,证明您是经常封组件的大虾了,下面的就不用看了。如果看不懂,也没关系,我们将代码拆开详细看看里面是什么鬼。

(1)首先看看我们最常看到的如下写法:

(function ($) {
//…封装组件逻辑
})(jQuery);
初初看到这种用法,博主也是狂抓,这是什么鬼嘛,四不像啊。使用多了之后才知道原来这就是一个匿名函数的形式。将它拆开来看如下:

var fn = function($){
//…组件封装逻辑
};
fn(jQuery);
也就是说这种写法就表示先定义一个方法,然后立即调用这个方法,jQuery相当于实参。打开jquery.js的原文件可以看到,jQuery是这个文件里面的一个全局变量。

(2)定义自己的组件的代码:

$.fn.combobox = function (options, param) {

};
习惯这种写法的应该知道,这个就表示向jquery对象添加自定义方法,比如你想使用文章开始的 $("#id").MyJsControl({}) 这种用法,你就可以这样定义 $.fn.MyJsControl=function(options){} 。

(3) options = $.extend({}, $.fn.combobox.defaults, options || {}); 这一句,看过上文的朋友应该还记得extend这么一个方法吧,怎么样,又来了你。这句话其实就没什么好说的了,合并默认参数和用户传进来的参数。

(4)默认参数列表

$.fn.combobox.defaults = {
url: null,
param: null,
data: null,
valueField: ‘value’,
textField: ‘text’,
placeholder: ‘请选择’,
onBeforeLoad: function (param) { },
onLoadSuccess: function () { },
onChange: function (value) { }
};

如果用户没有传参,就用默认的参数列表。如果你够细心,你会发现博主之前分享的其他bootstrap组件的js文件里面都有这么一个default参数列表。我们随便找两个:

bootstrap上传组件

bootstrap table组件

基本都是这么些用法。这样来看,是否也可以自己封一个js组件~~

三、总结
以上就是博主对js组件扩展以及封装用法的认识和总结。当然,都是些比较简单基础的封装,如果想要实现类似bootstrap table的组件,那还差得很远。不过万丈高楼平地起,只要打好基础,封一个自己的table组件也不是什么大问题。文中如果有理解不对的地方,欢迎指出,博主将不胜感激。如果本文能够对你有丝毫帮助,麻烦抬起你的小手点个推荐,博主一定继续努力,将更好的文章分享给大家。

4.document和window对象详解
document对象]
  该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。

属性

alinkColor 活动链接的颜色(ALINK)
  anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)
  anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)
  bgColor 文档的背景颜色(BGCOLOR)
  cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性
  fgColor 文档的文本颜色(标记里的TEXT特性)
  form 文档中的一个窗体()(该属性本身也是一个对象)
  forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)
  lastModified 文档最后的修改日期
  linkColor 文档的链接的颜色,即标记中的LINK特性(链接到用户没有观察到的文档)
  link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)
  links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)
  location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
  referrer 包含链接的文档的URL,用户单击该链接可到达当前文档
  title 文档的标题((TITLE>)
  vlinkColor 指向用户已观察过的文档的链接文本颜色,即标记的VLINK特性

方法

clear 清除指定文档的内容
  close 关闭文档流
  open 打开文档流
  write 把文本写入文档
  writeln 把文本写入文档,并以换行符结尾

[window对象]

它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。

属性

defaultStatus 缺省的状态条消息
  document 当前显示的文档(该属性本身也是一个对象)
  frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)
  frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)
  history 窗口的历史列表(该属性本身也是一个对象)
  length 窗口内的框架数
  location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变document.location(因为这是当前显示文档的位置)
  name 窗口打开时,赋予该窗口的名字
  opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)
  parent 包含当前框架的窗口的同义词。frame和window对象的一个属性
  self 当前窗口或框架的同义词
  status 状态条中的消息
  top 包含当前框架的最顶层浏览器窗口的同义词
  window 当前窗口或框架的同义词,与self相同

方法

alert() 打开一个Alert消息框
  clearTimeout() 用来终止setTimeout方法的工作
  close() 关闭窗口
  confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false
  blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)
  focus() 把指定的窗口带到前台(另一个新方法)
  open() 打开一个新窗口
  prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本
  setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序

事件处理程序

Onload() 页面载入时触发
  Onunload() 页面关闭时触发

5.几种常见的JavaScript特效

①页面显示大广告图片及其自动关闭
在打开一个页面时,常常会出现一个大广告图片显示网站的最新活动等,一般广告显示5秒左右,广告又会自己关闭,这个是怎么实现的?
其实只需要将图片加在网页合适的位置,然后再写一个删去隐藏图片元素的函数,并设置n秒后执行:

    function showAd(){
    //默认图片所在div的id为ad
        var Pic = document.getElementById('ad');
        setTimeout(function() {
            Pic.style.display = 'none';
        },5000);
    }
    window.οnlοad=showAd;

1
2
3
4
5
6
7
8
②输入完成后进行校验
实际上只需要在input标签里面添加一个onblur属性,该属性绑定一个用于校验的函数即可:

1
2
3
4
5
6
7
③勾选全部复选框
在网站中,如果复选框较多,会有一个全选按钮,点击后,所有复选框会被选中:

你的爱好是: 篮球 足球 网球 乒乓 游泳 全选
<script>
  function SelectAll(){
      if(document.getElementById('selectall').checked == true){
          var allValue = document.getElementsByName('hobby');
          for(var i=0;i<allValue.length;i++){
              allValue[i].checked=true;
          }
      }

  }
</script>

6.常见40个常用的js页面效果图

  1. οncοntextmenu=“window.event.returnValue=false” 将彻底屏蔽鼠标右键
  1. 取消选取、防止复制
  2. οnpaste=“return false” 不准粘贴

  3. οncοpy=“return false;” oncut=“return false;” 防止复制

  4. IE地址栏前换成自己的图标
  5. 可以在收藏夹中显示出你的图标
  6. 关闭输入法

  7. 永远都会带着框架

  1. 防止被人frame
  1. 网页将不能被另存为
    <iframe src="/blog/*.html>";

  2. <input type=button value=查看网页源代码
    οnclick=“window.location = “view-source:”+ “http://www.williamlong.info””>

12.删除时确认
<a href="javascript:if(confirm(“确实要删除吗?”))location=“boos.asp?&areyou=删除&page=1"”>删除

  1. 取得控件的绝对位置
    //Javascript

//VBScript

  1. 光标是停在文本框文字的最后

<input type=text name=text1 value=“123” οnfοcus=“cc()”>

  1. 判断上一页的来源
    javascript:
    document.referrer

  2. 最小化、最大化、关闭窗口

17.屏蔽功能键Shift,Alt,Ctrl

  1. 网页不会被缓存
或者

19.怎样让表单没有凹凸感?


<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

1 solid #000000">

20.

&的区别?

(division)用来定义大段的页面元素,会产生转行 用来定义同一行内的元素,跟
的唯一区别是不产生转行 是ns的标记,ie不支持,相当于

21.让弹出窗口总是在最上面:

22.不要滚动条?
让竖条没有:

让横条没有: 两个都去掉?更简单了

23.怎样去掉图片链接点击后,图片周围的虚线?

24.电子邮件处理提交表单

25.在打开的子窗口刷新父窗口的代码里如何写?
window.opener.location.reload()

26.如何设定打开页面的大小

27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

  1. 检查一段字符串是否全由数字组成
  1. 获得一个窗口的大小
    document.body.clientWidth; document.body.clientHeight

  2. 怎么判断是否是字符
    if (/[^/x00-/xff]/g.test(s)) alert(“含有汉字”);
    else alert(“全是字符”);

31.TEXTAREA自适应文字行数的多少

  1. 日期减去天数等于第二个日期
  1. 选择了哪一个Radio
Style Barcode

34.脚本永不出错

35.ENTER键可以让光标移到下一个输入框
<input οnkeydοwn=“if(event.keyCode==13)event.keyCode=9”>

  1. 检测某个网站的链接速度:
    把如下代码加入区域中:
  1. 各种样式的光标
    auto :标准光标
    default :标准箭头
    hand :手形光标
    wait :等待光标
    text :I形光标
    vertical-text :水平I形光标
    no-drop :不可拖动光标
    not-allowed :无效光标
    help :?帮助光标
    all-scroll :三角方向标
    move :移动标
    crosshair :十字标
    e-resize
    n-resize
    nw-resize
    w-resize
    s-resize
    se-resize
    sw-resize

38.页面进入和退出的特效
进入页面
推出页面
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。transition表示使用哪种特效,取值为1-23:
  0 矩形缩小
  1 矩形扩大
  2 圆形缩小
  3 圆形扩大
  4 下到上刷新
  5 上到下刷新
  6 左到右刷新
  7 右到左刷新
  8 竖百叶窗
  9 横百叶窗
  10 错位横百叶窗
  11 错位竖百叶窗
  12 点扩散
  13 左右到中间刷新
  14 中间到左右刷新
  15 中间到上下
  16 上下到中间
  17 右下到左上
  18 右上到左下
  19 左上到右下
  20 左下到右上
  21 横条
  22 竖条
  23 以上22种随机选择一种

39.在规定时间内跳转

40.网页是否被检索

  其中属性值有以下一些:   属性值为"all": 文件将被检索,且页上链接可被查询;   属性值为"none": 文件不被检索,而且不查询页上的链接;   属性值为"index": 文件将被检索;   属性值为"follow": 查询页上的链接;   属性值为"noindex": 文件不检索,但可被查询链接;   属性值为"nofollow": 文件不被检索,但可查询页上的链接。

最大化窗口?

解决问题:由于层与下拉框之间的优先级是:下拉框 > 层,因此在显示的时候,会因为优先级的次序而会出现如上问题。(如果几个元素都是层的话,我们可以通过层的 z-index 属性来设置)解决办法就是:给层中放一个优先级比下拉框更高的元素(iframe),从而解决此问题!具体解决代码如下:

<a href="#" οnclick=“document.getElementById(‘menu’).style.visibility=‘visible’”>menu

A form selection list

输入框也可以做的很漂亮了

外向数:  没回答的题数:
总得分:  结    论:

        <input onClick=processForm(this.form) style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt" type=button value=查看结果 name="button"> 
         <input type="reset" name="Submit" value="重做">
        </div>

注意:修改为<body οnlοad=“max.Click()”>即为打开最大

化窗口,而如果改为<body οnlοad=“min.Click()”>就变为窗口一打开就最小化

页面自动刷新(说明)

当你做网页时,是不是有的时候想让你的网页自动不停刷新,或者过一段时间自动跳转到另外一个你自己设定的页面?其实实现这个效果非常地简单,而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。

1,页面自动刷新:把如下代码加入区域中,其中20指每隔20秒刷新一次页面.

2,页面自动跳转:把如下代码加入区域中,其中20指隔20秒后跳转到http://www.williamlong.info页面。

页面自动关闭

5000是指时间

弹出窗口自动关闭

10秒后弹出窗口自动关闭

注意:在新的tan.htm的body中要加 <onLoad=“closeit()”>
head

注意:这段代码是在新建文件中的

function closeit()

这个可不是(引用)呀。是直接调用的。以下代码加入区域

7.JavaScript经典效果集锦

申请加精,只有这样本帖子才不会沉下去,感觉这个帖子对大家很有用的!

一 实用且必用的小脚本代码:

脚本1:进入主页以后自动播放声音

CODE:[Copy to clipboard]

脚本2:进入主页后自动最大话,省的去在自己单击了

CODE:[Copy to clipboard]

脚本3:显示现在时间的脚本

CODE:[Copy to clipboard]

脚本4:显示最后修改时间的脚本

CODE:[Copy to clipboard]

脚本5:设为首页,加为收藏,加入频道,启动outlook发信

CODE:[Copy to clipboard]
<a style=“cursor:hand” 
οnclick=“this.style.behavior=“url(#default#homepage)”;
this.setHomePage(http://10.13.31.90/~kayvin/);”>">设为首页

<a style=“cursor:hand”
οnclick=“window.external.AddFavorite(location.href,document.title);”>加入收藏

<a href=javascript:window.external.addChannel(“typhoon.cdf”)>加入频道

与我联系
脚本6:状态栏动态显示现在时间

CODE:[Copy to clipboard]

CODE:[Copy to clipboard]
[关闭窗口]
脚本8:按下F12键,直接返回首页

CODE:[Copy to clipboard]

脚本9:后退,刷新,前进

CODE:[Copy to clipboard]
<input type=button value=后退 οnclick=history.go(-1)>

<input type=button value=刷新 οnclick=history.go(-0)>

<input type=button value=前进 οnclick=history.go(+1)>
脚本10:设定时间弹出窗口,4000=4秒,当然你可以自定义

CODE:[Copy to clipboard]

二 鼠标旁边的提示信息,类似与163登录后的页面提示效果:

CODE:[Copy to clipboard]
tip

document.write("

");

function showPopupText(){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPopnull || sPop"") {
dypopLayer.innerHTML="";
dypopLayer.style.filter=“Alpha()”;
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle=“cPopText”;
curShow=setTimeout(“showIt()”,tPopWait);
}
}
}
function showIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter=“Alpha(Opacity=0)”;
fadeOut();
}
function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout(“fadeOut()”,1);
}
else {
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout(“fadeIn()”,tPopShow);
}
}
function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0) {
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout(“fadeIn()”,1);
}
}
document.οnmοuseοver=showPopupText;

三 如果文字过长,则将过长的部分变成省略号显示:

CODE:[Copy to clipboard]

就是比如有一行文字,很长,表格内一行显示不下.
四 滚动的图片

CODE:[Copy to clipboard]

CODE:[Copy to clipboard]

οnkeydοwn=“javascript:onenter();”

function onenter(){
if(event.keyCode==13){
alert(“回车”);
}
}
六 让你的文本链接渐隐渐显:

CODE:[Copy to clipboard]

startColor = “#671700”; // 定义链接颜色
endColor = “#D8D1C5”; // 定义要渐变到最后的颜色

stepIn = 17;
stepOut = 23;

/*
定义是否让所有的文本链接自动渐变,true为是,false为否
*/
autoFade = true;

/*
在这里定义css样式里的类class:fade,如果为true,那么你要将要渐变的链接上加上此fade样式
*/
sloppyClass = false;

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]=“a”; hexa[11]=“b”; hexa[12]=“c”;
hexa[13]=“d”; hexa[14]=“e”; hexa[15]=“f”;

document.onmouseover = domouseover;
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}

function domouseover() {
if(document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == “A” && autoFade) || srcElement.className == “fade” || (sloppyClass && srcElement.className.indexOf(“fade”) != -1))
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}

function domouseout() {
if (document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == “A” && autoFade) || srcElement.className == “fade” || (sloppyClass && srcElement.className.indexOf(“fade”) != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut);
}
}

function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}

function hex(i) {
if (i < 0)
return “00”;
else if (i > 255)
return “ff”;
else
return “” + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {
var hr = hex®; var hg = hex(g); var hb = hex(b);
element.style.color = “#”+hr+hg+hb;
}

function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];

if (fadeId[0] != null && fade[0] != element){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId[i]);
i++;
}
}

for(var i = 0; i <= step; i++) {
 fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +

step+ “)),Math.floor(” +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ “/” +step+
“)),Math.floor(” +sb+ " * ((" +step+ “-” +i+ “)/” +step+ “) + " +eb+ " * (” +i+ “/” +step+ “)),”+element+");",i*step);
}
fadeId[0] = element;
}

让你的文本链接渐隐渐显 七 类似与QQ的好友/黑名单之类的树型菜单_极品:

CODE:[Copy to clipboard]

New Document

function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);

if (menu == null || actuator == null) return;

//if (window.opera) return; // I'm too tired

actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";
actuator.onclick = function() {
    var display = menu.style.display;
    this.parentNode.style.backgroundImage =
        (display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";
    menu.style.display = (display == "block") ? "none" : "block";

    return false;
}

}
window.onload = function() {
initializeMenu(“productsMenu”, “productsActuator”);
initializeMenu(“newPhonesMenu”, “newPhonesActuator”);
initializeMenu(“compareMenu”, “compareActuator”);
}

八 很多的脚本翻页:

CODE:[Copy to clipboard]
<!doctype html public “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

JavaScript: showPages v1.0 [by Lapuasi.com]

showPages v1.1

Infomation

Author : Lapuasi
E-Mail : lapuasi@gmail.com
Web : http://www.lapuasi.com
Date : 2005-11-17

Example

var pg = new showPages(‘pg’);
pg.pageCount = 12; //定义总页数(必要)
pg.argName = ‘p’; //定义参数名(可选,缺省为page)
pg.printHtml(); //显示页数

Supported in Internet Explorer, Mozilla Firefox
*/

function showPages(name) { //初始化属性
this.name = name; //对象名称
this.page = 1; //当前页数
this.pageCount = 1; //总页数
this.argName = ‘page’; //参数名
this.showTimes = 1; //打印次数
}

showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
var args = location.search;
var reg = new RegExp(’[/?&]?’ + this.argName + ‘=([^&]*)[&$]?’, ‘gi’);
var chk = args.match(reg);
this.page = RegExp.KaTeX parse error: Expected 'EOF', got '}' at position 4: 1; }̲ showPages.prot…]?’, ‘gi’);
args = args.replace(reg,’$1’);
if (args == ‘’ || args == null) {
args += ‘?’ + this.argName + ‘=’ + page;
} else if (args.substr(args.length - 1,1) == ‘?’ || args.substr(args.length - 1,1) == ‘&’) {
args += this.argName + ‘=’ + page;
} else {
args += ‘&’ + this.argName + ‘=’ + page;
}
return url + args;
}
showPages.prototype.toPage = function(page){ //页面跳转
var turnTo = 1;
if (typeof(page) == ‘object’) {
turnTo = page.options[page.selectedIndex].value;
} else {
turnTo = page;
}
self.location.href = this.createUrl(turnTo);
}
showPages.prototype.printHtml = function(mode){ //显示html代码
this.getPage();
this.checkPages();
this.showTimes += 1;
document.write(’

’);
document.getElementById(‘pages_’ + this.name + ‘_’ + this.showTimes).innerHTML = this.createHtml(mode);

}
showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
var ie = navigator.appName==“Microsoft Internet Explorer”?true:false;
if(!ie) var key = e.which;
else var key = event.keyCode;
if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true;
return false;
}
//–>

document.write('
Show Times: ’ + pg.showTimes + ‘, Mood Default’);
pg.printHtml();
document.write('
Show Times: ’ + pg.showTimes + ‘, Mood 0’);
pg.printHtml(0);
document.write('
Show Times: ’ + pg.showTimes + ‘, Mood 1’);
pg.printHtml(1);
document.write('
Show Times: ’ + pg.showTimes + ‘, Mood 2’);
pg.printHtml(2);
document.write('
Show Times: ’ + pg.showTimes + ‘, Mood 3 (only IE)’);
pg.printHtml(3);
document.write('
Show Times: ’ + pg.showTimes + ‘, Mood 4’);
pg.printHtml(4);
document.write('
Show Times: ’ + pg.showTimes + ‘, Mood 5’);
pg.printHtml(5);
//–>

九 DIV的透明层实现:

CODE:[Copy to clipboard]

        <td height="25" bgcolor="#f5f5f5" class="13">你也可以在这里插入图片</td>
                          </tr>
                          <tr> 
                            
        <td height="20" bgcolor="#f5f5f5" class="12">你想注册地图名片吗</td>
                          </tr>
                          <tr> 
                            
        <td height="20" bgcolor="#f5f5f5" class="12">http://mc.mapabc.com</td>
                          </tr>
                          <tr>
                            
        <td height="20" bgcolor="#f5f5f5" class="12">EMAIL:lipeng@mapabc.com</td>
                          </tr>
                          <tr> 
                            
        <td height="20" bgcolor="#f5f5f5" class="12">地址</td>
                          </tr>
                          <tr> 
                            
        <td height="20" bgcolor="#f5f5f5" class="12">邮编</td>
                          </tr>
                        </table>
          </div>

十 超级强大的表单验证:

CODE:[Copy to clipboard]

表单验证类 Validator v1.01
真实姓名:
英文名:
主页:
密码:
重复:
信箱:
信箱:
QQ:
身份证:
年龄:
年龄1:
电话:
手机:
生日:
邮政编码:
邮政编码:
操作系统:选择您所用的操作系统Win98Win2kWinXP
所在省份:广东陕西浙江江西
爱好:运动上网听音乐看书

CODE:[Copy to clipboard]

3

十三 很酷的效果,表格被选中回变颜色:

CODE:[Copy to clipboard]

Mapabc地图无限 十四 弹出提示的效果:

CODE:[Copy to clipboard]

cao888---提示

function cao888()
{
this.display=display;
}

function display()
{
document.write("

<button style=‘width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;’ type=button οnclick=document.getElementById(‘cao1’).style.display=‘block’ οnfοcus=this.blur()>CAO留言
");
document.write("
");
document.write("
");
document.write("<table width=200 height=20 bgcolor=green οnmοusedοwn=‘cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();’ οnmοuseup=‘releaseCapture();’ οnmοusemοve=‘caoMove(this.parentNode)’ style=‘cursor:move;’>");
document.write("");
document.write(“提示:CAO888”);
document.write("");
document.write("");
document.write("<span style= cursor:hand οnclick=this.parentNode.parentNode.style.display=‘none’;>
CAO呀,错误了…
[确定]");
document.write("
“);
document.write(”
");
}
function caoMove(obj) //实现层的拖移
{
if(event.button==1)
{
var caoX=obj.clientLeft;
var caoY=obj.clientTop;
obj.style.pixelLeft=caoX+(event.x-cao_x);
obj.style.pixelTop=caoY+(event.y-cao_y);
}
}

十五 图片之间的切换:

CODE:[Copy to clipboard]

十六 DIV_圆边圆角的实现:

CODE:[Copy to clipboard]

十七 跳动的菜单:

CODE:[Copy to clipboard]

模仿as效果的导航菜单

–>

CODE:[Copy to clipboard]

te  
友善提醒:
1、如果别的程 序(如qq)或者其他网页正在使用摄像头,请先关闭相关程序,否则本
网页对摄像头的功能不能使用。
2、本网页必须使用一个插件ezvidc60.ocx,如果你未安装,请下载安装,(把下载的文件ezvid.rar解压到一个目录后,双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全,请关闭本页。

===================================================================================

te  
友善提醒:
1、如果别的程 序(如qq)或者其他网页正在使用摄像头,请先关闭相关程序,否则本
网页对摄像头的功能不能使用。
2、本网页必须使用一个插件ezvidc60.ocx,如果你未安装,请下载安装,(把下载的文件ezvid.rar解压到一个目录后,双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全,请关闭本页。
十九 客户端静态页面玩分页:

CODE:[Copy to clipboard]

New Document header
footer

}};
DHTMLpagenation.initialize=function() { with (this)
{
divDisplayContent.className=contentStyle!=null?contentStyle:“divContent”;
if(contentLength<=perpageLength)
{
strDisplayContent=content;
divDisplayContent.innerHTML=strDisplayContent;
return null;
}

    pageSizeCount=Math.ceil((contentLength/perpageLength));

    DHTMLpagenation.goto(currentPage);
    DHTMLpagenation.displayContent();

}};
DHTMLpagenation.displayPage=function() { with (this)
{
strDisplayPagenation=“分页:”;

    if(currentPage&&currentPage!=1)
            strDisplayPagenation+='<a href="javascript:void(0)" οnclick="DHTMLpagenation.previous()">上一页</a>&nbsp;&nbsp;';
    else
            strDisplayPagenation+="上一页&nbsp;&nbsp;";

    for(var i=1;i<=pageSizeCount;i++)
    {
            if(i!=currentPage)
                    strDisplayPagenation+='<a href="javascript:void(0)" οnclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';
            else
                    strDisplayPagenation+=i+"&nbsp;&nbsp;";
    }

    if(currentPage&&currentPage!=pageSizeCount)
            strDisplayPagenation+='<a href="javascript:void(0)" οnclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';
    else
            strDisplayPagenation+="下一页&nbsp;&nbsp;";

    strDisplayPagenation+="共 " + pageSizeCount + " 页,每页" + perpageLength + " 字符,调整字符数:<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' οnclick='DHTMLpagenation.change(document.getElementById(/"ctlPerpageLength/").value);'>";

    divDisplayPagenation.innerHTML=strDisplayPagenation;

}};
DHTMLpagenation.previous=function() { with(this)
{
DHTMLpagenation.goto(currentPage-1);
}};
DHTMLpagenation.next=function() { with(this)
{
DHTMLpagenation.goto(currentPage+1);
}};
DHTMLpagenation.goto=function(iCurrentPage) { with (this)
{
startime=new Date();
if(regularExp.test(iCurrentPage))
{
currentPage=iCurrentPage;
strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
}
else
{
alert(“page parameter error!”);
}
DHTMLpagenation.displayPage();
DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayContent=function() { with (this)
{
divDisplayContent.innerHTML=strDisplayContent;
}};
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
if(regularExp.test(iPerpageLength))
{
DHTMLpagenation.perpageLength=iPerpageLength;
DHTMLpagenation.currentPage=1;
DHTMLpagenation.initialize();
}
else
{
alert(“请输入数字”);
}
}};

// method
// DHTMLpagenation(strContent,perpageLength)

DHTMLpagenation(s,100);

//–>

二十 类似与google个性页面的好东东:

CODE:[Copy to clipboard]

DRAG the DIV

draging:function(){//重要:判断MOUSE的位置
if(!Drag.dragged||Drag.aonull)return;
var tX=event.clientX;
var tY=event.clientY;
Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
for(var i=0;i<parentTable.cells.length;i++){
var parentCell=Drag.getInfo(parentTable.cells[i]);
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
var subTables=parentTable.cells[i].getElementsByTagName(“table”);
if(subTables.length
0){
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
parentTable.cells[i].appendChild(Drag.ao);
}
break;
}
for(var j=0;j<subTables.length;j++){
var subTable=Drag.getInfo(subTables[j]);
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
break;
}else{
parentTable.cells[i].appendChild(Drag.ao);
}
}
}
}
}
,
dragEnd:function(){
if(!Drag.dragged)return;
Drag.dragged=false;
Drag.mm=Drag.repos(150,15);
Drag.ao.style.borderWidth=“0px”;
Drag.ao.style.borderTop=“1px solid #3366cc”;
Drag.tdiv.style.borderWidth=“0px”;
Drag.ao.style.zIndex=1;
},
getInfo:function(o){//取得坐标
var to=new Object();
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o!=document.body){
to.left+=o.offsetLeft;
to.top+=o.offsetTop;
o=o.offsetParent;
}
to.right=to.left+twidth;
to.bottom=to.top+theight;
return to;
},
repos:function(aa,ab){
var f=Drag.tdiv.filters.alpha.opacity;
var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
var kf=f/ab;
return setInterval(function(){if(ab<1){
clearInterval(Drag.mm);
Drag.tdiv.removeNode(true);
Drag.ao=null;
return;
}
ab–;
tl-=kl;
tt-=kt;
f-=kf;
Drag.tdiv.style.left=parseInt(tl)+“px”;
Drag.tdiv.style.top=parseInt(tt)+“px”;
Drag.tdiv.filters.alpha.opacity=f;
}
,aa/ab)
},
inint:function(){//初始化
for(var i=0;i<parentTable.cells.length;i++){
var subTables=parentTable.cells[i].getElementsByTagName(“table”);
for(var j=0;j<subTables.length;j++){
if(subTables[j].className!=“dragTable”)break;
subTables[j].rows[0].className=“dragTR”;
subTables[j].rows[0].attachEvent(“onmousedown”,Drag.dragStart);
}
}
document.οnmοusemοve=Drag.draging;
document.οnmοuseup=Drag.dragEnd;
}
//end of Object Drag
}
Drag.inint();

function _show(str){
var w=window.open(’’,’’);
var d=w.document;
d.open();
str=str.replace(/=(?!")(.?)(?!")( |>)/g,"=/"$1/"$2");
str=str.replace(/(<)(.
?)(>)/g,"<$2>
");
str=str.replace(//r/g,"
/n");
d.write(str);
}

GMAIL
暂时无法显示GMAIL内容
新浪体育
解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖:辛吉斯欣喜能以冠军起步
印度搭档创下纪录法新社前瞻冬奥短道速滑:中韩唱主角 美加施冷箭
焦点
京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选 解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 »
中关村在线
新年行情速递 双敏板卡低价推荐 终于等到了,映泰6600GT一降降一百 罗技G15游戏键盘热力促销,代购价仅529元
网易商业
上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市
黑可天下
上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市
二十一 漂亮的表格:

CODE:[Copy to clipboard]

CSS Tables

body {
font: normal 11px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}

a {
color: #c75f3e;
}

#mytable {
width: 700px;
padding: 0;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}

th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}

td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/---------for IE 5.x bug/
html>body td{ font-size:11px;}

G5 series">

  Configurations
<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
    <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
lipeng M9454LL/A
<td>M9455LL/A</td>
<td>M9457LL/A</td>
mapabc Dual 1.8GHz PowerPC G5 Dual 2GHz PowerPC G5
<td class="alt">Dual 2.5GHz PowerPC G5</td>
地图名片 900MHz per processor 1GHz per processor 1.25GHz per processor 图秀卡 512K per processor 512K per processor 512K per processor 二十二 经典的带阴影的可拖动的浮动层

CODE:[Copy to clipboard]

MyPixbot

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v==‘show’)?‘visible’:(v==‘hide’)?‘hidden’:v; }
obj.visibility=v; }
}

function

MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS

) { //v4.01
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
retVal = true; if(IE && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) if (allLayers[i].document &&

allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++)

allLayers[allLayers.length]=layers[j];
} else {
if (NS6) { var spns = getElementsByTagName(“span”); var all =

getElementsByTagName(“div”);
for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position)

allLayers[allLayers.length]=spns[i];}
for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position)

allLayers[allLayers.length]=all[i];
} }
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
if (String(curLeft)“NaN”) curLeft=0; curDrag.MM_startL = curLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curTop)
“NaN”) curTop=0; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == ‘mousedown’) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf(‘hid’) ==

-1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (NS6) { parentLayer = aLayer.parentNode;
while (parentLayer != null && parentLayer.style.position) {
parentL += parseInt(parentLayer.offsetLeft); parentT +=

parseInt(parentLayer.offsetTop);
parentLayer = parentLayer.parentNode;
} } else if (IE) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var

tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop)

+parentT)+MM_hTop);
if (String(tmpX)“NaN”) tmpX=0; if (String(tmpY)“NaN”) tmpY=0;
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curLeft)“NaN”) curLeft=0; if (String(curTop)“NaN”) curTop=0;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval(‘curDrag.’+((NS4)?’’:‘style.’)+‘zIndex=document.MM_maxZ+1’);
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS4&&!NS6) event.returnValue = false;
} } else if (theEvent == ‘mousemove’) {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS4) {left = newLeft; top = newTop;}
else if (NS6){style.left = newLeft; style.top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == ‘mouseup’) {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL ==‘number’ && typeof MM_targT == ‘number’ &&
(Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol)

{
if (NS4) {left = MM_targL; top = MM_targT;}
else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT;

}
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}

function loadwin(obj){
with(MM_findObj(obj))with(style){
filters[0].apply();
display=’’;
filters[0].play();
}
}
function cs(captionBG,bodyBG,tableBG){
oldBody=document.body;
with(oldBody){
var newBody=cloneNode();
style.filter=‘blendtrans(duration=1)’;
filters[0].apply();
with(document.styleSheets[0]){
with(rules[0].style){backgroundColor=captionBG;}
with(rules[1].style){backgroundColor=bodyBG;}
with(rules[2].style){backgroundColor=tableBG}
}
filters[0].play();
setTimeout(function(){
if(oldBody!=null){
oldBody.applyElement(newBody, “inside”)
oldBody.swapNode(newBody);
oldBody.removeNode(true);
}
},1500);
}
}
//–>

z-index:1;display:none;" class=“win”

onMouseDown=“MM_dragLayer(‘assist’,’’,0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,’’,false,’’)”>




SeekAssist<a href="#"

οnclick=“with(MM_findObj(‘assistwin’).style)display=display==‘none’?’’:‘none’”>%
<a href="#"

onClick=“MM_showHideLayers(‘assist’,’’,‘hide’)”>X


<td height=“100” colspan=“3”

bordercolor="#eeeeee"> 


z-index:1;display:none;" class=“win”

onMouseDown=“MM_dragLayer(‘rank’,’’,0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,’’,false,’’)”>




SeekRank<a href="#"

οnclick=“with(MM_findObj(‘rankwin’).style)display=display==‘none’?’’:‘none’”>%
<a href="#"

onClick=“MM_showHideLayers(‘assist’,’’,‘inherit’,‘rank’,’’,‘hide’)”>X


<td height=“100” colspan=“3”

bordercolor="#eeeeee"> 


z-index:1;display:none;" class=“win”

onMouseDown="MM_dragLayer(‘mycolor’,’’,0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,’’,false,’’)

“>




MyColor<a href=”#"

οnclick=“with(MM_findObj(‘mycolorwin’).style)display=display==‘none’?’’:‘none’”>%
<a href="#"

onClick=“MM_showHideLayers(‘mycolor’,’’,‘hide’)”>X


<td height=“100” colspan=“3”

bordercolor="#eeeeee">



<td

align=“center”><a href="#" οnclick=“cs(’#00CCFF’,’#f6f6f6’,’#eeeeee’)”>Default


<td

align=“center”><a href="#" οnclick=“cs(‘red’,’#eeccee’,’#eeddee’)”>StyleSheet#1


<td

align=“center”><a href="#" οnclick=“cs(’#99ccff’,’#eeeeee’,’#ccddff’)”>StyleSheet#2


<td

align=“center”><a href="#" οnclick=“cs(’#ff9999’,’#ffffff’,’#ffeeff’)”>StyleSheet#3


<td

align=“center”><a href="#" οnclick=“cs(‘skyblue’,’#eeeeee’,’#99ddff’)”>StyleSheet#4


<td

align=“center”><a href="#" οnclick=“cs(’#009900’,’#eeffee’,’#ddffdd’)”>StyleSheet#5



z-index:1;display:none;" class=“win”

onMouseDown=“MM_dragLayer(‘results’,’’,0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,’’,false,’’)”

            <table width="570" border="1" cellpadding="0" cellspacing="0">
                            <tr>
                                            <td><table width="100%" border="0" 

cellspacing=“0” cellpadding=“0”>

Results

onClick=“with(MM_findObj(‘resultswin’).style)display=display==‘none’?’’:‘none’”>%

onClick=“MM_showHideLayers(‘results’,’’,‘inherit’)”>X




<input

name=“url” type=“text” value=“http://www.google.com/search?q=ezlee” size=“100”>
<a href="#"

οnclick=“mainframe.location=url.value”>Search


<td height=“318” valign=“top”

class=“navframe”><aiframe name=“mainframe” id=“mainframe”

src=“http://www.google.com/search?q=ezlee” width=“100%” height=“100%” frameborder=“0”

scrolling=“auto”>Welcome!


Ready!


二十三 运行代码的代码

CODE:[Copy to clipboard]




<button οnclick=Preview() >运行
二十四 凹陷文字

CODE:[Copy to clipboard]

font-size:12px; line-height:18px; background-color:#eeeeee;">

怎么样,我凹下去了吧?

你不想试试吗?

www.lenvo.cn

二十五 漂亮的仿flash菜单

CODE:[Copy to clipboard]

bgcolor="#336699" align=“center”>

www.lenvo.cn
Name
Is
LeX
Rus
!!!





bgcolor="#336699" align=“center”>
My
Name
Is
LeX
Rus
!!!

二十六 自定义容器和字体大小

CODE:[Copy to clipboard]

Home
            <div id="header">
                    <h1>Browser-width defined font size</h1>
            </div>
            <div id="content">
                    <div id="rightContent">
                            <p>
                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.
                            </p>
                    </div>
                    <div id="leftContent">
                            <p>
                                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.
                            </p>

                            <p>
                                    Nulla metus. Ut sodales, tortor nec sollicitudin convallis, diam diam vulputate ligula, lobortis tincidunt urna purus at urna. Pellentesque laoreet. Nulla et dolor. Praesent vestibulum quam convallis neque. Praesent sit amet odio a dui iaculis dignissim. In vel nunc a tellus vulputate pellentesque. Maecenas bibendum. Donec mi nibh, euismod in, iaculis a, eleifend et, enim. In eget lectus vitae pede nonummy elementum. Mauris accumsan, lacus ut euismod varius, odio neque egestas quam, non aliquam velit purus et purus. Vestibulum at elit nec felis suscipit pulvinar. Suspendisse at enim quis lacus mattis condimentum. Proin arcu arcu, imperdiet vitae, aliquam non, congue id, ipsum.
                            </p>
                            <p>
                                    Aliquam eu dolor nec risus luctus faucibus. Aenean condimentum, tortor in blandit cursus, dolor magna sagittis orci, vel vehicula dolor ante at lacus. Donec vel felis in enim aliquam molestie. Sed non velit id velit pulvinar consequat. Mauris luctus. Phasellus faucibus turpis nec purus. Mauris eget ante. Donec orci enim, luctus eu, posuere at, luctus quis, pede. In in lectus. Quisque blandit, ipsum eget tincidunt scelerisque, mauris ante accumsan erat, quis congue odio erat vitae diam. Donec ut felis fermentum sem viverra pulvinar. Sed neque lorem, adipiscing ut, placerat a, ornare et, dolor. Vestibulum pretium vehicula nibh. Etiam feugiat, ligula sed pulvinar fringilla, eros arcu placerat urna, nec eleifend nisl leo sit amet urna. Suspendisse quis augue ut nibh venenatis nonummy. Nunc ut augue. In fermentum, neque eget eleifend rutrum, nulla lorem fermentum massa, eu cursus lectus mi id libero.
                            </p>
                            <p>
                                    Nam congue ligula quis magna. Vivamus porttitor nunc non dui. Aliquam posuere dapibus tortor. Quisque facilisis, quam in semper luctus, lacus dolor gravida massa, ultrices consectetuer risus arcu nec nibh. Nulla facilisi. In a eros id eros lobortis ultrices. Vivamus sit amet neque eu magna venenatis nonummy. Pellentesque consequat. Etiam ut ipsum. Nulla consectetuer est vel quam.
                            </p>
                            <p>

                                    Integer eu diam vitae augue sollicitudin congue. Praesent vulputate pede vel velit. Maecenas dapibus tempus lacus. Quisque lectus metus, pretium ac, mollis nec, dignissim quis, mi. Aliquam purus risus, pharetra eget, condimentum ut, blandit sit amet, leo. Suspendisse iaculis purus sed tellus. Nunc sem justo, porttitor ut, pretium eu, hendrerit eu, nunc. Vivamus sit amet neque in est venenatis faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus, eros id ultrices facilisis, pede ligula dignissim eros, sit amet tempus risus urna sed nibh. Sed massa eros, dapibus tristique, blandit et, molestie sed, enim. Phasellus leo. Integer vestibulum volutpat enim. Duis pulvinar ligula. Pellentesque luctus velit a justo. Quisque volutpat, diam quis varius commodo, neque elit dictum tortor, quis aliquet felis risus vitae wisi. Aliquam bibendum, elit ut gravida vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum.
                            </p>
                    </div>
                    <div class="clearer">
                    </div>
            </div>
            <div id="footer">
                    <a href="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a>

            </div>
    </div>
二十七 超级REAL视频播放器

CODE:[Copy to clipboard]
<object id=“player” name=“player” classid=“clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA”

width=“339” height=“227”>


二十八 网站论坛上面快捷键提交表单的方法

CODE:[Copy to clipboard]

CODE:[Copy to clipboard]

无标题文档
三十 新闻广告图片切换效果+描述

CODE:[Copy to clipboard]

新闻切换技术

overflow:hidden;background:url(http://tech.163.com/newimg/adpic.gif);}
.focusPic .adPic .text{float:right; padding:9px 4px 0 0; width:140px;}
.focusPic .adPic .text a{color:#1f3a87;}
.focusPic .adPic .text a:hover{color:#bc2931;}
.focusPic h2{ float:left; width:232px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}
.focusPic p{float:left; width:226px;line-height:160%; margin:0; text-align:left;padding:0 0 10px

12px;}
.focusPic p img {margin:0px 0 2px;}
.focusPic .more{ margin:0 auto; width:240px; }
.focusPic .more .textNum{float:right; margin:0 8px 0 0;padding:0 0 4px;}
.focusPic .more .textNum .text{float:left; font-weight:bold; padding:7px 6px 0 0; color:#666;}
.focusPic .more .textNum .num{float:left; width:113px; height:19px;}
.focusPic .more .textNum .bg1{ background:url(http://tech.163.com/newimg/num1.gif);}
.focusPic .more .textNum .bg2{ background:url(http://tech.163.com/newimg/num2.gif);}
.focusPic .more .textNum .bg3{ background:url(http://tech.163.com/newimg/num3.gif);}
.focusPic .more .textNum .bg4{ background:url(http://tech.163.com/newimg/num4.gif);}
.focusPic .more .textNum .num ul{ float:left; width:113px;}
.focusPic .more .textNum .num li{float:left; width:28px; font-weight:bold;display:block;

color:#fff; list-style-type:none; padding:6px 0 0;}
.focusPic .more .textNum .num li a{color:#fff; padding:0 5px; }
.focusPic .more .textNum .num li a:visited{color:#fff;}
.focusPic .more .textNum .num li a:hover{color:#ff0;}

–>

src=“http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg” alt=“网易学院05年软件评选结果”

width=“240” height=“180” border=“0” />

网易学院05年软件评选结果

经过大家的热情投票和我们的辛劳整理,网易学院2005年年度软件评选结果终于出炉啦。点击进入查看…

详细 <a

href=“http://tech.163.com/special/000915SN/soft2005.html” class=“cDRed”>详细

src=“http://cimg.163.com/tech/2006/1/17/200601171557008cee7.jpg” alt=“颠覆丛林动物生存法则”

width=“240” height=“180” border=“0” />

颠覆丛林动物生存法则

群居动物的这种行为颠覆了我们通常认为的,在动物世界通行的 “丛林法则”,动物不都自私,不都是

弱肉强食的。详细 <a

href=“http://tech.163.com/discover/” class=“cDRed”>详细

src=“http://cimg.163.com/tech/2006/1/17/2006011711483290a60.jpg” alt=“WAPI并非贸易阴谋”

width=“240” height=“180” border=“0” />

WAPI并非贸易阴谋

近日国家做出决定:“将向其他的国内及国外企业公布该算法”。事实证明中国WAPI标准并非是贸易阴谋

详细 <a

href=“http://tech.163.com/special/00091MNJ/itobserve015.html” class=“cDRed”>详细

src=“http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg” alt="新视野号探测冥王星特别专题

" width=“240” height=“180” border=“0” />

新视野号探测冥王星特别专题

美国宇航局将于北京时间18日凌晨2时24分发射新视野号探测器,造访这颗人类唯一尚未探测过的行星-冥

王星。详细 <a

href=“http://tech.163.com/special/00091OSI/horizons.html” class=“cDRed”>详细

> 更多头图新闻
三十一 菜单特效

CODE:[Copy to clipboard]

New Page 28

function MM_displayStatusMsg(msgStr) {

status=msgStr;

document.MM_returnValue = true;

}

function highlight(x){

document.forms[x].elements[0].focus()

document.forms[x].elements[0].select()

}

function MM_jumpMenu(targ,selObj,restore){

eval(targ+".location=’"+selObj.options[selObj.selectedIndex].value+"’");

if (restore) selObj.selectedIndex=0;

}

var NS

IE=document.all;

NS=document.layers;

hdrFontFamily=“Verdana”;

hdrFontSize=“2”;

hdrFontColor=“white”;

hdrBGColor="#CCCCCC";

linkFontFamily=“Verdana”;

linkFontSize=“2”;

linkBGColor=“white”;

linkOverBGColor="#CCCCCC";

linkTarget="_top";

YOffset=60;

staticYOffset=20;

menuBGColor="#CCCCCC";

menuIsStatic=“no”;

menuHeader=“Main Index”

menuWidth=150; // Must be a multiple of 5!

staticMode=“advanced”

barBGColor="#C0C0C0";

barFontFamily=“Verdana”;

barFontSize=“2”;

barFontColor=“white”;

barText=“MENU”;

function moveOut() {

if (window.cancel) {

cancel="";

}

if (window.moving2) {

clearTimeout(moving2);

moving2="";

}

if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {

if (IE) {ssm2.style.pixelLeft += (5%menuWidth);

}

if (NS) {

document.ssm2.left += (5%menuWidth);

}

moving1 = setTimeout(‘moveOut()’, 5)

}

else {

clearTimeout(moving1)

}

};

function moveBack() {

cancel = moveBack1()

}

function moveBack1() {

if (window.moving1) {

clearTimeout(moving1)

}

if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {

if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);

}

if (NS) {

document.ssm2.left -= (5%menuWidth);

}

moving2 = setTimeout(‘moveBack1()’, 5)}

else {

clearTimeout(moving2)

}

};

lastY = 0;

function makeStatic(mode) {

if (IE) {winY = document.body.scrollTop;var NM=ssm2.style

}

if (NS) {winY = window.pageYOffset;var NM=document.ssm2

}

if (mode==“smooth”) {

if ((IE||NS) && winY!=lastY) {

smooth = .2 * (winY - lastY);

if(smooth > 0) smooth = Math.ceil(smooth);

else smooth = Math.floor(smooth);

if (IE) NM.pixelTop+=smooth;

if (NS) NM.top+=smooth;

lastY = lastY+smooth;

}

setTimeout(‘makeStatic(“smooth”)’, 1)

}

else if (mode==“advanced”) {

if ((IE||NS) && winY>YOffset-staticYOffset) {

if (IE) {NM.pixelTop=winY+staticYOffset

}

if (NS) {NM.top=winY+staticYOffset

}

}

else {

if (IE) {NM.pixelTop=YOffset

}

if (NS) {NM.top=YOffset-7

}

}

setTimeout(‘makeStatic(“advanced”)’, 1)

}

}

function init() {

if (IE) {

ssm2.style.pixelLeft = -menuWidth;

ssm2.style.visibility = “visible”

}

else if (NS) {

document.ssm2.left = -menuWidth;

document.ssm2.visibility = “show”

}

else {

alert(‘Choose either the “smooth” or “advanced” static modes!’)

}

}

function MM_displayStatusMsg(msgStr) {

status=msgStr;

document.MM_returnValue = true;

}

三十二 采用CSS和JS的下拉菜单

CODE:[Copy to clipboard]

nav

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById(“nav”);
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName==“LI”) {
node.οnmοuseοver=function() {
this.className+=" over";
}
node.οnmοuseοut=function() {
this.className=this.className.replace(" over", “”);
}
}
}
}
}
window.οnlοad=startList;

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

自己写的一个网页开发常用效果库与框架库,可以自定义导出自己想要的部分。 1.通过帮助文档help.html查看所有效果与使用方法。 2.通过config.html配置符合你需要并导出js; 内容包含如下: A:效果库类; 1.事件-同时兼容手机与pc的3种事件(start、move、end); 2.tab选项卡-各种切换6种; 3.电商产品主图-横向与纵向2种; 4.放大镜-电商主图放大镜、图库鼠标悬停旁边出现放大版图效果各一个; 5.跑马灯-文字或图片不断档可支持鼠标悬停时停止; 6.仿alert弹窗-可以自定义样式,手机版pc版个一种; 7.列表下拉加载更多-伪数据加载与ajax异步加载个一种; 8.折叠菜单一个; 9.banner图效果-7种包含手机上支持手指滑动的; 10.时间轴-控制1种; 11.自定义滚动条-横向、纵向各一种; 12.临时禁用滚动条-禁用与启用方法各一个,也能禁用手机滚动条,同时解决px滚动条占用宽度问题。 13.图表等比例-使图片始终保持设定比例缩放等供3种不同形式; 14.回到顶部-点击回到浏览器顶部; 15.漂浮窗-小漂浮窗广告; 16.图集展示-偶尔能用到; 17.滚屏效果-手指上下滑动或鼠标滚轮滚动切换页面,可自己配一些动效!!!!!!; 18.常用表单验证; 19.左滑删除; 20.复选框全选与取消选中; 21.内容拖动!!!!!!; 22.dom输入; 23.单例定时器; 24.ios软键盘弹出fixed定位问题处理!!!!!!; B:架构类; 1.流程控制-主要解决多个ajax调用依赖问题; 2.面向对象的class方法-方便定义类与集成类; 3.require-实现模块化开发,简单实用; 提示:用!!!!!!标注结尾的在某些场景下可能出现bug;
©️2021 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值