js | ICOjump - 交互设计是衔接用户与产品的工具

今天在经典论坛，前台脚本区转悠，看到了了一个帖子，于是就写了一小段，自己也保存一下，就发上来了。
地址在这 http://bbs.blueidea.com/viewthread.php?tid=2852336&pid=3985051&page=1&extra=page%3D1
问题描述：想实现的效果是鼠标放到0000上时 0000变成蓝色鼠标移走时蓝色不变当鼠标移动到 1111上时 1111变成蓝色其他的都变成#888214也就是原来那种颜色
查看全文 »

0个评论标签: asp , blueidea , javascript , js , php

简单的层登录框，与登陆完成效果

2008年04月25日

在经典论坛又看到一个效果，最近喜欢上了前台，也把这个效果给学习了一下，并且增加了一些新的东西。咋们先看效果吧

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta NAME="Generator" CONTENT="EditPlus"/> <meta NAME="Author" CONTENT=""/> <meta NAME="Keywords" CONTENT=""/> <meta NAME="Description" CONTENT=""/> </head> <style type="text/css"> body,div{ margin:0;padding:0;} #cake{ display:none; background:#000; position:absolute; z-index:1000; width:100%; height:100%; filter:Alpha(opacity=50); } #view_content{ display:none; position: absolute; width: 100%; padding-top: 20%; z-index: 1001; left:0px; top:0px; } #view_content table{ background: #ff7300; font-size:14px; filter:progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true); } #view_content table tbody{ background:#FEB16B; } #check{ display:none; position: absolute; width: 300px; font-size:12px; padding:2px; margin: -50px 0 0 -150px; z-index: 1002; left:50%; top:40%; text-align:center; border:3px solid #0CF; background:#fff; } </style> <script type="text/javascript"> function openCake(){ document.getElementById('cake').style.display='block'; document.getElementById('view_content').style.display='block'; } function loginCake(){ document.getElementById('check').style.display='block'; setTimeout("changeP(check)",3000); } function changeP(o){ document.getElementById('check').innerHTML="!!!!登陆完成!!!!!,5秒钟后退出"; setTimeout("closeCake()",3000); } function closeCake(){ document.getElementById("cake").style.display="none"; document.getElementById("view_content").style.display="none"; document.getElementById('check').style.display='none'; } </script> <body> <div id="cake"></div> <div id="view_content"> <table align="center"> <thead> <tr> <td>登录框</td> <td align="right"><button class="out" onclick="closeCake()">x</button></td> </tr> </thead> <tbody> <tr> <td>用户名</td> <td><input type="text" name="username" /></td> </tr> <tr> <td>密 码</td> <td><input type="text" name="pwd" /></td> </tr> </tbody> <tfoot> <tr> <td colspan="2" ><button onclick="loginCake()">确定登陆</button></td> </tr> </tfoot> </table> </div> <div id="check">登录中....</div> <div id="wrap"> <button onclick="openCake()">点击登陆</button> 这是一个小小的测试 </div> </body> </html>

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

效果其实很简单，就是一个登陆框，类似鲜果的登陆。不过鲜果做到了在FF下还是一样的半透明效果，我还未增加此效果。我在代码上面做了些注释，放上来，大家一起学习下，感觉代码还能再精简，可惜小弟不才，希望高手能够改善。
查看全文 »

0个评论标签: css , javascript , js

学习笔记:打开关闭动画效果

2008年04月21日

效果原帖在这：http://bbs.blueidea.com/viewthread.php?tid=2844175&extra=&page=1
我主要是自己在学习这段脚本的时候，给自己弄个小档案，同时也写了注释，方便自己，也分享给大家。

先预览下效果：

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta NAME="Generator" CONTENT="EditPlus"/> <meta NAME="Author" CONTENT=""/> <meta NAME="Keywords" CONTENT=""/> <meta NAME="Description" CONTENT=""/> </head> <style type="text/css"> .od{ border:2px solid #000; background:#666; color:#fff; padding:3px 5px; font-size:12px; } #fd{ border:2px solid blue; color:#000; margin-top:2px; margin-left:2px; background:#99FF00; position:absolute; left:20px; top:50px; cursor:move; float:left; } </style> <body> <div id="body"> <a href="#" class="od" onclick = "show('fd');">[打开层]</a> <a href="#" class="od" onclick = "closed('fd');">[关闭层]</a> </div> <div id="fd" style="display:none;filter:alpha(opacity=50);opacity:1;">移动层</div> </body> <script type="text/javascript"> var oWE="500"; //层的宽度 var oHE="200"; //层的高度 var proX; var proY; //打开层fd function show(id){ clearInterval(proX); clearInterval(proY); //先定义将要展开层(fd)的属性,包括高度，长度。 o=document.getElementById(id); o.style.display="block"; o.style.width="1px"; o.style.height="1px"; proX=setInterval(function(){openX(o,oWE)},10); } //层fd的宽度 function openX(o,x){ oWN=parseInt(o.style.width); //parseInt 将变量转换为整数 if (x > oWN){ o.style.width=oWN+Math.ceil((x-oWN)/5)+"px"; //Math.ceil((x-oWN)/5) 这个我的理解是步长,让层变宽时候的效果有渐进的效果.如果您不理解，可以将这个整条更换为 oWN + 10 + "px" 这样，他就会每次以10px变宽了。 }else{ clearInterval(proX); proY=setInterval(function(){openY(o,oHE)},10); } } //层fd的高度 function openY(o,y){ oHN=parseInt(o.style.height); if (y > oHN){ o.style.height=oHN+Math.ceil((y-oHN)/5)+"px"; }else{ clearInterval(proY); } } //关闭层fd function closed(id){ clearInterval(proX); clearInterval(proY); o=document.getElementById(id); if (o.style.display=="block"){ proYc=setInterval(function(){closeY(o)},10);//先关闭y轴,再关闭x轴 } } function closeY(o){ oHN=parseInt(o.style.height); if (oHN > 0){ o.style.height= (oHN - Math.ceil(oHN/5))+"px"; }else{ clearInterval(proYc); proXc=setInterval(function(){closeX(o)},10); } } function closeX(o){ oWN=parseInt(o.style.width); if (oWN > 0){ o.style.width=(oWN- Math.ceil(oWN/5))+ "px"; }else{ clearInterval(proXc); o.style.display="none"; } } </script> </html>

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

查看全文 »

0个评论标签: javascript , js , php

ICOjump – 交互设计是衔接用户与产品的工具

今天的jquery实用小功能“根据页面切换特定导航”。。。

层上下移动的效果

[存档]一个js效果。

简单的层登录框，与登陆完成效果

学习笔记:打开关闭动画效果

这里都有我

分类

标签云

最新文章