分享一些代码

由 admin 在 2010年02月16日发布发表评论 (20) 查看评论

这些代码都挺有意思的，因为我是菜鸟，所以要慢慢的学习学习，哈哈，老鸟莫笑~~~

一、右下角弹窗

提示：您可以先修改部分代码再运行

二、传统的javascript做的focus效果

提示：您可以先修改部分代码再运行

三、中规中矩简单版四方向无缝滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p> <p><script type="text/javascript"> Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; }; }; var isIE = ("\v"=="v") ? true : false; var $EL = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create:function(){ return function(){this.initialize.apply(this, arguments);} } }; var Event = function(e){ var oEvent = isIE ? window.event : e; return oEvent; }; var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args); }; }; var BindAsEventListener = function(object, fun) { return function(event) { return fun.call(object, Event(event)); }; }; var addEventHandler = function(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; var MarqueeTE = Class.create(); MarqueeTE.prototype = { setOptions:function(options){ this.options = { rollContainer:"", rollEmbody:"", rollClone:"", dynTimer:false, direction:"top", speed:1, timer:5 }; Object.extend(this.options,options || {}); }, initialize:function(options){ this.setOptions(options); this.dynTimer = this.options.dynTimer; this.rollContainer = $EL(this.options.rollContainer); this.rollEmbody = $EL(this.options.rollEmbody); this.rollClone = $EL(this.options.rollClone); this.rollClone.innerHTML = this.rollEmbody.innerHTML; this.direction = this.options.direction.toLowerCase(); this.maxValue = this.getScrollMaxValue(); this.delta = 0; this.to = false; if(this.direction == "left" || this.direction == "right"){ this.bothSidesDiv = document.createElement("div"); this.bothSidesDiv.className = "bothSides"; this.rollContainer.appendChild(this.bothSidesDiv); this.bothSidesDiv.style.width = this.rollEmbody.getElementsByTagName("img")[0].offsetWidth * this.rollEmbody.getElementsByTagName("img").length * 2 + "px"; this.bothSidesDiv.appendChild(this.rollEmbody); this.bothSidesDiv.appendChild(this.rollClone); }; addEventHandler(this.rollContainer, "mouseover", BindAsEventListener(this, this.stopHandle)); addEventHandler(this.rollContainer, "mouseout", BindAsEventListener(this, this.startHandle)); this.startHandle(); }, getScrollMaxValue:function(){ switch(this.direction){ case "bottom": case "top": return this.rollEmbody.getElementsByTagName("img")[0].offsetHeight; break; case "left": case "right": return this.rollEmbody.getElementsByTagName("img")[0].offsetWidth; }; }, moveHandle:function(){ var that = this; var curFn = function(){ var to = false; if(that.delta >= that.maxValue){ that.stopHandle(); that.delta = 0; that.to = setTimeout(Bind(that, that.startHandle), 1000); }; }; switch(this.direction){ case "top": if(this.rollClone.offsetTop - this.rollContainer.scrollTop <= 0){ this.rollContainer.scrollTop -= this.rollEmbody.offsetHeight; }else{ this.rollContainer.scrollTop += this.options.speed; this.delta += this.options.speed; curFn(); }; break; case "bottom": if(this.rollEmbody.offsetTop - this.rollContainer.scrollTop >= 0){ this.rollContainer.scrollTop += this.rollClone.offsetHeight; }else{ this.rollContainer.scrollTop -= this.options.speed; this.delta += this.options.speed; curFn() }; break; case "left": if(this.rollClone.offsetWidth - this.rollContainer.scrollLeft <= 0){ this.rollContainer.scrollLeft -= this.rollEmbody.offsetWidth; }else{ this.rollContainer.scrollLeft += this.options.speed; this.delta += this.options.speed; curFn(); }; break; case "right": if(this.rollContainer.scrollLeft <= 0){ this.rollContainer.scrollLeft += this.rollClone.offsetWidth; }else{ this.rollContainer.scrollLeft -= this.options.speed; this.delta += this.options.speed; curFn(); }; break; }; }, startHandle:function(){ if(this.dynTimer){ this.stopHandle(); }; this.dynTimer = setInterval(Bind(this, this.moveHandle), this.options.timer); }, stopHandle:function(){ clearInterval(this.dynTimer); if(this.to){ clearTimeout(this.to); }; } }; </script></p> <style type="text/css"> html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td{ margin:0; padding:0; } #testDiv_1,#testDiv_2,#testDiv_3,#testDiv_4{ overflow:hidden; margin:0px auto 30px auto; } #testDiv_1{ width:944px; height:100px; } #testDiv_2{ width:366px; height:184px; } #testDiv_3{ width:155px; height:205px; } #testDiv_4{ width:366px; height:184px; } .bothSides div{ float:left; } </style> <p></head><br /> <body></p> <div id="testDiv_1"> <div id="testDiv_1_1"><img src="http://www.mocartoon.com/images/gg01.gif" width="944" height="100" /><img src="http://www.mocartoon.com/images/gg03.jpg" width="944" height="100" /><img src="http://www.mocartoon.com/images/gg04.jpg" width="944" height="100" /></div> <div id="testDiv_1_2"></div> </div> <div id="testDiv_2"> <div id="testDiv_2_1"><img src="http://www.mocartoon.com/supermark/images/1.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/2.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/3.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/4.jpg" width="366" height="184" /></div> <div id="testDiv_2_2"></div> </div> <div id="testDiv_3"> <div id="testDiv_3_1"><img src="http://www.mocartoon.com/supermark/images/ebook1.gif" width="155" height="205" /><img src="http://www.mocartoon.com/supermark/images/ebook2.gif" width="155" height="205" /><img src="http://www.mocartoon.com/supermark/images/ebook3.gif" width="155" height="205" /><img src="http://www.mocartoon.com/supermark/images/ebook4.gif" width="155" height="205" /></div> <div id="testDiv_3_2"></div> </div> <div id="testDiv_4"> <div id="testDiv_4_1"><img src="http://www.mocartoon.com/supermark/images/1.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/2.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/3.jpg" width="366" height="184" /><img src="http://www.mocartoon.com/supermark/images/4.jpg" width="366" height="184" /></div> <div id="testDiv_4_2"></div> </div> <p><script type="text/javascript"> var a = new MarqueeTE({rollContainer:"testDiv_1",rollEmbody:"testDiv_1_1",rollClone:"testDiv_1_2",direction:"top",speed:5}); var b = new MarqueeTE({rollContainer:"testDiv_2",rollEmbody:"testDiv_2_1",rollClone:"testDiv_2_2",direction:"bottom"}); var c = new MarqueeTE({rollContainer:"testDiv_3",rollEmbody:"testDiv_3_1",rollClone:"testDiv_3_2",direction:"left",speed:5}); var d = new MarqueeTE({rollContainer:"testDiv_4",rollEmbody:"testDiv_4_1",rollClone:"testDiv_4_2",direction:"right"}); </script><br /> </body><br /> </html>

提示：您可以先修改部分代码再运行

四、天涯“顶部固定”代码

提示：您可以先修改部分代码再运行

五、上下伸缩效果

<html><br /> <head></p> <p></head><br /> <body ><br /> <script> function switchSysBar(){ var switchPoint=document.getElementById("switchPoint"); var frmTitle=document.getElementById("frmTitle") if (switchPoint.innerText=="3"){ switchPoint.innerText="4"; frmTitle.style.display="none" } else{ switchPoint.innerText="3"; frmTitle.style.display="block" } } </script></p> <table border="0" cellPadding="0" cellSpacing="0" height="100%" width="100%"> <tr> <td align="middle" noWrap vAlign="center" id="frmTitle">AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA </td> </tr> <tr> <td > 点击收缩后，不要将我藏起来啊！！可以吗？<br /> 点击收缩后，不要将我藏起来啊！！可以吗？<br /> 点击收缩后，不要将我藏起来啊！！可以吗？ </td> </tr> <tr> <td bgcolor="A4B6D7" style="HEIGHT: 9pt"> <table border="0" cellPadding="0" cellSpacing="0" width="100%"> <tr> <td style="WIDTH: 100%" onClick="switchSysBar()"> <font style="FONT-SIZE: 9pt; CURSOR: default; COLOR: #ffffff"><br /> <span class="navPoint" id="switchPoint" title="关闭/打开左栏">3</span><br /> </font></td> </tr> </table> </td> </tr> <tr> <td style="HEIGHT: 100%"> <center> <p>下边BBBBBBBBBBBBBBB：</p> <p>如何改成上边/下边效果？？？</p> <p>当点击制作条时，上面部分收藏起来。！</p> <p> </p> <p> </p> </td> </tr> </table> <p></body><br /> </html>

提示：您可以先修改部分代码再运行

六、左右伸缩效果

<html><br /> <head></p> <p></head><br /> <body style="MARGIN: 0px" scroll=no onResize=javascript:parent.carnoc.location.reload()><br /> <script> if(self!=top){top.location=self.location;} function switchSysBar(){ if (switchPoint.innerText==3){ switchPoint.innerText=4 document.all("frmTitle").style.display="none" }else{ switchPoint.innerText=3 document.all("frmTitle").style.display="" }} </script></p> <table border="0" cellPadding="0" cellSpacing="0" height="100%" width="100%"> <tr> <td align="middle" noWrap vAlign="center" id="frmTitle">左边列表AAAAAAAAAA</td> <td bgcolor="A4B6D7" style="WIDTH: 9pt"> <table border="0" cellPadding="0" cellSpacing="0" height="100%"> <tr> <td style="HEIGHT: 100%" onClick="switchSysBar()"> <font style="FONT-SIZE: 9pt; CURSOR: default; COLOR: #ffffff"></p> <p> <span class="navPoint" id="switchPoint" title="关闭/打开左栏">3</span></p> <p> </font></td> </tr> </table> </td> <td style="WIDTH: 100%"> <p>右边BBBBBBBBBBBBBBB：</p> <p>如何改成上边/下边效果？？？</p> <p>当点击制作条时，上面部分收藏起来。！</p> <p> </p> <p> </p> </td> </tr> </table> <p></body><br /> </html>

提示：您可以先修改部分代码再运行

七、EasyInsert 4.0（动态添加input、select、自定义html）

Demo：http://I like jQuery.com/EasyInsert/
Download：http://asp-cwb.googlecode.com/files/EasyInsert-4.0.rar

八，还有两个文件上传系统也是非常棒的，哈哈，大家可以看看。

仿163网盘无刷新多文件上传系统：
http://www.cnblogs.com/cloudgamer/archive/2008/10/20/1314766.html

简便无刷新文件上传系统：
http://www.cnblogs.com/cloudgamer/archive/2009/12/01/Quick_Upload.html

真好网声明：
◎本站音乐仅供试听，请下载后在24小时内删除，请支持你喜欢的歌手，购买正版CD。
◎本站音乐皆从网上搜集转载，版权归唱片公司和歌手所有，如侵犯您的权益，请通知我们，我们将及时删除。
-------------------------------------------------------------------------------------------------------------------
欢迎加入独立博客QQ交流群：21372183

20 评论.

Firm 2010年02月16日于1:01 下午

呼呼，还搞弹窗

回复
叶松 2010年02月16日于5:28 下午

不错,谢谢分享
新年快乐!恭喜发财,红包拿来!哈哈!

回复
小辉网 2010年02月17日于7:19 下午

这些代码会影响速度吧。。

回复
Sept.31st 2010年02月17日于9:10 下午

不错啊，我也学习了～拜晚年了!

回复
笨笨 2010年02月18日于12:11 下午

嘿嘿谢谢分享，这些代码基本都见过O(∩_∩)O哈哈~

回复
三七八蛋 2010年02月18日于2:35 下午

天涯固定那个不错。

回复
晓龙在线 2010年02月18日于3:16 下午

不错的代码，可惜没有用上的。谢谢博主回访了我的博主

回复
daniel 2010年02月20日于9:27 上午

第一个点运行好像不行，什么时候开始研究这个东东了

回复
平平 2010年02月20日于12:34 下午

嗯不错就怕用的时候会有点问题啊

回复
捷利佳华 2010年02月21日于11:06 上午

新年快乐哈……

回复
goldapple 2010年02月21日于4:38 下午

挺实用的，我也收集了一些

回复
看南京 2010年02月21日于5:26 下午

= = 看得有点眼睛冒星星

回复
太阳博客 2010年02月22日于9:23 上午

俺是学不会了。

回复
疾风 2010年02月22日于10:48 上午

第一个运行代码出错了？

回复
huangjun 2010年02月22日于3:08 下午

博主，年过完了，快回来写博客~

回复
reizhi 2010年02月23日于8:34 下午

这几个代码框挺不错的

回复
追忆永恒 2010年02月26日于7:41 下午

没学过网页制作？这代码要加到哪里？

回复
晓龙在线 2010年02月27日于12:32 上午

最近关于新备案法，晓龙站长给工信部几点建议.
因为工信部3月底前正式实施网站备案信息当面拍照核验，2010年9

月底前,要完成全部网站的备案信息真实性核验,如果备案信息不真实

，将关闭网站并注销备案，有关我们个人网站存活
个人网站站长必关注的，文章联接

http://www.8080g.com/index.php/1450.html

回复
海天无影 2010年02月27日于9:33 上午

不错的代码收藏~

回复
淘宝网首页 2010年03月11日于5:30 下午

一些不错的代码，有意思的

回复

真好网

分享精彩生活每一天