web集结号 » js特效

web集结号 » js特效 http://www.songlecn.com 专注于web表现层技术 Wed, 04 Nov 2009 02:46:32 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 js圆角效果 http://www.songlecn.com/2009/05/909/ http://www.songlecn.com/2009/05/909/#comments Fri, 08 May 2009 02:35:38 +0000 船长 http://www.songlecn.com/?p=909 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } js圆角效果，给div添加圆角效果，多种样式可定制，运行代码查看 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript 圆角效果</title> <style type="text/css"> #shadowed-border { padding: 20px; width: 30%; margin: 20px auto; } #shadowed-border .sb-inner { background:#ccc; } #shadowed-border .sb-border { background:#fff; } #shadowed-border2 { padding: 10px; width: 30%; margin: 10px auto; } #shadowed-border2 .sb-inner { background:#DFE2FF; [...]]]> http://www.songlecn.com/2009/05/909/feed/ 0 web效果套装-shiftzoom缩放效果 http://www.songlecn.com/2009/05/901/ http://www.songlecn.com/2009/05/901/#comments Thu, 07 May 2009 02:50:46 +0000 船长 http://www.songlecn.com/?p=901 http://www.songlecn.com/2009/05/901/feed/ 0 web效果套装-page curl翻页效果 http://www.songlecn.com/2009/05/892/ http://www.songlecn.com/2009/05/892/#comments Wed, 06 May 2009 02:35:04 +0000 船长 http://www.songlecn.com/?p=892 http://www.songlecn.com/2009/05/892/feed/ 0 web效果套装-bevel http://www.songlecn.com/2009/05/884/ http://www.songlecn.com/2009/05/884/#comments Tue, 05 May 2009 02:19:00 +0000 船长 http://www.songlecn.com/?p=884 http://www.songlecn.com/2009/05/884/feed/ 0 web效果套装-busy loading效果 http://www.songlecn.com/2009/05/874/ http://www.songlecn.com/2009/05/874/#comments Mon, 04 May 2009 02:19:33 +0000 船长 http://www.songlecn.com/?p=874 http://www.songlecn.com/2009/05/874/feed/ 0 web效果套装-loupe放大镜效果 http://www.songlecn.com/2009/04/831/ http://www.songlecn.com/2009/04/831/#comments Fri, 24 Apr 2009 03:05:23 +0000 船长 http://www.songlecn.com/?p=831 http://www.songlecn.com/2009/04/831/feed/ 0 web效果套装-filmed影片特效 http://www.songlecn.com/2009/04/810/ http://www.songlecn.com/2009/04/810/#comments Wed, 22 Apr 2009 03:10:16 +0000 船长 http://www.songlecn.com/?p=810 http://www.songlecn.com/2009/04/810/feed/ 0 web效果套装-slided幻灯阴影 http://www.songlecn.com/2009/04/802/ http://www.songlecn.com/2009/04/802/#comments Tue, 21 Apr 2009 02:58:59 +0000 船长 http://www.songlecn.com/?p=802 http://www.songlecn.com/2009/04/802/feed/ 1 web效果套装-instant即时图片效果 http://www.songlecn.com/2009/04/787/ http://www.songlecn.com/2009/04/787/#comments Sat, 18 Apr 2009 03:44:00 +0000 船长 http://www.songlecn.com/?p=787 http://www.songlecn.com/2009/04/787/feed/ 0 独一无二的弹性图片展示特效 http://www.songlecn.com/2009/04/769/ http://www.songlecn.com/2009/04/769/#comments Thu, 16 Apr 2009 03:21:37 +0000 船长 http://www.songlecn.com/?p=769 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 独一无二的弹性图片展示特效，效果不错，点击运行查看效果： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript"> eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('n 19=l(1W){n 4h=l(){m(9.1n&&15[0]!=\'6d\')k 9.1n.2K(9,15);T k 9};P(n C 14 9)4h[C]=9[C];4h.Y=1W;k 4h};19.1H=l(){};19.Y={V:l(1W){n 4g=Q 9(\'6d\');n 6c=l(2C,1x){m(!2C.2K||!1x.2K)k U;k l(){9.1A=2C;k 1x.2K(9,15)}};P(n C 14 1W){n 2C=4g[C];n 1x=1W[C];m(2C&&2C!=1x)1x=6c(2C,1x)||1x;4g[C]=1x}k Q 19(4g)},26:l(1W){P(n C 14 1W)9.Y[C]=1W[C]}};2a.V=l(){n 12=15;12=(12[1])?[12[0],12[1]]:[9,12[0]];P(n C 14 12[1])12[0][C]=12[1][C];k 12[0]};2a.5f=l(){P(n i=0;i<15.11;i++)15[i].V=19.Y.26};Q 2a.5f(51,1t,5E,6h,19);m(5u 3L==\'2R\'){n 3L=19.1H;3L.Y={}}T{3L.Y.5c=1h}1a.V=L.V=2a.V;n 8x=1a;l $B(J){m(J===22||J===2R)k U;n B=5u J;m(B==\'4U\'){m(J.5c)k\'G\';m(J.1o)k\'1P\';m(J.8w){23(J.6m){18 1:k\'G\';18 3:k [...]]]> http://www.songlecn.com/2009/04/769/feed/ 0 js广告-左右底部广告 http://www.songlecn.com/2009/04/759/ http://www.songlecn.com/2009/04/759/#comments Wed, 15 Apr 2009 02:39:31 +0000 船长 http://www.songlecn.com/?p=759 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } js广告-左右底部广告，可定制左边显示、右边显示和两边显示，代码相当简单 <script type="text/javascript" language="javascript"> var MmyeeAdShow = 3; //1为左侧显示 2为右侧显示其他为两侧显示 var MmyeeAdWidth =300; //广告宽度 var MmyeeAdHeight = 200; //广告高度 //左边浮动 var AdLeftContent= "<div><iframe id='iframyee' bordercolor='#000000' frameborder='0' hspace='0' marginheight='0' marginwidth='0' scrolling='no' src='http://www.songlecn.com' width='"+MmyeeAdWidth+"' height='"+MmyeeAdHeight+"'></iframe></div>"; //右边浮动 var AdRightContent = "<div><iframe id=iframyee frameborder=0 marginwidth=0 marginheight=0 bordercolor='#000000' hspace='0' scrolling=no src='http://www.songlecn.com' width='"+MmyeeAdWidth+"' height='"+MmyeeAdHeight+"'></iframe></div>" //漂浮据页面底部设定框值，为了美观请不要修改次参数 var marginTop = 10 //漂浮据边框的距离 [...]]]> http://www.songlecn.com/2009/04/759/feed/ 0 js浮动广告代码 http://www.songlecn.com/2009/04/750/ http://www.songlecn.com/2009/04/750/#comments Tue, 14 Apr 2009 02:26:06 +0000 船长 http://www.songlecn.com/?p=750 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } js浮动广告代码，常见的在屏幕内漂浮的图片广告效果，可以吸引用户注意力，缺点是用户体验稍差 <div id="img" style="LEFT:27px; visibility=hidden;POSITION:absolute; TOP:1115px"> <a href="http://www.songlecn.com" target="_blank"> <img border=0 src="http://www.songlecn.com/wp-content/supload/2009/04/14/009.jpg" width=400 height=50> </a> </div> <script language="javascript"> <!-- Begin var xPos = 20; var yPos = document.body.clientHeight; var step = 1; var delay = 30; var height = 0; var Hoffset = 0; var Woffset = 0; var yon = 0; var xon = [...]]]> http://www.songlecn.com/2009/04/750/feed/ 1 js广告-流动效果 http://www.songlecn.com/2009/04/742/ http://www.songlecn.com/2009/04/742/#comments Mon, 13 Apr 2009 02:35:47 +0000 船长 http://www.songlecn.com/?p=742 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } js广告-流动效果，很简单的，没什么技术含量 <html> <head></head> <body> <marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=5 behavior=alternate> <table cellspacing=0 cellpadding=2 width="100%" border=0> <tbody> <tr> <td><img src="http://www.songlecn.com/wp-content/supload/2009/04/13/2.jpg" width="150" height="150"></td> <td><img src="http://www.songlecn.com/wp-content/supload/2009/04/13/2.jpg" width="150" height="150"></td> <td><img src="http://www.songlecn.com/wp-content/supload/2009/04/13/2.jpg" width="150" height="150"></td> <td><img src="http://www.songlecn.com/wp-content/supload/2009/04/13/2.jpg" width="150" height="150"></td> <td><img src="http://www.songlecn.com/wp-content/supload/2009/04/13/2.jpg" width="150" height="150"></td> <td><img src="http://www.songlecn.com/wp-content/supload/2009/04/13/2.jpg" width="150" height="150"></td> <td><img src="http://www.songlecn.com/wp-content/supload/2009/04/13/2.jpg" width="150" height="150"></td> <td><img src="http://www.songlecn.com/wp-content/supload/2009/04/13/2.jpg" width="150" height="150"></td> <td><img src="http://www.songlecn.com/wp-content/supload/2009/04/13/2.jpg" width="150" height="150"></td> <td><img src="http://www.songlecn.com/wp-content/supload/2009/04/13/2.jpg" width="150" [...]]]> http://www.songlecn.com/2009/04/742/feed/ 0 用Javascript实现抽奖功能 http://www.songlecn.com/2009/04/735/ http://www.songlecn.com/2009/04/735/#comments Sun, 12 Apr 2009 04:47:26 +0000 船长 http://www.songlecn.com/?p=735 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 用Javascript实现抽奖功能，很简单，点击运行查看效果 <!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> <title> 抽奖系统</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript"> <!-- // global variables var timer; var flag = new Array(100); var existingnum = new Array(100); var clickTimes = 0; var randnum; var cellnum =1; var mobile = new Array(); // set data here!! mobile[0]=13020000100; [...]]]> http://www.songlecn.com/2009/04/735/feed/ 0 flash右侧浮动广告代码 http://www.songlecn.com/2009/04/728/ http://www.songlecn.com/2009/04/728/#comments Sat, 11 Apr 2009 06:39:51 +0000 船长 http://www.songlecn.com/?p=728 http://www.songlecn.com/2009/04/728/feed/ 0 简单的双击编辑文本js代码 http://www.songlecn.com/2009/04/719/ http://www.songlecn.com/2009/04/719/#comments Fri, 10 Apr 2009 02:33:00 +0000 船长 http://www.songlecn.com/?p=719 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等，这些功能看似较难，其实实现起来很简单，只需几行代码就可实现。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>直接双击页面元素进行修改的HTML代码</title> <script type="text/javascript"> function ShowElement(element) { var oldhtml = element.innerHTML; //获得元素之前的内容 var newobj = document.createElement('input'); //创建一个input元素 newobj.type = 'text'; //为newobj元素添加类型 //设置newobj失去焦点的事件 newobj.onblur = function(){ element.innerHTML = this.value ? this.value : oldhtml; //当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml。 } element.innerHTML = ''; //设置元素内容为空 element.appendChild(newobj); [...]]]> http://www.songlecn.com/2009/04/719/feed/ 0 js广告-翻屏效果 http://www.songlecn.com/2009/04/703/ http://www.songlecn.com/2009/04/703/#comments Wed, 08 Apr 2009 02:38:31 +0000 船长 http://www.songlecn.com/?p=703 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } js广告-翻屏效果，运行代码即可查看： <html> <head></head> <body> <div style="HEIGHT:85px"> <script LANGUAGE='JavaScript'> document.ns = navigator.appName == "Microsoft Internet Explorer"; function showStr(str,textWidth,num) { if(!document.ns) { document.write(str[0]+'<br>') } else { var wrt=""; wrt+='<table border=0 cellspacing=0 cellpadding=0>'; wrt+='<tr><td>'; wrt+='<div id="icefable1'+num+'">'; wrt+='<table width='+textWidth+' border=0 cellspacing=0 cellpadding=0>'; for (var i in str) { wrt+='<tr><td height=20>'+str[i]+'</td></tr>'; } scroll_num=i; wrt+='</table>'; wrt+='</div>'; wrt+='<div id="icefable2'+num+'" style="position:absolute;z-index:1;visibility:hidden"></div>'; wrt+='</td></tr>'; wrt+='</table>'; [...]]]> http://www.songlecn.com/2009/04/703/feed/ 0 效果好并实用的相册展示JS代码 http://www.songlecn.com/2009/04/693/ http://www.songlecn.com/2009/04/693/#comments Tue, 07 Apr 2009 02:46:11 +0000 船长 http://www.songlecn.com/?p=693 http://www.songlecn.com/2009/04/693/feed/ 0 实用可拖动的日历js+css代码 http://www.songlecn.com/2009/04/672/ http://www.songlecn.com/2009/04/672/#comments Fri, 03 Apr 2009 17:30:49 +0000 船长 http://www.songlecn.com/?p=672 http://www.songlecn.com/2009/04/672/feed/ 0 实用的在当前页放大图片js+css代码 http://www.songlecn.com/2009/04/671/ http://www.songlecn.com/2009/04/671/#comments Thu, 02 Apr 2009 17:30:44 +0000 船长 http://www.songlecn.com/?p=671 http://www.songlecn.com/2009/04/671/feed/ 1 MagicZoom图片放大效果JS代码 http://www.songlecn.com/2009/04/670/ http://www.songlecn.com/2009/04/670/#comments Wed, 01 Apr 2009 17:30:01 +0000 船长 http://www.songlecn.com/?p=670 http://www.songlecn.com/2009/04/670/feed/ 0 能挡住下拉表单的CSS+JS下拉菜单 http://www.songlecn.com/2009/04/669/ http://www.songlecn.com/2009/04/669/#comments Tue, 31 Mar 2009 17:30:28 +0000 船长 http://www.songlecn.com/?p=669 http://www.songlecn.com/2009/04/669/feed/ 0 js顶部滚动条 http://www.songlecn.com/2009/03/668/ http://www.songlecn.com/2009/03/668/#comments Mon, 30 Mar 2009 17:30:32 +0000 船长 http://www.songlecn.com/?p=668 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 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" /> <title>顶部滚动条</title> </head> <body> <marquee id="alertit" style="position:absolute;left:0px;top:0;background-color:#FFFFE6" onMouseover="this.scrollAmount=1" onMouseout="this.scrollAmount=speed"></marquee> <script type="text/javascript"> //Customize your message here. Use any HTML desired: var themsg='<span style="font:italic 22px Arial;color:red;"><b>Breaking News: Microsoft Stock up 10 points! Source: <a href="http://cnn.com" target="_new">CNN</a></b></span>' var speed=6 //speed of scroller [...]]]> http://www.songlecn.com/2009/03/668/feed/ 0 js打字机效果加强版 http://www.songlecn.com/2009/03/667/ http://www.songlecn.com/2009/03/667/#comments Sun, 29 Mar 2009 17:25:19 +0000 船长 http://www.songlecn.com/?p=667 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 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" /> <title>打字机效果加强版</title> </head> <body> <form name="news"> <textarea name="news2" cols=40 rows=4 wrap=virtual></textarea> </form> <script language=JavaScript> var newsText = new Array(); newsText[0] = "Typing Text JScript v1\nDeveloped on Sunday, April 15th, 2001..."; newsText[1] = "This is a text-typing DHTML demo. \nScript [...]]]> http://www.songlecn.com/2009/03/667/feed/ 0 js打字机效果 http://www.songlecn.com/2009/03/666/ http://www.songlecn.com/2009/03/666/#comments Sat, 28 Mar 2009 17:25:36 +0000 船长 http://www.songlecn.com/?p=666 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 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" /> <title>打字机效果</title> </head> <body> <script language="JavaScript"> var max=0; function textlist() { max=textlist.arguments.length; for (i=0; i<max; i++) this[i]=textlist.arguments[i]; } tl=new textlist ( "欢迎来到web集结号!" ); var x=0; pos=0; var l=tl[0].length; function textticker() { document.tickform.tickfield.value=tl[x].substring(0,pos)+"_"; if(pos++==l) { pos=0; setTimeout("textticker()",1000); x++; if(x==max) x=0; [...]]]> http://www.songlecn.com/2009/03/666/feed/ 0 js动态公告板 http://www.songlecn.com/2009/03/665/ http://www.songlecn.com/2009/03/665/#comments Fri, 27 Mar 2009 17:25:20 +0000 船长 http://www.songlecn.com/?p=665 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 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" /> <title>Message Slideshow</title> </head> <body> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="slideshow"><div align="center"><center><p><b>公告板</b><br><textarea rows="5" name="S1" cols="30" wrap="virtual"></textarea><br> <input type="button" value="Take me there!" name="B1" onClick="window.location=messagelinks[curmsg]"></p> </center></div> </form> </td> </tr> </table> <script> var curmsg=-1 var messages=new Array() messages[0]="第一条" messages[1]="第二条" messages[2]="第三条" [...]]]> http://www.songlecn.com/2009/03/665/feed/ 0 鼠标放上时可伸缩BANNER广告 http://www.songlecn.com/2009/03/649/ http://www.songlecn.com/2009/03/649/#comments Thu, 26 Mar 2009 01:50:48 +0000 船长 http://www.songlecn.com/?p=649 http://www.songlecn.com/2009/03/649/feed/ 0 表头过滤(Table filter) http://www.songlecn.com/2009/03/609/ http://www.songlecn.com/2009/03/609/#comments Tue, 24 Mar 2009 02:49:30 +0000 船长 http://www.songlecn.com/?p=609 http://www.songlecn.com/2009/03/609/feed/ 0 简单的js版DatePicker(日期选择框) http://www.songlecn.com/2009/03/578/ http://www.songlecn.com/2009/03/578/#comments Mon, 23 Mar 2009 02:16:19 +0000 船长 http://www.songlecn.com/?p=578 function runcode_open_new(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); } function runcode_copy(element) { var codeobj = document.getElementById(element); var meintext = codeobj.value; try { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netscape) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'] .createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'] .createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/unicode'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"] .createInstance(Components.interfaces.nsISupportsString); var copytext=meintext; str.data=copytext; trans.setTransferData("text/unicode",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard); } } catch (e) {alert('因为安全策略的原因，此项功能已被您的浏览器禁止。关闭此窗口，然后按下“Ctrl+C”组合键完成复制。'); codeobj.focus(); } codeobj.select(); return false; } 简单的js版DatePicker(日期选择框)，可以试着用用，如果你没有使用别的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" /> <title>JavaScript image clock</title> <style type="text/css"> .ds_box { background-color: #FFF; border: 1px solid #000; position: absolute; z-index: 32767; } .ds_tbl { background-color: #FFF; } .ds_head { background-color: #333; color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-align: [...]]]> http://www.songlecn.com/2009/03/578/feed/ 1 仿瑞星网站导航菜单 http://www.songlecn.com/2009/03/569/ http://www.songlecn.com/2009/03/569/#comments Sun, 22 Mar 2009 06:39:37 +0000 船长 http://www.songlecn.com/?p=569 http://www.songlecn.com/2009/03/569/feed/ 0