Wordpress外贸企业主题, Wp企业主题, wordpress企业主题, wordpress主题定制, PHP代码, ASP代码, 精选JS代码, WORDPRESS, 网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 | 九创主题 » 精选JS http://www.3code.cn Wordpress外贸企业主题, Wp企业主题, wordpress企业主题, wordpress主题定制, PHP代码,ASP代码,精选JS代码,WORDPRESS,网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 Mon, 02 Jan 2012 07:26:08 +0000 zh-cn hourly 1 http://wordpress.org/?v=3.1.1 鼠标经过图片变暗的js兼容IE FIREFOX http://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/ http://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/#comments Fri, 28 Oct 2011 15:15:01 +0000 寒林 http://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)"/>

]]> http://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/feed/ 0 JS无间隙向左,向右,向上,向下滚动兼容IE,firefox http://www.3code.cn/js%e6%97%a0%e9%97%b4%e9%9a%99%e5%90%91%e5%b7%a6%e5%90%91%e5%8f%b3%e5%90%91%e4%b8%8a%e5%90%91%e4%b8%8b%e6%bb%9a%e5%8a%a8%e5%85%bc%e5%ae%b9iefirefox/ http://www.3code.cn/js%e6%97%a0%e9%97%b4%e9%9a%99%e5%90%91%e5%b7%a6%e5%90%91%e5%8f%b3%e5%90%91%e4%b8%8a%e5%90%91%e4%b8%8b%e6%bb%9a%e5%8a%a8%e5%85%bc%e5%ae%b9iefirefox/#comments Fri, 03 Jun 2011 16:46:43 +0000 寒林 http://www.3code.cn/?p=2698 代码如下：

boxmove(d1,d2,d3,e,obj)
d1 = 外围容器
d2 = 内容
d3 = 复制d2的内容接替循环滚动
e = 方向与方法
1,2,3,4 = 自动滚动，分别对应：上,右,下,左
"top","right","bottom","left" = 手动滚动，分别对应：上,右,下,左
obj = 选择手动滚动时设置为this，用于事件绑定操作。自动滚动时无须设置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta name="keywords" content="PRcss,xhtml,html,css,js,book,个人主页,无聊,神经,懒惰" />
<meta name="Author" content="PRcss,qq:50198763" />
<meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" />
<title>滚动合集 - www.poluoluo.com</title>
<script type="text/javascript">
// 自动滚动
function boxmove(d1,d2,d3,e,obj){
var speed=30;
var demo=document.getElementById(d1);
var demo1=document.getElementById(d2);
var demo2=document.getElementById(d3);
demo2.innerHTML=demo1.innerHTML;
function boxTop(){
if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
else{demo.scrollTop++}
}
function boxRight(){
if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
else{demo.scrollLeft--}
}
function boxBottom(){
if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
else{demo.scrollTop--}
}
function boxLeft(){
if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
else{demo.scrollLeft++}
}
if(e==1){
var MoveTop=setInterval(boxTop,speed);
demo.onmouseover=function(){clearInterval(MoveTop);}
demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)}
}
if(e==2){
var MoveRight=setInterval(boxRight,speed);
demo.onmouseover=function(){clearInterval(MoveRight)}
demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)}
}
if(e==3){
var MoveBottom=setInterval(boxBottom,speed);
demo.onmouseover=function(){clearInterval(MoveBottom);}
demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)}
}
if(e==4){
var MoveLeft=setInterval(boxLeft,speed)
demo.onmouseover=function(){clearInterval(MoveLeft)}
demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)}
}
if(e=="top"){
MoveTop=setInterval(boxTop,speed)
obj.onmouseout=function(){clearInterval(MoveTop);}
}
if(e=="right"){
MoveRight=setInterval(boxRight,speed)
obj.onmouseout=function(){clearInterval(MoveRight);}
}
if(e=="bottom"){
MoveBottom=setInterval(boxBottom,speed)
obj.onmouseout=function(){clearInterval(MoveBottom);}
}
if(e=="left"){
MoveLeft=setInterval(boxLeft,speed)
obj.onmouseout=function(){clearInterval(MoveLeft);}
}
}
</script>
<style type="text/css">
div#a,div#b,div#c,div#d { float:left;}
h2 { clear:both; }
div#b,div#d,div#bb { white-space:nowrap; }
</style>
</head>
<body>
<h1>滚动合集</h1>
<hr />

<h2>向上</h2>
<div id="a" style="overflow:hidden;height:100px;width:90px;">
<div id="a1">
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
</div>
<div id="a2"></div>
</div>
<script type="text/javascript">
boxmove("a","a1","a2",1);
</script>

<h2>向右</h2>
<div id="b" style="overflow:hidden;height:100px;width:90px;">
<div id="b1">
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
</div>
<div id="b2"></div>
</div>
<script type="text/javascript">
boxmove("b","b1","b2",2);
</script>

<h2>向下</h2>
<div id="c" style="overflow:hidden;height:100px;width:90px;">
<div id="c1">
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
</div>
<div id="c2"></div>
</div>
<script type="text/javascript">
boxmove("c","c1","c2",3);
</script>

<h2>向左</h2>
<div id="d" style="overflow:hidden;height:100px;width:90px;">
<div id="d1">
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
</div>
<div id="d2"></div>
</div>
<script type="text/javascript">
boxmove("d","d1","d2",4);
</script>

<h2>手动滚动 - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>
<div id="aa" style="overflow:hidden;height:100px;width:90px;">
<div id="aa1">
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
</div>
<div id="aa2"></div>
</div>

<h2>手动滚动 - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;">
<div id="bb1">
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
<img src="http://www.poluoluo.com/jzxy/UploadFiles_333/201103/20110320101938325.gif" alt="" />
</div>
<div id="bb2"></div>
</div>

</body>
</html>

]]> http://www.3code.cn/js%e6%97%a0%e9%97%b4%e9%9a%99%e5%90%91%e5%b7%a6%e5%90%91%e5%8f%b3%e5%90%91%e4%b8%8a%e5%90%91%e4%b8%8b%e6%bb%9a%e5%8a%a8%e5%85%bc%e5%ae%b9iefirefox/feed/ 0 JS图片左右无缝隙滚动(兼容IE,Firefox 遵循W3C标准) http://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/ http://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/#comments Tue, 24 May 2011 02:36:54 +0000 寒林 http://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>

]]> http://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/feed/ 0 JS网页打印大全 http://www.3code.cn/js%e7%bd%91%e9%a1%b5%e6%89%93%e5%8d%b0%e5%a4%a7%e5%85%a8/ http://www.3code.cn/js%e7%bd%91%e9%a1%b5%e6%89%93%e5%8d%b0%e5%a4%a7%e5%85%a8/#comments Tue, 03 May 2011 08:33:07 +0000 寒林 http://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)

]]> http://www.3code.cn/js%e7%bd%91%e9%a1%b5%e6%89%93%e5%8d%b0%e5%a4%a7%e5%85%a8/feed/ 0 JS实现的DIV模拟滚动条(支持IE6,7,8/FF) http://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/ http://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/#comments Thu, 17 Feb 2011 08:22:14 +0000 寒林 http://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>

]]> http://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/feed/ 0 jQuery弹出窗口插件Facebox http://www.3code.cn/jquery%e5%bc%b9%e5%87%ba%e7%aa%97%e5%8f%a3%e6%8f%92%e4%bb%b6facebox/ http://www.3code.cn/jquery%e5%bc%b9%e5%87%ba%e7%aa%97%e5%8f%a3%e6%8f%92%e4%bb%b6facebox/#comments Fri, 28 Jan 2011 05:31:33 +0000 寒林 http://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()
})

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

]]> http://www.3code.cn/jquery%e5%bc%b9%e5%87%ba%e7%aa%97%e5%8f%a3%e6%8f%92%e4%bb%b6facebox/feed/ 2 让IE6支持PNG透明的方法 http://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/ http://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/#comments Thu, 02 Dec 2010 02:19:19 +0000 寒林 http://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

]]> http://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/feed/ 0 容错脚本,不显示js错误 http://www.3code.cn/js-error/ http://www.3code.cn/js-error/#comments Sat, 06 Nov 2010 13:24:14 +0000 寒林 http://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>

]]> http://www.3code.cn/js-error/feed/ 0 js文字间隔停顿向上滚动效果(IE-FIREFOX) http://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/ http://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/#comments Tue, 02 Nov 2010 16:45:59 +0000 寒林 http://www.3code.cn/?p=2210 <script>
var marqueeContent=new Array(); //滚动新闻
marqueeContent[0]='<font color="#0000CC">14:25 </font><a href=http://www.3code.cn target=_blank>本站精心制作的多款WORDPRESS外贸企业主题,</a><br>';
marqueeContent[1]='<font color="#0000CC">14:25 </font><a href=http://www.3code.cn target=_blank>看过后，相信大家会有眼光，它就是你需要的！</a><br>';
marqueeContent[2]='<font color="#0000CC">14:25 </font><a href=http://www.3code.cn target=_blank>这几款WORDPRESS主题的主要亮点：极好的SEO优化，欧美风格，超低价格</a><br>';
marqueeContent[3]='<font color="#0000CC">14:25 </font><a href=http://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>

]]> http://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/feed/ 0 jquery检测用户是否存在及验证表单 http://www.3code.cn/jquery-userreg/ http://www.3code.cn/jquery-userreg/#comments Mon, 23 Aug 2010 07:38:47 +0000 寒林 http://www.3code.cn/?p=1976 本例实现了用JQUERY验证表单字段格式是否正确、检查用户名是否存在、用表单提交成功后的返回值显示。

下载示例包：<a href="http://www.3code.cn/download/jquery-userreg.zip">jquery-userreg.zip</a>

这是用到的JS代码,下载包里面有：

<script language="javascript" src="../js/jquery-1.4.min.js"></script>
<script language="javascript" src="../js/jquery.checkform.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script language="javascript">
$(function(){

$("#form1").valid([
//{ name:"username",type:"ajax",message:"用户名没有注册", url:"abc.php" },
{ name:"username",type:"username",simple:"用户名"},
{ name:"password",type:"password",simple:"密码",min:8,max:16},
{ name:"password2",type:"eq",simple:"重复密码", to:"password" },
{ name:"english",type:"eng",simple:"英文域", require:false },
{ name:"chinese",type:"chn",simple:"中文域", require:false },
{ name:"email",type:"mail",simple:"邮箱" },
{ name:"url",type:"url",message:"地址信息不正确哦!" },
{ name:"checkbox",simple:"多选" },
{ name:"select",simple:"选择框" },
]);

//start check username
var txtname = $("#username");
//输入文字时文本框样式
txtname.keyup(function() {
var name = $(this).val();
if (name == "")
$(this).addClass("txtName");
else $(this).removeClass("txtName");
})
//失去焦点时验证用户名是否可用
$("#username").blur(function() {
var name = $(this).val();
$.get("abc.php?name=" + name, null, function(response) {
$("#result").html(response);
})
})
//end check username

//start submit form
var options = {
//target:        '#output1',   // target element(s) to be updated with server response
// beforeSubmit:  showRequest,  // pre-submit callback
success:       showResponse1,  // post-submit callback
url: 'c1.php',
type: 'post'
// other available options:
//url:       url         // override for form's 'action' attribute
//type:      type        // 'get' or 'post', override for form's 'method' attribute
//dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true        // clear all form fields after successful submit
//resetForm: true        // reset the form after successful submit

// $.ajax options can be used here too, for example:
//timeout:   3000
};
$('#form1').ajaxForm(options);

function showResponse1(responseText, statusText, xhr, $form)  {
alert(responseText);
location.href='user.php';
}

})

</script>

]]> http://www.3code.cn/jquery-userreg/feed/ 1 贴一段jquery代码 http://www.3code.cn/jquery-code/ http://www.3code.cn/jquery-code/#comments Thu, 10 Jun 2010 05:00:42 +0000 寒林 http://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>

]]> http://www.3code.cn/jquery-code/feed/ 0 精典多张图片渐变（fade）效果， 支付IE与firefox http://www.3code.cn/imgfade/ http://www.3code.cn/imgfade/#comments Tue, 01 Jun 2010 08:07:52 +0000 寒林 http://www.3code.cn/?p=1653 无意间找到的这个图片渐变轮换效果，支持IE与firefox。之前一直都没有找到，都是用flash去做的，呵。

现在把文件放这儿，供大伙下载。

imgfade.rar

]]> http://www.3code.cn/imgfade/feed/ 2 jQuery加载远程PHP文件 http://www.3code.cn/jquery-load-phpfile/ http://www.3code.cn/jquery-load-phpfile/#comments Thu, 13 May 2010 09:09:10 +0000 寒林 http://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/

]]> http://www.3code.cn/jquery-load-phpfile/feed/ 0 很酷的伸缩导航菜单 http://www.3code.cn/cool-js-menu/ http://www.3code.cn/cool-js-menu/#comments Tue, 11 May 2010 05:56:21 +0000 寒林 http://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="http://www.3code.cn">广告代码子菜单</a></div>
</div>
</body>
</html>

]]> http://www.3code.cn/cool-js-menu/feed/ 0 简单易用的JS+CSS伸缩菜单 http://www.3code.cn/js-css-menu-2/ http://www.3code.cn/js-css-menu-2/#comments Tue, 11 May 2010 05:27:58 +0000 寒林 http://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>

]]> http://www.3code.cn/js-css-menu-2/feed/ 0 Jquery ajax获取返回值实例 http://www.3code.cn/jquery-ajax/ http://www.3code.cn/jquery-ajax/#comments Sun, 09 May 2010 02:32:56 +0000 寒林 http://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>
<? }?>

]]> http://www.3code.cn/jquery-ajax/feed/ 0 一个form多个提交按钮,分别提交到多页面 http://www.3code.cn/oneform-manysubmit/ http://www.3code.cn/oneform-manysubmit/#comments Mon, 26 Apr 2010 04:15:08 +0000 寒林 http://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>
    • ]]>     http://www.3code.cn/oneform-manysubmit/feed/ 0     选中或者取消全部复选框JS代码 http://www.3code.cn/js-checkbox-select/ http://www.3code.cn/js-checkbox-select/#comments Fri, 23 Apr 2010 04:00:35 +0000 寒林 http://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> ]]> http://www.3code.cn/js-checkbox-select/feed/ 0 DIV层拖动 http://www.3code.cn/div-drag/ http://www.3code.cn/div-drag/#comments Tue, 20 Apr 2010 06:08:44 +0000 寒林 http://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>

    ]]>     http://www.3code.cn/div-drag/feed/ 0     Javascript打印网页中定义的部分内容 http://www.3code.cn/javascript-print/ http://www.3code.cn/javascript-print/#comments Fri, 26 Mar 2010 04:16:40 +0000 寒林 http://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>
    ]]>     http://www.3code.cn/javascript-print/feed/ 0