js效果大全

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>自动切换选项卡</title> <style type="text/css"> *{list-style:none;margin:0;padding:0;overflow:hidden} .tab1{width:401px;border-top:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;margin:50px 200px;} .menu{width:400px;background:#eee;height:28px;border-right:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;} li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#A8C29F solid 1px;color:#666;font-size:14px;overflow:hidden} .menudiv{width:399px;height:300px;border-left:#A8C29F solid 1px;border-right:#A8C29F solid 1px;border-top:0;background:#fefefe} .menudiv div{padding:15px;line-height:28px;} .off{background:#E0E2EB;color:#336699;font-weight:bold} </style> <script type="text/javascript"> function setTab(name,cursel){ cursel_0=cursel; for(var i=1; i<=links_len; i++){ var menu = document.getElementById(name+i); var menudiv = document.getElementById("con_"+name+"_"+i); if(i==cursel){ menu.className="off"; menudiv.style.display="block"; } else{ menu.className=""; menudiv.style.display="none"; } } } function Next(){ cursel_0++; if (cursel_0>links_len)cursel_0=1 setTab(name_0,cursel_0); } var name_0='one'; var cursel_0=1; var ScrollTime=3000;//循环周期（毫秒） var links_len,iIntervalId; onload=function(){ var links = document.getElementById("tab1").getElementsByTagName('li') links_len=links.length; for(var i=0; i<links_len; i++){ links[i].onmouseover=function(){ clearInterval(iIntervalId); this.onmouseout=function(){ iIntervalId = setInterval(Next,ScrollTime);; } } } document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){ clearInterval(iIntervalId); this.onmouseout=function(){ iIntervalId = setInterval(Next,ScrollTime);; } } setTab(name_0,cursel_0); iIntervalId = setInterval(Next,ScrollTime); } </script> </head> <body> <div class="tab1" id="tab1"> <div class="menu"> <ul> <li id="one1" onclick="setTab('one',1)">欢迎</li> <li id="one2" onclick="setTab('one',2)">新闻</li> <li id="one3" onclick="setTab('one',3)">介绍</li> <li id="one4" onclick="setTab('one',4)">祝福</li> </ul> </div> <div class="menudiv"> <div id="con_one_1"><h4 style="color:red">欢迎你来到我们的网站，JS效果大全欢迎您~</h4></div> <div id="con_one_2" style="display:none;"><h4 style="color:red">新闻1+1，快乐属于您</h4></div> <div id="con_one_3" style="display:none;"><h4 style="color:red">会自动切换的选项卡，很不错。</h4></div> <div id="con_one_4" style="display:none;"><h4 style="color:red">希望再来www.tonjay.com/js，再见！</h4></div> </div> </div> </body>

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

会自动循环切换的选项卡效果.会自动循环切换的滑动门效果.

标签：网站常用js特效自动切换选项卡js效果

网页右下角渐隐渐现浮动窗口效果

日期：2011-03-14分类：js窗口图层评论：没有评论浏览：1,149 views

<!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>javascript无法屏蔽的网页右下角渐隐渐现浮动窗口效果-www.tonjay.com/js|js效果大全</title> <meta http-equiv="content-type" content="text/html;charset=gb2312">  <style type="text/css"> #msg_win{border:1px solid #A67901;background:#EAEAEA;width:240px;position:absolute;right:0;font-size:12px;font-family:Arial;margin:0px;display:none;overflow:hidden;z-index:99;} #msg_win .icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;} .icos a{float:left;color:#833B02;margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;} .icos a:hover{color:#fff;} #msg_title{background:#FECD00;border-bottom:1px solid #A67901;border-top:1px solid #FFF;border-left:1px solid #FFF;color:#000;height:25px;line-height:25px;text-indent:5px;} #msg_content{margin:5px;margin-right:0;width:230px;height:126px;overflow:hidden;} </style> </head> <body> <div style="height:1200px;"></div>  <div id="msg_win" style="display:block;top:490px;visibility:visible;opacity:1;"> <div class="icos"><a id="msg_min" title="最小化" href="javascript:void 0">_</a><a id="msg_close" title="关闭" href="javascript:void 0">×</a></div> <div id="msg_title">www.tonjay.com/js</div> <div id="msg_content">javascript无法屏蔽的网页右下角渐隐渐现浮动窗口效果-www.tonjay.com/js|js效果大全</div> </div> <script language="javascript"> var Message={ set: function() {//最小化与恢复状态切换 var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'恢复']; this.minbtn.status=set[0]; this.win.style.borderBottomWidth=set[1]; this.content.style.display =set[2]; this.minbtn.innerHTML =set[3] this.minbtn.title = set[4]; this.win.style.top = this.getY().top; }, close: function() {//关闭 this.win.style.display = 'none'; window.onscroll = null; }, setOpacity: function(x) {//设置透明度 var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')'; this.win.style.visibility = x<=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug this.win.style.filter = v; this.win.style.opacity = x / 100; }, show: function() {//渐显 clearInterval(this.timer2); var me = this,fx = this.fx(0, 100, 0.1),t = 0; this.timer2 = setInterval(function() { t = fx(); me.setOpacity(t[0]); if (t[1] == 0) {clearInterval(me.timer2) } },10); }, fx: function(a, b, c) {//缓冲计算 var cMath = Math[(a - b) > 0 ? "floor": "ceil"],c = c || 0.1; return function() {return [a += cMath((b - a) * c), a - b]} }, getY: function() {//计算移动坐标 var d = document,b = document.body, e = document.documentElement; var s = Math.max(b.scrollTop, e.scrollTop); var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight; var h2 = this.win.offsetHeight; return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'} }, moveTo: function(y) {//移动动画 clearInterval(this.timer); var me = this,a = parseInt(this.win.style.top)||0; var fx = this.fx(a, parseInt(y)); var t = 0 ; this.timer = setInterval(function() { t = fx(); me.win.style.top = t[0]+'px'; if (t[1] == 0) { clearInterval(me.timer); me.bind(); } },10); }, bind:function (){//绑定窗口滚动条与大小变化事件 var me=this,st,rt; window.onscroll = function() { clearTimeout(st); clearTimeout(me.timer2); me.setOpacity(0); st = setTimeout(function() { me.win.style.top = me.getY().top; me.show(); },600); }; window.onresize = function (){ clearTimeout(rt); rt = setTimeout(function() {me.win.style.top = me.getY().top},100); } }, init: function() {//创建HTML function $(id) {return document.getElementById(id)}; this.win=$('msg_win'); var set={minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content: 'msg_content'}; for (var Id in set) {this[Id] = $(set[Id])}; var me = this; this.minbtn.onclick = function() {me.set();this.blur()}; this.closebtn.onclick = function() {me.close()}; this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体 this.minbtn.innerHTML=this.char[0]; this.closebtn.innerHTML=this.char[2]; setTimeout(function() {//初始化最先位置 me.win.style.display = 'block'; me.win.style.top = me.getY().foot; me.moveTo(me.getY().top); },0); return this; } }; Message.init(); </script> </body> </html>

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

javascript无法屏蔽的网页右下角渐隐渐现浮动窗口效果,右下角弹出框js代码，弹出框效果。直接复制代码即可使用！

标签： js窗口图层右下角弹出框浮动窗口效果

腾讯QQ登录弹出框js效果，弹出窗口js代码

日期：2011-03-11分类：js窗口图层评论：没有评论浏览：1,704 views

: 腾讯登录弹出框js效果，弹出窗口js代码

腾讯登录弹出框js效果，弹出窗口js代码！窗口变成灰色且无法点击！是本人从腾讯官网上“扒”出来，已经去除不必要的冗长代码！如果更改iframe调用内容，请在index.htm文件内修改，还要在inc.js文件下第140行内修改路径！继续阅读 »

标签：弹出窗口js代码腾讯QQ登录弹出窗口

新闻列表单行多行简洁向上滚动js效果

日期：2011-03-01分类：网站常用js特效评论：没有评论浏览：1,415 views

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>新闻列表单行滚动js效果，者多行滚动js效果，超简洁</title> <style> a{display:block;line-height:18px;text-decoration:none;color:#f00;font-family:Arial;font-size:12px;} a:hover{text-decoration:underline;} .shell{width:220px; } #div1{height:72px;overflow:hidden;} </style> </head> <body> <div class="shell"> <div id="div1"> <a href="http://www.tonjay.com/js">1jQuery的图片滚动切换插件</a> <a href="http://www.tonjay.com/js">2Mootools slider 滚动条拖动取值的实现 </a> <a href="http://www.tonjay.com/js">3VB开发的Eclipse编程软件完整版</a> <a href="http://www.tonjay.com/js">4VC++生成随机数并快速排序的算法</a> <a href="http://www.tonjay.com/js">5VB语音报数计算器源程序</a> <a href="http://www.tonjay.com/js">6jQuery的图片滚动切换插件</a> <a href="http://www.tonjay.com/js">7Mootools slider 滚动条拖动取值的实现 </a> <a href="http://www.tonjay.com/js">8VB开发的Eclipse编程软件完整版</a> <a href="http://www.tonjay.com/js">9VC++生成随机数并快速排序的算法</a> </div> <div> <script type="text/javascript">/*Js—AD*/ var cpro_id = 'u360072';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script> <p style="font-size:18px;font-family:微软雅黑;">修改说明：#div1里的高度（72px）即是你需要显示的行数<br/> js里的18即是要滚动的行高；1500即是每次滚动所需要的时间，越大则速度越慢！ <a href="http://www.tonjay.com/js">Js大全</a>注！<p/> </body> <script> var c,_=Function; with(o=document.getElementById("div1")){ innerHTML+=innerHTML; onmouseover=_("c=1"); onmouseout=_("c=0");} (F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))(); </script> </html>

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

新闻列表单行滚动js效果，者多行滚动js效果，超简洁
注：经测试兼容Ie6、7、8，FF以及谷歌浏览器！

标签：单行向上滚动多行向上滚动网站常用js特效

文章内容字体大中小字号转换和背景切换

日期：2011-01-25分类：网站常用js特效评论：没有评论浏览：1,137 views

文章内容页字号切换和背景切换

继续阅读 »

标签：字体大中小字号转换背景切换

横向Js下拉菜单，Js二级横向菜单

日期：2011-01-22分类：js导航菜单特效评论：没有评论浏览：1,872 views

<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css菜单演示</title> <style type="text/css">  </style> <script type=text/javascript><![CDATA[//><!]]></script> </head> <body> <ul id="nav"> <li><a href="www.tonjay.com/js">菜单一级</a> <ul> <li><a href="www.tonjay.com/js">菜单一级</a></li> <li><a href="www.tonjay.com/js">菜单一级</a></li> <li><a href="www.tonjay.com/js">菜单一级</a></li> <li><a href="www.tonjay.com/js">菜单一级</a></li> <li><a href="www.tonjay.com/js">菜单一级</a></li> <li><a href="www.tonjay.com/js">菜单一级</a></li> </ul> </li> <li><a href="www.tonjay.com/js">菜单二级</a> <ul> <li><a href="www.tonjay.com/js">菜单二级</a></li> <li><a href="www.tonjay.com/js">菜单二级</a></li> <li><a href="www.tonjay.com/js">菜单二级</a></li> <li><a href="www.tonjay.com/js">菜单二级服</a></li> <li><a href="www.tonjay.com/js">菜单二级</a></li> <li><a href="www.tonjay.com/js">菜单二级</a></li> </ul> </li> <li><a href="www.tonjay.com/js">菜单三级</a> <ul> <li><a href="www.tonjay.com/js">菜单三级</a></li> <li><a href="www.tonjay.com/js">菜单三级</a></li> <li><a href="www.tonjay.com/js">菜单三级</a></li> <li><a href="www.tonjay.com/js">菜单三级</a></li> </ul> </li> <li><a href="www.tonjay.com/js">菜单四级</a> <ul> <li><a href="www.tonjay.com/js">菜单四级</a></li> <li><a href="www.tonjay.com/js">菜单四级</a></li> <li><a href="www.tonjay.com/js">菜单四级</a></li> <li><a href="www.tonjay.com/js">菜单四级</a></li> <li><a href="www.tonjay.com/js">菜单四级</a></li> </ul> </li> </ul> js效果大全 <div style="display:block;"> <script type="text/javascript">/*Js—AD*/ var cpro_id = 'u360072';</script> <script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script> </div> </body> </html>

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

注：经测试兼容Ie6、7、8，FF以及谷歌浏览器！

标签： js菜单特效横向Js下拉菜单

第 2 页，共 2 页12

js效果大全

带控制按钮左右滑动文字js效果

select下拉菜单美化

鼠标经过时特效，图片渐变成另外一张图片

网站顶部大图广告显示数秒后隐藏后显示小图

自动切换选项卡js效果

网页右下角渐隐渐现浮动窗口效果

腾讯QQ登录弹出框js效果，弹出窗口js代码

新闻列表单行多行简洁向上滚动js效果

文章内容字体大中小字号转换和背景切换

横向Js下拉菜单，Js二级横向菜单

公告

最新日志

最新评论

热门日志

日志存档

标签云

链接表

博客管理