JS – 九创科技 https://www.3code.cn Wordpress外贸企业主题, Wp企业主题, wordpress企业主题, wordpress主题定制, WORDPRESS外贸网站建设SEO Fri, 28 Oct 2011 15:15:01 +0000 zh-Hans hourly 1 鼠标经过图片变暗的js兼容IE FIREFOX https://www.3code.cn/%e9%bc%a0%e6%a0%87%e7%bb%8f%e8%bf%87%e5%9b%be%e7%89%87%e5%8f%98%e6%9a%97%e7%9a%84js%e5%85%bc%e5%ae%b9ie-firefox/ Fri, 28 Oct 2011 15:15:01 +0000 https://www.3code.cn/?p=2884 js部分：

function dentro(valor) {
valor.style[‘opacity’] = 60 / 100;
valor.style[‘-moz-opacity’] = 60 / 100;
valor.filters.alpha[‘opacity’] = 60;
}
function fuera(valor) {
valor.style[‘opacity’] = 100 / 100;
valor.style[‘-moz-opacity’] = 100 / 100;
valor.filters.alpha[‘opacity’] = 100;
}

网页部分：

<img src=”” alt=”Muestra” border=”0″ style=”filter: Alpha(opacity = 100)” onmouseout=”fuera(this)” onmouseover=”dentro(this)”/>

]]> JS图片左右无缝隙滚动(兼容IE,Firefox 遵循W3C标准) https://www.3code.cn/js%e5%9b%be%e7%89%87%e5%b7%a6%e5%8f%b3%e6%97%a0%e7%bc%9d%e9%9a%99%e6%bb%9a%e5%8a%a8%e5%85%bc%e5%ae%b9iefirefox-%e9%81%b5%e5%be%aaw3c%e6%a0%87%e5%87%86/ Tue, 24 May 2011 02:36:54 +0000 https://www.3code.cn/?p=2680 **兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)
**实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，
**因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

<!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 id=”Head1″ runat=”server”>
<title></title>
</head>
<body>
<img src=”link.gif” style=”cursor: pointer” onmouseover=”clearright();toleft()” />
<img src=”link1.gif” style=”cursor: pointer” onmouseover=”clearleft();toright()” />
<div>
<div id=”demo” style=”overflow: hidden; width: 322px; height: 61px”>
<table cellpadding=”0″ align=”left” border=”0″ cellspace=”0″>
<tbody>
<tr>
<td id=”demo1″ valign=”top”>
<table cellspacing=”0″ cellpadding=”0″ width=”322″ bgcolor=”#fffbf7″ border=”0″>
<tbody>
<tr align=”center”>
<td width=”50″ height=”50″>
<img height=”50″ src=”link.gif” />
</td>
<td width=”50″ height=”50″>
<img height=”50″ src=”link1.gif” />
</td>
<td width=”50″ height=”50″>
<img height=”50″ src=”link2.gif” />
</td>
<td width=”50″ height=”50″>
<img height=”50″ src=”link.gif” />
</td>
<td width=”50″ height=”50″>
<img height=”50″ src=”link3.gif” />
</td>
</tr>
</tbody>
</table>
</td>
<td id=”demo2″ valign=”top”>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div id=”demo_a” style=”overflow: hidden; width: 322px; height: 61px”>
<table cellpadding=”0″ align=”left” border=”0″ cellspace=”0″>
<tbody>
<tr>
<td id=”demo_b” valign=”top”>
<table cellspacing=”0″ cellpadding=”0″ width=”322″ bgcolor=”#fffbf7″ border=”0″>
<tbody>
<tr align=”center”>
<td width=”50″ height=”50″>
<img height=”50″ src=”link.gif” />
</td>
<td width=”50″ height=”50″>
<img height=”50″ src=”link1.gif” />
</td>
<td width=”50″ height=”50″>
<img height=”50″ src=”link2.gif” />
</td>
<td width=”50″ height=”50″>
<img height=”50″ src=”link.gif” />
</td>
<td width=”50″ height=”50″>
<img height=”50″ src=”link3.gif” />
</td>
</tr>
</tbody>
</table>
</td>
<td id=”demo_c” valign=”top”>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type=”text/javascript”>
/*
**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)
**
**实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，
**因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
*/
var speed1=0    //图片左移的速度
var MyMar1    //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var MyMar2    //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
var lefthit=0        //记录左移按钮点击次数
var righthit=0    ////记录右移按钮点击次数
//调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用）
function clearleft(){
clearInterval(MyMar1)
clearInterval(MyMar2)
}
//图片左移的方法
function toleft(){
//判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0）
if(lefthit==0){
speed1=30;//图片左移速度时间毫秒
//让的内容demo2与demo1内容一样
document.getElementById(“demo2”).innerHTML=document.getElementById(“demo1”).innerHTML
//上行图片移动的方法
function Marquee1(){
//当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等
if(document.getElementById(“demo2”).offsetWidth-document.getElementById(“demo”).scrollLeft<=0){
//demo跳回初始位置
document.getElementById(“demo”).scrollLeft-=document.getElementById(“demo1”).offsetWidth
}
else{
//demo开始重新移动
document.getElementById(“demo”).scrollLeft++
}
}
//setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID
MyMar1=setInterval(Marquee1,speed1)
//当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止
document.getElementById(“demo”).onmouseover=function()
{clearInterval(MyMar1);clearInterval(MyMar2)}
//当鼠标移除demo时,重新setInterval让方法执行，这样图片会继续移动
document.getElementById(“demo”).onmouseout=function()
{MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)}
//下面的方法与上面的方法一样，用于第二行的图片向左移动
document.getElementById(“demo_c”).innerHTML=document.getElementById(“demo_b”).innerHTML
function Marquee2(){
if(document.getElementById(“demo_c”).offsetWidth-document.getElementById(“demo_a”).scrollLeft<=0){
document.getElementById(“demo_a”).scrollLeft-=document.getElementById(“demo_b”).offsetWidth}
else{
document.getElementById(“demo_a”).scrollLeft++
}
}
MyMar2=setInterval(Marquee2,speed1)
document.getElementById(“demo_a”).onmouseover=function()
{clearInterval(MyMar2);clearInterval(MyMar1)}
document.getElementById(“demo_a”).onmouseout=function()
{MyMar2=setInterval(Marquee2,speed1); document.getElementById(“demo”).onmouseout()}
lefthit=1        //设置左移按钮，当按了一次左移后(不管按多少次)，在没按右移按钮之前，toleft方法里的的代码不会再被执行
righthit=0    //把右移按钮设为0,这样当下次点了右移按钮的时候，以便toright方法被调用
}
}

var MyMar3    //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var MyMar4    //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
var speed2=0    //图片右移的速度
//调用移左方法前,先让右移停止（clearInterval清除setInterval对方法的调用）
function clearright(){
clearInterval(MyMar3)
clearInterval(MyMar4)
}

//图片右移方法(与图片左移方法思路一样)
function toright(){
//判断是否是第一次按下右移按钮（图片往右开始移动的时候，不会在调用此方法。只有当按了左移按钮时，才会把righthit重设为0）
if(righthit==0){
speed2=30;
document.getElementById(“demo2”).innerHTML=document.getElementById(“demo1”).innerHTML
function Marquee_a(){
if(document.getElementById(“demo”).scrollLeft<=0){
document.getElementById(“demo”).scrollLeft=document.getElementById(“demo2”).offsetWidth
}
else{
document.getElementById(“demo”).scrollLeft–
}
}
MyMar3=setInterval(Marquee_a,speed2)
document.getElementById(“demo”).onmouseover=function()
{clearInterval(MyMar3);document.getElementById(“demo_a”).onmouseover()}
document.getElementById(“demo”).onmouseout=function()
{MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}

document.getElementById(“demo_c”).innerHTML=document.getElementById(“demo_b”).innerHTML
function Marquee_b(){
if(document.getElementById(“demo_a”).scrollLeft<=0){
document.getElementById(“demo_a”).scrollLeft=document.getElementById(“demo_c”).offsetWidth
}
else{
document.getElementById(“demo_a”).scrollLeft–
}
}
MyMar4=setInterval(Marquee_b,speed2)
document.getElementById(“demo_a”).onmouseover=function()
{clearInterval(MyMar4);clearInterval(MyMar3)}
document.getElementById(“demo_a”).onmouseout=function()
{MyMar4=setInterval(Marquee_b,speed2);document.getElementById(“demo”).onmouseout()}
righthit=1    //设置右移按钮，当按了一次右移按钮后(不管按多少次)，在没按左移按钮之前，toright方法里的的代码不会再被执行
lefthit=0    //把左移按钮设为0,这样当下次点了左移按钮的时候，以便toleft方法被调用
}
}
</script>
</body>
</html>

]]> JS网页打印大全 https://www.3code.cn/js%e7%bd%91%e9%a1%b5%e6%89%93%e5%8d%b0%e5%a4%a7%e5%85%a8/ Tue, 03 May 2011 08:33:07 +0000 https://www.3code.cn/?p=2544 Javascript网页打印大全

导读：因贴子较长，特弄个导读出来，有兴趣的研究。
该贴含有如下内容：

普通打印（整页打） 打印网页内部分内容（自定义） 打印去掉/添加页眉页脚 使用外部控件/方法实现多功能打印 打印背景

以上为代码控制

设置“页面设置”实现打印参数设置（Window系统图文版）

一、普通打印（整页打）
这个不用多说，直接用

二、打印网页内部分内容（自定义）

分三种方法实现
1、用css控制

.a {display:block}
.b {display:hidden}

把你不想打印的部分class设为b
首先在网页中添加：

VIEWASTEXT>
</OBJECT>

然后就可以依次加入功能按钮了：

<input type=”button” value=”页面设置”>
<input type=”button” value=”打印预览”> <INPUT type=”button” value=”关闭窗口” >

将这两块东西放到<center></center>就不会打印这些按钮了。当然要定义noprint了：
<style media=”print”>.Noprint { DISPLAY: none }</style>只要把不想打印的东西的css设置成noprint就可以了。
现在就实现了基本的web打印，需要注意的情况如下：
a. 必须将ie的internet选项的安全设置中对于没有标记为安全的ActiveX控件进行…设置成提示或者启用，否则会报错，导致不可用。
b. 如果在vs.net编辑环境下编辑该页面，它经常自动的给object添加多余的参数，有了这些东西，打印就会出错，所以要记得最后保存的时候删除它们。

2、用javascript打印固定标签内的内容
a、在页面的代码头部处加入JavaScript：

function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr=”<!–startprint–>”;
eprnstr=”<!–endprint–>”;
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>

b、在页面正文处加上<!–startprint–>与<!–endprint–>标识。
也就是在需要用户打印保存的正文所对应的html处附加上。同时，如果采用小偷程序获得远程数据并需打印，可将此等数据置于该定义标签之内即可。
c、截取内容部分已完成，现在加个“打印”的链接：
<a href=”javas

cript:;” >打印</a>

3、windows自带功能
按住鼠标的左键，将你想要打印的内容选定，然后单击右键选择“打印”，在弹出的打印对话框中的“页面范围”中选择“选定范围”就可以只打印你选择的内容了。

（三）打印去掉/添加页眉页脚

cript >

var hkey_root,hkey_path,hkey_key
hkey_root=”HKEY_CURRENT_USER”
hkey_path=”\\Software\\Microsoft\\Internet Explorer\\PageSetup\\”
//设置网页打印的页眉页脚为空
function pagesetup_null(){
try{
var RegWsh = new ActiveXObject(“WScript.Shell”)
hkey_key=”header”
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,””)
hkey_key=”footer”
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,””)
}catch(e){}
}
//设置网页打印的页眉页脚为默认值
function pagesetup_default(){
try{
var RegWsh = new ActiveXObject(“WScript.Shell”)
hkey_key=”header”
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,”&w&b页码，&p/&P”)hkey_key=”footer”
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,”&u&b&d”)
}catch(e){}
}
</script>
<input type=”button” value=”清空页码” onclick=pagesetup_null()>
<input type=”button” value=”恢复页码” onclick=pagesetup_default()>

复制出去，看下效果就可以了

（四）使用外部控件/方法实现多功能打印

1、IEWebBrowser组件

介绍
http://support.microsoft.com/default.aspx?scid=kb%3BEN-US%3BQ267240#top
http://support.microsoft.com/kb/q247671/#appliesto

代码

” height=”0″><input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开>
<input name=Button onClick=document.all.WebBrowser.ExecWB(2,1) type=button value=关闭所有>
<input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为>
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印>
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印>
<input name=Button onClick=document.all.WebBrowser.ExecWB(7,1) type=button value=打印预览>
<input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置>
<input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性>
<input name=Button onClick=document.all.WebBrowser.ExecWB(17,1) type=button value=全选>
<input name=Button onClick=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新>
<input name=Button onClick=document.all.WebBrowser.ExecWB(45,1) type=button value=关闭>

2、使用ScriptX.cab控件


1．下载ScriptX.cab控件

官网http://www.meadroid.com/scriptx/index.asp

2．使用object元素，修改codebase，classid的值

这里调用控件ScriptX.cab

代码

引用:
<OBJECT style=”DISPLAY: none” codeBase=”${rootUrl}js/smsx.cab#VVersion=6,3,435,20″ classid=”clsid:1663ed61-23eb-11d2-b92f-008048fdd814″ viewastext></OBJECT>


这段代码用来加载cab文件，clsid和codebase必须要和你下载的cab中的信息对应，否则组件会加载错误，这两项其实不难找，只要你用winrar打开你下载的cab文件，然后找到扩展名是.inf的文件，然后打开之，就能看到了。

3．调用控件脚本

Print.js文件
代码

引用:

function setPrintBase(headerText,footerText,rootUrl) {

// — advanced features ，未曾使用过，有待确认。

//factory.printing.SetMarginMeasure(2); // measure margins in inches

//factory.SetPageRange(false, 1, 3);// need pages from 1 to 3

//factory.printing.printer = “HP DeskJet 870C”;

//factory.printing.copies = 2;

//factory.printing.collate = true;

//factory.printing.paperSize = “A4”;

//factory.printing.paperSource = “Manual feed”

var header = (headerText==null||headerText==””)?’默认页眉’:headerText;

var footer = (footerText==null||footerText==””)?’默认页角’:footerText;

factory.printing.header = “&b”+header+”&b” ;

factory.printing.footer = “&b”+footer;

factory.printing.portrait = true;

factory.printing.leftMargin =10.00;

factory.printing.topMargin =10.00;

factory.printing.rightMargin =10.00;

factory.printing.bottomMargin =10.00;

}



例子

<head>
<meta http-equiv=”imagetoolbar” c>
<script language=”javascript” src=”print.js”></script>
<style media=”print”>
.Noprint {DISPLAY: none;}
</style>
<title>打印测试</title>
</head>
<OBJECT id=”factory” style=”DISPLAY: none” codeBase=”smsx.cab#VVersion=6,3,435,20″ classid=”clsid:1663ed61-23eb-11d2-b92f-008048fdd814″ viewastext></OBJECT>

<script defer>
function window.onload() {
setPrintBase(‘页眉’,’页脚’);
}
</script>
<body topmargin=”0″ leftmargin=”0″ rightmargin=”0″ bottommargin=”0″ marginwidth=”0″ marginheight=”0″>
<center>
<input type=button value=”打印” >
<input type=button value=”页面设置” >
<input type=button value=”打印预览” >
<input type=”button” value=”关闭” >
</center>
<center>
<table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr><td align=”center”><b>内容</b></td></tr>
</table>
</center>
</body>
</html>

（五）打印背景
默认情况下，使用IE浏览器打印网页时，不打印网页背景。如果需要打印网页背景，可以采用如下的方法设置：
1. 启动IE浏览器。
2. 选择【工具】菜单中的【Internet选项】菜单项，打开【Internet选项】对话框。
3. 打开【高级】选项卡，在【打印】选区中选择【打印背景颜色和图像】复选框。
4. 单击【确定】按钮，关闭对话框。

（六）如何用IE打印网页

Internet Explorer（简称IE）5.0以上版本强大的打印及打印预览功能。本文就向大家介绍如何用IE来打印网页。（谁？谁？谁在扔西红柿？下面一片嘘声： 这还用得着你讲呀？！）咳咳咳，是的是的，在IE中打印网页实在是太简单不过了。只需点一下工具栏上“打印”按钮就可将当前网页打印出来。如下图所示：
cript网页打印大全 – 心雨 – 心雨” height=100 alt=”Javascript网页打印大全 – 心雨 – 心雨” src=”http://cqzx.sdedu.net/sdms/images/guide1.JPG” width=600 border=0>

不 过，你这样打出来的效果怎么样呢？我就不敢说了。我今天要和大家讲的就是一些打印方面的设置参数。如何大家把这些参数设置好，你就会发现IE的打印功能 快追得上Word了。今后你打印网页时就可以想怎么打就怎么打了。好，闲话少说，现在就跟我来一起看看怎么样设置IE的打印参数。
我们以下图要打印的学生名单（《学生学籍管理系统MX》查询结果网页）为例，讲解如何设置这些打印参数：
cript网页打印大全 – 心雨 – 心雨” height=298 alt=”Javascript网页打印大全 – 心雨 – 心雨” src=”http://cqzx.sdedu.net/sdms/images/guide2.JPG” width=400 border=0>

假如我们直接点工具栏的“打印”按钮或点“文件”菜单中的“打印”进行打印这个网页的话，就会打印出很多不必要的信息。所以在打印前我们应先用IE5新增的“打印预览”功能查看当前网页的实际打印效果。如下图所示：

cript网页打印大全 – 心雨 – 心雨” height=254 alt=”Javascript网页打印大全 – 心雨 – 心雨” src=”http://cqzx.sdedu.net/sdms/images/guide3.JPG” width=600 border=0>

在如下图所示的“打印预览”对话框中，我们可以看到，网页标题、网页的URL地址及打印日期等我们所不需要的信息也被打印出来了。而页码又在右上角，能不能把它移到其他位置（如我们常见的右下角）呢？

cript网页打印大全 – 心雨 – 心雨” height=274 alt=”Javascript网页打印大全 – 心雨 – 心雨” src=”http://cqzx.sdedu.net/sdms/images/guide4.JPG” width=600 border=0>
cript网页打印大全 – 心雨 – 心雨” height=274 alt=”Javascript网页打印大全 – 心雨 – 心雨” src=”http://cqzx.sdedu.net/sdms/images/guide5.JPG” width=600 border=0>

能不能按照我们所想要的样式来打印网页呢？当然可以。一切就在“页面设置”中。

cript网页打印大全 – 心雨 – 心雨” height=255 alt=”Javascript网页打印大全 – 心雨 – 心雨” src=”http://cqzx.sdedu.net/sdms/images/guide6.JPG” width=600 border=0>

弹出如下图所示的“页面设置”对话框，所有的秘密都在这里！

cript网页打印大全 – 心雨 – 心雨” height=382 alt=”Javascript网页打印大全 – 心雨 – 心雨” src=”http://cqzx.sdedu.net/sdms/images/guide7.JPG” width=393 border=0>

原 来，IE自动给我们在页眉和页脚处加上了这些不必要的打印信息。如果我们不想要任何页眉和页脚的话，直接删除它们就行了。：-）大部分时候我都是这样做 的。但如果你想自定义页眉和页脚的时候，该怎么做呢？上面的那些“&w&b&p”等等究竟表示什么意思呀？给你个表格就知道了。 符号含义

&w 网页标题
&u 网页地址 (URL)
&d 短日期格式（由“控制面板”中的“区域设置”指定）
&D 长日期格式（由“控制面板”中的“区域设置”指定）
&t 由“控制面板”中的“区域设置”指定的时间格式
&T 24 小时时间格式
&p 当前页码
&P 总页数
&b 文本右对齐（请把要右对齐的文字放在“&b”之后）
&b&b 文字居中（请把要居中的文字放在“&b”和“&b” 之间）
&& 单个 & 号 (&)

注：1、这些符号可以与文字组合使用，如本教程中的“页码，&p/&P”。
2、页眉和页脚默认是左对齐的，所以IE只提供了右对齐和居中的设置符号。
3、推荐给大家一种设置方法：页眉为空，页脚设为“&b第 &p 页 / 共 &P 页&b”，打印效果为在页脚居中显示“第 1 页 / 共 4 页”的效果。
知 道了上面的知识，你就可以打印了。但有时你会发现，网页中的一些图像在打印时不见了。Why？为什么会这样？别着急，IE的默认设置是不打印网页的背景 颜色和图像的。您只需进入IE的Internet选项将它选中（打上勾）就行了。具体操作方法是：点IE的主菜单中的“工具”——“Internet选 项”——再在弹出的对话框中占击“高级”选项卡，找到“打印背景颜色和图像”一项。如下图所示：

cript网页打印大全 – 心雨 – 心雨” height=369 alt=”Javascript网页打印大全 – 心雨 – 心雨” src=”http://cqzx.sdedu.net/sdms/images/guide8.JPG” width=350 border=0>

然后将上图中红色圈住的选项打上勾，再点“确定”就OK了。

至此，我们就完成了对IE的打印设置。接下来，只要我们没有关闭IE，我们就可以一直使用上述设置（最后一项“打印背景颜色和图像”的更改始终有效）进行打印。打印前一般先进行打印预览，效果满意后再开始打印。

 

 

 

自己曾经用过的打印

JS 实现简单的页面局部打印
function preview(oper)
{
if (oper < 10)
{
bdhtml=window.document.body.innerHTML;//获取当前页的html代码
sprnstr=”<!–startprint”+oper+”–>”;//设置打印开始区域
eprnstr=”<!–endprint”+oper+”–>”;//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
} else {
window.print();
}
}

使用很简单 将页面内要打印的内容加入中间<!–startprint1–>XXXXX<!–endprint1–>
再加个打印按纽 onclick=preview(1)

]]> JS实现的DIV模拟滚动条(支持IE6,7,8/FF) https://www.3code.cn/js%e5%ae%9e%e7%8e%b0%e7%9a%84div%e6%a8%a1%e6%8b%9f%e6%bb%9a%e5%8a%a8%e6%9d%a1%e6%94%af%e6%8c%81ie678ff/ Thu, 17 Feb 2011 08:22:14 +0000 https://www.3code.cn/?p=2510 最近老看浏览器的滚动条不顺眼,设置滚动条样式也只是IE的特有属性.抽了点时间用JS写了个模拟滚动条.IE下支持滚轮滚动,FF下暂时只能用鼠标拖动.说完废话,下面看代码吧~

<!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>–</title>
<style>
/*主窗*/
#Scroll{width:200px;height:400px;background:#f8f8f8}
/*左边内容区*/
#ScroLeft{float:left;height:100%;width:190px;overflow:hidden}
/*滚动条背景*/
#ScroRight{position:relative;float:right;height:100%;width:10px;background:#F1F1F1;overflow:hidden;}
/*滚动条*/
#ScroLine{position:absolute;z-index:1;top:0px;left:0px;width:100%;height:20px;overflow:hidden;background:#666666}
</style>
</head>
<script>
var Scrolling=false;
function $(o){return document.getElementById(o)}
function ScroMove(){Scrolling=true}
document.onmousemove=function(e){if(Scrolling==false)return;ScroNow(e)}
document.onmouseup=function(e){Scrolling=false}
function ScroNow(event){
var event=event?event:(window.event?window.event:null);
var Y=event.clientY-$(“Scroll”).getBoundingClientRect().top-$(“ScroLine”).clientHeight/2;
var H=$(“ScroRight”).clientHeight-$(“ScroLine”).clientHeight;
var SH=Y/H*($(“ScroLeft”).scrollHeight-$(“ScroLeft”).clientHeight);
if (Y<0)Y=0;if (Y>H)Y=H;
$(“ScroLine”).style.top=Y+”px”;
$(“ScroLeft”).scrollTop=SH;
}
function ScrollWheel(){
var Y=$(“ScroLeft”).scrollTop;
var H=$(“ScroLeft”).scrollHeight-$(“ScroLeft”).clientHeight;
if (event.wheelDelta >=120){Y=Y-80}else{Y=Y+80}
if(Y<0)Y=0;if(Y>H)Y=H;
$(“ScroLeft”).scrollTop=Y;
var SH=Y/H*$(“ScroRight”).clientHeight-$(“ScroLine”).clientHeight;
if(SH<0)SH=0;
$(“ScroLine”).style.top=SH+”px”;
}
</script>
<body>
<div id=”Scroll” onselectstart=”return false” onmousewheel=”ScrollWheel()”><div id=”ScroLeft”>

内容1111<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容5555<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容0000<br>

</div><div id=”ScroRight” onclick=”ScroNow(event)”><div id=”ScroLine” OnMouseDown=”ScroMove()”></div></div></div>

]]> jQuery弹出窗口插件Facebox https://www.3code.cn/jquery%e5%bc%b9%e5%87%ba%e7%aa%97%e5%8f%a3%e6%8f%92%e4%bb%b6facebox/ Fri, 28 Jan 2011 05:31:33 +0000 https://www.3code.cn/?p=2445 facebox是一个jquery为基础的lightbox，可显示图像， divs ，或者远程页面。 它的使用简单，容易。

首先我们用Facebox观看图片 ：
<a href=”cssrain.jpg” rel=”facebox”>text</a>
仅仅这样就OK。

然后我们在来看 用Facebox观看div  ：
<a href=”#info” rel=”facebox”>text</a>
ok,就这样就能简单的实现facebox了。

当然在ajax横行的时代，ajax远程加载页面也是必不可少的。
我们用Facebox加载远程的页面内容：
<a href=”cssrain.html” rel=”facebox”>text</a>
OK，这样就能远程加载 cssrain.html 的内容，以facebox的方式显示了。

用法：
facebox应该导入
<script src=”jquery.js” type=”text/javascript”></script>
<link href=”/facebox/facebox.css” _fcksavedurl=””/facebox/facebox.css”” media=”screen” rel=”stylesheet” type=”text/css”/>
<script src=”/facebox/facebox.js” type=”text/javascript”></script>
jQuery(document).ready(function($) {
//超链接的rel属性是否具有facebox
  $(‘a[rel*=facebox]’).facebox()
})

本站下载：https://www.3code.cn/download/facebox.zip

]]> 让IE6支持PNG透明的方法 https://www.3code.cn/%e8%ae%a9ie6%e6%94%af%e6%8c%81png%e9%80%8f%e6%98%8e%e7%9a%84%e6%96%b9%e6%b3%95/ Thu, 02 Dec 2010 02:19:19 +0000 https://www.3code.cn/?p=2312 一个老外写的支持png图片的透明，背景定位。全搞定！！！！
DD_belatedPNG_0.0.8a-min.js
用法
<!–[if lte IE 6]>
<script src=”DD_belatedPNG_0.0.8a.js” type=”text/javascript”></script>
    <script type=”text/javascript”>
        DD_belatedPNG.fix(‘div, ul, img, li, input , a’);
    </script>
<![endif]–>
fix处是你需要进行透明化的标签，或者类都可以！！
这是js的下载地址
http://www.028guzheng.com/793395_16370305896/DD_belatedPNG_0.0.8a.js

]]> 容错脚本,不显示js错误 https://www.3code.cn/js-error/ Sat, 06 Nov 2010 13:24:14 +0000 https://www.3code.cn/?p=2233 用IE浏览器的时候总会在左下角出现”网页上有错误”…. 双击这个黄色的感叹号,出现”该网页上的问题可能使其无法正常显示或功能不正常.以后,双击显示在状态中的警告图标,就可以显示上述信息”.点击”显示详细信息”就会看到网页上的某个地方错误:”缺少对象”之类的话…  出现这个,很难看…别人来浏览的时候,可能会认为你的网站有病毒…. 所以必须消除这个提示…那就得查找代码的错误了… 在查找到错误之前…可以使用js容错代码…把这个错误提示功能给去掉….代码如下:

<script type=”text/javascript”><!–
function killErrors() {
return true;
}
window.onerror = killErrors;
// –></script>
<script type=”text/javascript”><!–
function killErrors() {
return true;
}
window.onerror = killErrors;
// –></script>

]]> js文字间隔停顿向上滚动效果(IE-FIREFOX) https://www.3code.cn/js%e6%96%87%e5%ad%97%e9%97%b4%e9%9a%94%e5%81%9c%e9%a1%bf%e5%90%91%e4%b8%8a%e6%bb%9a%e5%8a%a8%e6%95%88%e6%9e%9cie-firefox/ Tue, 02 Nov 2010 16:45:59 +0000 https://www.3code.cn/?p=2210 <script>
var marqueeContent=new Array(); //滚动新闻
marqueeContent[0]='<font color=”#0000CC”>14:25 </font><a href=https://www.3code.cn target=_blank>本站精心制作的多款WORDPRESS外贸企业主题,</a><br>’;
marqueeContent[1]='<font color=”#0000CC”>14:25 </font><a href=https://www.3code.cn target=_blank>看过后，相信大家会有眼光，它就是你需要的！</a><br>’;
marqueeContent[2]='<font color=”#0000CC”>14:25 </font><a href=https://www.3code.cn target=_blank>这几款WORDPRESS主题的主要亮点：极好的SEO优化，欧美风格，超低价格</a><br>’;
marqueeContent[3]='<font color=”#0000CC”>14:25 </font><a href=https://www.3code.cn target=_blank>快速解决外贸网站建设！买了后你会感到绝对超值（注意不是物有所值，是超值）！ 需要的朋友们请不要犹豫：QQ（137104321）</a><br>’;
var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
//接下来的是定义一些要使用到的函数
function initMarquee() {
var str=marqueeContent[0];
document.write(‘<div id=marqueeBox style=”overflow:hidden;height:’+marqueeHeight+’px” onmouseover=”clearInterval(marqueeInterval[0])” onmouseout=”marqueeInterval[0]=setInterval(\’startMarquee()\’,marqueeDelay)”><div>’+str+'</div></div>’);
marqueeId++;
marqueeInterval[0]=setInterval(“startMarquee()”,marqueeDelay);
}
function startMarquee() {
var str=marqueeContent[marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
if(marqueeBox.childNodes.length==1) {
var nextLine=document.createElement(‘DIV’);
nextLine.innerHTML=str;
marqueeBox.appendChild(nextLine);
}
else {
marqueeBox.childNodes[0].innerHTML=str;
marqueeBox.appendChild(marqueeBox.childNodes[0]);
marqueeBox.scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval(“scrollMarquee()”,20);
}
function scrollMarquee() {
marqueeBox.scrollTop++;
if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script>

]]> 贴一段jquery代码 https://www.3code.cn/jquery-code/ Thu, 10 Jun 2010 05:00:42 +0000 https://www.3code.cn/?p=1662 <script type=”text/javascript”>
$(document).ready(function() {
$(“#pages”).change(function(){
page = $(“#pages”).val();
start_time = $(“#starttime”).val();
end_time   = $(“#endtime”).val();
getls = $(“#leadstatus”).val();

$(“#loading”).attr(“style”,”display:none; textalign:center; position:absolute;background-color:#000; filter:alpha(opacity=80);opacity:.8;”);
$(‘#loading’).height($(document).height() + “px”);
$(‘#loading’).width($(document.body).outerWidth(true) + “px”);

var topPosition = document.documentElement.scrollTop + ($(window).height() – $(“#mdiv”).height()) / 2;

$(“#mdiv”).attr(“style”,”z-index:1000;left:50%; margin-left:-105px;position:absolute; display:none;background-image:url(../imgs/ldbg.png); background-repeat:no-repeat; height:189px; width:331px;top:”+topPosition+”px”);

$(‘#loading’).fadeIn();
$(‘#mdiv’).fadeIn();
//$(“#loading”).attr(“style”,”z-index:999; padding-top:200px; margin-left:0px;position:absolute;display:block; background-color:#000; filter:alpha(opacity=80);opacity:.8;”);

if(getls!=””){
url= “/ci.php/dashboard/page/”+page+”/”+getls+”/”+end_time+”/”+start_time;
}else{
url = “/ci.php/dashboard/page/”+page+”/all/”+end_time+”/”+start_time;
}

$.ajax({
type: ‘post’,
url: url,
cache:false,
success:function(html){

$(“#leadsdiv”).html(html);
$(“#loading”).attr(“style”,”display:none”);
$(“#mdiv”).attr(“style”,”display:none”);
}
});

});

$(“#datelead”).click(function (){
startt = $(“#starttime”).val();
endt   = $(“#endtime”).val();
datelead(endt,startt);
});

//—–search function
$(“#submit”).click(function (){
$(“#loading”).attr(“style”,”z-index:999; margin-left:0px; margin-top:300px;position:absolute;display:block; left: 416px; top: 31px; width:865px; height: 48px;”);
keyword = $(“#searchkeyword”).val();
if (keyword == “”){
alert(“keyword can’t be empty!”);
return false;
}
url = “/ci.php/dashboard/search/”+keyword;
$.ajax({
type: ‘post’,
url: url,
cache:false,
success:function(html){
$(“#leadsdiv”).html(html);
$(“#pagec”).html(“”);
$(“#loading”).attr(“style”,”display:none”);
$(“#mdiv”).attr(“style”,”display:none”);
}
});
});

});
function datelead(endtime,starttime){

getls = $(“#leadstatus”).val();

if(getls!=””){
location.href = “/ci.php/dashboard/index/”+getls+”/”+endtime+”/”+starttime;
}else{
location.href = “/ci.php/dashboard/index/all/”+endtime+”/”+starttime;
}

}
//$(“#loading”).attr(“style”,”display:none;”);
//document.getElementById(“loading”).style.display = “none”;
</script>

]]> jQuery加载远程PHP文件 https://www.3code.cn/jquery-load-phpfile/ Thu, 13 May 2010 09:09:10 +0000 https://www.3code.cn/?p=1648 最近有一个跨域加载远程PHP文件需求，需要将跨域远程的用户信息加载到本地使用，研究和参考相关资料，非常简单，其它后缀类似文件(asp,js)一样。

解决方案如下：

需要两个文件：提供信息的PHP文件(访问的远程文件)，加载远程文件的JS文件(获取或处理远程信息)

——————————————————————

infoBox.php(提供远程信息，与JS文件不在同一域)

<?php

$InfoBox = array(‘url’=>’biuuu.com’,’title’=>’必优博客’);

echo ‘var data=’ . json_encode($InfoBox) . ‘;’;

?>

将数据组装数组，通过PHP内置函数json_encode将数组转化成json数组，方便数组内容被远程调用。

——————————————————————

box.js(调用远程PHP文件JS类)

var box = {};

var remoteUrl = ‘http://www.biuuu.com/infoBox.php’;//远程调用URL

box.showBoxInfo = function() {

jQuery.getScript(remoteUrl, function(){

var boxInfoWrapper = jQuery(‘#boxInfoWrapper’);

var html = box.getBoxHtml(data.url,data.title);

boxInfoWrapper.html(html);

});

}

box.getBoxHtml = function(url,title){

return ‘<div><a href=”‘+url+'”>’+title+'</a></div>’;

}

remoteUrl就是前面infoBox.php的远程路径，通过getScript直接调用。其中boxInfoWrapper就是要显示信息 DIV的ID。

——————————————————————

test.html(测试HTML文件，包含JQuery与前面的box.js类)

<script src=”jquery-1.2.6.js” type=”text/javascript”></script>

<script src=”box.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function (){

box.showBoxInfo();

});

</script>

<div id=”boxInfoWrapper”></div>

jQuery.getScript跨域加载远程PHP文件实现过程非常简单，扩展性非常性，可以实现非常强大的功能，其它应用可以更深入的实践，供参考。

转载自 必优博客 http://www.biuuu.com/

]]> 很酷的伸缩导航菜单 https://www.3code.cn/cool-js-menu/ Tue, 11 May 2010 05:56:21 +0000 https://www.3code.cn/?p=1646 <!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″ />
<style type=”text/css”>
*{margin:0; padding:0;}
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;}
#box{width:200px; border:1px solid #ccc;}
.title{ font-size:12px; padding-left:3px; height:20px; border-bottom:1px solid #fff; background:#000; line-height:20px; color:#FFF; cursor:pointer;}
.content{ padding:5px; height:150px;}
</style>
<script type=”text/javascript”>
function flexMenu(id)
{
var $id = document.getElementById(id);
var titleList = $id.getElementsByTagName(‘h2’);
var contentList = $id.getElementsByTagName(‘div’);
titleList[titleList.length-1].style.border = ‘none’;
for(var i=0;i<titleList.length;i++)
{
titleList[i].onclick = function()
{
for(var a=0;a<contentList.length;a++)
{
contentList[a].style.display = ‘none’;
}
if(this.nextSibling.nodeType==’3′)
{
this.nextSibling.nextSibling.style.display = ”;
}else
{
this.nextSibling.style.display = ”;
}
}
}
}
window.onload = function(){ flexMenu(‘box’)}
</script>
<title>很酷的伸缩导航菜单</title>
</head>
<body>
<div id=”box”>
<h2>站长特效</h2>
<div ><a href=”http://www.moerdao.com”>特效频道子菜单</a></div>
<h2>网页特效</h2>
<div style=”display:none;”><a href=”http://www.moerdao.com”>网页特效子菜单</a></div>
<h2>广告代码</h2>

<div style=”display:none;”><a href=”https://www.3code.cn”>广告代码子菜单</a></div>
</div>
</body>
</html>

]]> 简单易用的JS+CSS伸缩菜单 https://www.3code.cn/js-css-menu-2/ Tue, 11 May 2010 05:27:58 +0000 https://www.3code.cn/?p=1643 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>简单易用的JS+CSS伸缩菜单-3code.cn/</title>
<style>
<!–
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none;
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F;
}
#navigation > ul > li > a{
display:block;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515;
border-right:1px solid #711515;
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{
background-color:#990020;
color:#ffff00;
}

#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myHide{
display:none;
}
#navigation ul li ul.myShow{
display:block;
}
–>
</style>
<script language=”javascript”>
function change(){
//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName(“ul”)[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.style.display == “none”)
oSecondDiv.style.display = “”;
else
oSecondDiv.className = “none”;
}
window.onload = function(){
var oUl = document.getElementById(“listUL”);
var aLi = oUl.childNodes;    //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == “LI” && aLi[i].getElementsByTagName(“ul”).length){
oA = aLi[i].firstChild;    //找到超链接
oA.onclick = change;    //动态添加点击函数
}
}
}
</script>
</head>
<body>
<div id=”navigation”>
<ul id=”listUL”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a>
<ul>
<li><a href=”#”>Lastest News</a></li>
<li><a href=”#”>All News</a></li>
</ul>
</li>
<li><a href=”#”>Sports</a>
<ul>
<li><a href=”/”>Basketball</a></li>
<li><a href=”/”>Football</a></li>
<li><a href=”/”>Volleyball</a></li>
</ul>
</li>
<li><a href=”/”>Weather</a>
<ul>
<li><a href=”#”>Today’s Weather</a></li>
<li><a href=”#”>Forecast</a></li>
</ul>
</li>
<li><a href=”/”>Contact Me</a></li>
</ul>
</div>
</body>
</html>

]]> Jquery ajax获取返回值实例 https://www.3code.cn/jquery-ajax/ Sun, 09 May 2010 02:32:56 +0000 https://www.3code.cn/?p=1639 以下代码经测试通过，根据不同应用可以此代码修改。

Html 及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=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript” language=”javascript”>  
function GetJsonData() { 
  $.ajax(  
         {  
    type: “GET”, 
    url: “a.php”,
    data: “id=1”, 
             success: function(data){ $(“#divok”).html(data);},
             error: function() { alert(“error”); }  
          }  
         )  
      }  
</script>  
</head>
<body  scroll=”no”>
<input name=”” type=”button” onclick=”GetJsonData()” value=”Click Here” />
<div id=”divok”></div>
 
</body>
</html>

a.php代码：

<? if($_GET[“id”]==1) {?>
<select name=””>
  <option value=”asd”>asdas</option>
  <option value=”sad”>sdad</option>
  <option value=”sad”>dsad</option>
</select>
<? }?>

]]> 一个form多个提交按钮,分别提交到多页面 https://www.3code.cn/oneform-manysubmit/ Mon, 26 Apr 2010 04:15:08 +0000 https://www.3code.cn/?p=1625 <html>
  • <head>
  • <script type=“text/javascript”>
  • function save(){
  • document.form1.action=“B.jsp”;
  • document.form1.submit();
  • }
  • function send(){
  • document.form1.action=“C.jsp”;
  • document.form1.submit();
  • }
  • </script>
  • </head>
  • <body>
  • <form name=“form1”>
  • <input type=“text” name=“username” value=“scott”>
  • <input type=“button” value=“发送” onclick=“send();”>
  • <input type=“button” value=“保存” onclick=“save();”>
  • </form>
  • </body>
  • </html>
    • ]]>         选中或者取消全部复选框JS代码 https://www.3code.cn/js-checkbox-select/ Fri, 23 Apr 2010 04:00:35 +0000 https://www.3code.cn/?p=1623 阅读更多…]]> <script language="javascript"> //第一次单击时的状态: var zt=true; function mm() { if(zt==true){zt=false;}else{zt=true;} var a = document.getElementsByTagName("input"); for (var i=0; i<a.length; i++) if (a[i].type == "checkbox") a[i].checked = zt; } </script> <form id="form1" name="form1" method="post" action=""> <input type="button" name="button" id="button" value="单击此处" onclick="mm()" /> <input type="checkbox" name="checkbox" id="checkbox" /> <input type="checkbox" name="checkbox2" id="checkbox2" /> <input type="checkbox" name="checkbox3" id="checkbox3" /> <input type="checkbox" name="checkbox4" id="checkbox4" /> <input type="checkbox" name="checkbox5" id="checkbox5" /> <input type="checkbox" name="checkbox6" id="checkbox6" /> <input type="checkbox" name="checkbox7" id="checkbox7" /> <input type="checkbox" name="checkbox8" id="checkbox8" /> <input type="checkbox" name="checkbox9" id="checkbox9" /> <input type="checkbox" name="checkbox10" id="checkbox10" /> <input type="checkbox" name="checkbox11" id="checkbox11" /> <input type="checkbox" name="checkbox12" id="checkbox12" /> <input type="checkbox" name="checkbox13" id="checkbox13" /> <input type="checkbox" name="checkbox14" id="checkbox14" /> <input type="checkbox" name="checkbox15" id="checkbox15" /> <input type="checkbox" name="checkbox16" id="checkbox16" /> <input type="checkbox" name="checkbox17" id="checkbox17" /> </form> ]]> DIV层拖动 https://www.3code.cn/div-drag/ Tue, 20 Apr 2010 06:08:44 +0000 https://www.3code.cn/?p=1615 <style type=”text/css”>
    .MoveDivContent
    {
    position: absolute;

    width: 600px;
    height: 200px;
    border: 2px #507CD1 solid;
    background: #EFF3FB;
    cursor:pointer;
    }
    .MoveDivTitle
    {
    width: 600px;
    line-height: 25px;
    text-align: left;
    background: #507CD1;
    color:#FFFFFF;
    cursor: move;
    }
    </style>

    <script language=”javascript” type=”text/javascript”>
    /*
    调用方法:var myDrag=new Endrag(source,target,offSetX, offSetY);
    参数说明:source–鼠标动作绑定对象;target–操作目标对象(要移动的对象);offSetX–横坐标偏移;offSetY–纵坐标偏移
    说明:通过多次调用本方法绑定多个对象的拖动
    */
    funs = {
    index: 100,
    getFocus: function(target) {
    if (target.style.zIndex != this.index) {
    this.index += 2;
    var idx = this.index;
    target.style.zIndex = idx;
    }
    },
    abs: function(element) {
    var result = { x: element.offsetLeft, y: element.offsetTop };
    element = element.offsetParent;
    while (element) {
    result.x += element.offsetLeft;
    result.y += element.offsetTop;
    element = element.offsetParent;
    }
    return result;
    }
    };

    function Endrag(source, target, offSetX, offSetY) {
    source = typeof (source) == “object” ? source : document.getElementById(source);
    target = typeof (target) == “object” ? target : document.getElementById(target);
    var x0 = 0, y0 = 0, x1 = 0, y1 = 0, moveable = false, index = 100, NS = (navigator.appName == ‘Netscape’);
    offSetX = typeof offSetX == “undefined” ? 0 : offSetX;
    offSetY = typeof offSetY == “undefined” ? 0 : offSetY;
    source.onmousedown = function(e) {
    e = e ? e : (window.event ? window.event : null);
    funs.getFocus(target);
    if (e.button == (NS) ? 0 : 1) {
    if (!NS) { this.setCapture() }
    x0 = e.clientX;
    y0 = e.clientY;
    x1 = parseInt(funs.abs(target).x);
    y1 = parseInt(funs.abs(target).y);
    moveable = true;
    }
    };
    //拖动;
    source.onmousemove = function(e) {
    e = e ? e : (window.event ? window.event : null);
    if (moveable) {
    target.style.left = (x1 + e.clientX – x0 – offSetX) + “px”;
    target.style.top = (y1 + e.clientY – y0 – offSetY) + “px”;
    }
    };
    //停止拖动;
    source.onmouseup = function(e) {
    if (moveable) {
    if (!NS) { this.releaseCapture(); }
    moveable = false;
    }
    };
    }
    </script>

    <div style=”background-color:#666666; width:400px; height:300px; z-index:1000000; position:relative; overflow:hidden;”>
    <div id=”MoveDiv”>adasdza</div>
    </div>
    <script type=”text/javascript”>
    moveTag();
    function moveTag() {
    var i = new Endrag(‘MoveDiv’, ‘MoveDiv’, 0, 0);
    }
    </script>

    ]]>         Javascript打印网页中定义的部分内容 https://www.3code.cn/javascript-print/ Fri, 26 Mar 2010 04:16:40 +0000 https://www.3code.cn/?p=1602 正常情况下的打印是使用 window.print(); 直接整页打印，但假如需要打印网页中定义的部分内容，则可使用如下的方法：

    1、在页面的代码头部处加入Javascript：
    Javascript代码

    <script language=javascript>
    function doPrint() {
    bdhtml=window.document.body.innerHTML;
    sprnstr=”<!–startprint–>”;
    eprnstr=”<!–endprint–>”;
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
    window.document.body.innerHTML=prnhtml;
    window.print();
    }
    </script>

    2、在页面正文处加上<!–startprint–>和<!–endprint–>标识。
    也就是在需要用户打印保存的正文所对应的html处附加上。同时，假如采用小偷程式获得远程数据并需打印，可将此等数据置于该定义标签之内即可。

    3、截取内容部分已完成，现在加个“打印”的链接：

    <a href=”javascript:;” onClick=”doPrint()”>打印</a>
    ]]>         发现一个不错的xml+flash图表 https://www.3code.cn/xml-swf-charts/ Tue, 02 Feb 2010 09:48:00 +0000 https://www.3code.cn/?p=1556 XML/SWF Charts is a simple, yet powerful tool to create attractive charts and graphs from XML data.

    Create an XML source to describe a chart, then pass it to this tool’s flash file to generate the chart. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.)

    XML/SWF Charts makes the best of both the XML and SWF worlds. XML provides flexible data generation, and Flash provides the best graphic quality.
    可以去他们的网站下载，支持多种图表格式，xml提供数据源，用起来很方便。

    http://www.maani.us/xml_charts/index.php

    ]]>         JS Div Scroll Bar用层模拟滚动条 https://www.3code.cn/js-div-scroll-bar/ Thu, 14 Jan 2010 07:38:52 +0000 https://www.3code.cn/?p=1493 JS Div Scroll Bar用层模拟滚动条(ie, firefox下测试通过)

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd”>
    <HTML xmlns=”http://www.w3.org/1999/xhtml”><HEAD>
    <META http-equiv=Content-Type content=”text/html; charset=gbk”><LINK
    rev=stylesheet href=”scroll/marketcenter.css” type=text/css
    rel=stylesheet>
    <META content=”MSHTML 6.00.5730.13″ name=GENERATOR></HEAD>
    <BODY>
    <DIV id=content>
    <DIV>
    <DIV></DIV>
    <DIV id=roll style=”POSITION: relative”><!–Scrollbar begin–>
    <DIV id=Scrollbar-Container-1>
    <DIV-Up></DIV>
    <DIV-Down></DIV>
    <DIV-Track>
    <DIV-Handle></DIV></DIV></DIV>
    <!–Scrollbar end–><!–Container begin–>
    <DIV>
    <DIV id=Scroller-1>
    <DIV-Container>
    <DIV>
    <DL>
    adadad<br>
    dadasd<br>
    dad<br>
    fa<br>adadad<br>
    dadasd<br>
    dad<br>
    fa<br>adadad<br>
    dadasd<br>
    dad<br>
    fa<br>adadad<br>
    dadasd<br>
    dad<br>
    fa<br>adadad<br>
    dadasd<br>
    dad<br>
    fa<br>adadad<br>
    dadasd<br>
    dad<br>
    fa<br>adadad<br>
    dadasd<br>
    dad<br>
    fa<br>adadad<br>
    dadasd<br>
    dad<br>
    fa<br>

    </DL></DIV></DIV></DIV></DIV>
    <!–Container end–></DIV></DIV></DIV>

    <SCRIPT src=”scroll/scroll.js” type=text/javascript></SCRIPT>
    </BODY></HTML>

    JS与CSS文件去这里下载：https://www.3code.cn/download/scroll.rar

    ]]>         完美页角卷页效果pageear(IE-FIREFOX) https://www.3code.cn/pageear-ie-firefox/ Fri, 25 Dec 2009 07:18:55 +0000 https://www.3code.cn/?p=1392 完美页角卷页效果pageear(IE-FIREFOX)

    要做一个网页右上角卷页的效果，在网上找了好久，能找到一些flash效果，但是那些都是在IE下面可以，在FIREFOX下面，flash不是真正的透明的，虽然看上去是，但是会把flash下面网页的内容遮盖住，从而不能点击flash下面的按钮与文字等。

    搜索中文内容怎么也找不到，只好在google上搜索英文资料。找到了一个叫pageear的东西，可以解决这个问题。下面就与大家分享一下解决方法。

    一、解决思路
    原理是用js调用flash,flash有两个，一个大的（pageear_b.swf）也就是展开后的效果，一个是小的(pageear_s.swf)是缩小后的效果。这两个flash文件不用作任何修改。

    两个js文件，AC_OETags.js这个是调用flash的，不作修改。pageear.js这个是配置文件，是我们要修改的地方。

    主要修改的地方是：
    1.
    pagearSmallImg：小图地址
    pagearSmallSwf：小flash地址
    pagearBigImg：大图地址
    pagearBigSwf：大flash地址
    jumpTo：点击后要去的页面URL
    openOnLoad：页面加载时是否自动打开卷页效果，也就是说是否自动变大，否则将会直接显示一个小的卷页效果在右上角，鼠标放上去后才会展开。

    2.
    thumbWidth: 小图宽度
    thumbHeight：小图高度
    bigWidth: 大图宽度
    bigHeigh:大图高度

    可以点这里下载：pageear.zip

    安装方法：

    一、首先下载pageear.zip ，里面包含js文件，图片文件，flash文件，解压后将pageear文件夹传到你的网站空间上。注意：此效果只能在网上看到效果，用本地localhost看不到效果。

    二、根据你所传的pageear文件夹所在位置，配置pageear.js文件。如上面所介绍的。

    三、在要显示的网页上加入以下代码：

    <script src=”你的URL/AC_OETags.js” language=”javascript”></script>
    <script src=”你的URL/pageear.js” type=”text/javascript”></script>

    放在<head>与</head>之间。

    <script type=”text/javascript”>
    writeObjects();
    </script

    放到</body>上面一行。

    四、保存你的网页，刷新即可看到效果。

    如果你按照料上述说明操作。到现在为止，你可以成功的在网页上放这个效果了。当然根据你的需要，你可以把两个图片换成你自己的图片。

    扩展：如何在wordpress上面插入此效果？

    方法基本相同。只是上面的代码可以改成:
    <script src=”<?php bloginfo(‘template_url’); ?>/pageear/AC_OETags.js” language=”javascript”></script>
    <script src=”<?php bloginfo(‘template_url’); ?>/pageear/pageear.js” type=”text/javascript”></script>

    在footer.php的</body>上面一行插入：
    <script type=”text/javascript”>
    writeObjects();
    </script

    前提是你要将pageear这个文件夹传到你的模板目录内。

    好了，就说到这里，有不清楚的地方请在下面留言。希望对用到的朋友们有所帮助。

    www.3code.cn 原创。转载请注明。

    ]]>