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

[存档]一个js效果。

2008年05月05日

今天在经典论坛，前台脚本区转悠，看到了了一个帖子，于是就写了一小段，自己也保存一下，就发上来了。
地址在这 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月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

php开源统计系统 piwik

2008年04月07日

在 “wappblog”看到文章《Piwik：基于PHP技术构建的开源网页访问统计系统》。

Piwik是一款利用Php+MySQL技术构建的开源网页访问统计系统，它的目标就是想成为Google Analytics的替代品，而它的前身就是phpMyVisites。


Piwik可以给你详细的统计信息，比如网页浏览人数, 访问最多的页面, 搜索引擎关键词等等，并且采用了大量的AJAX技术，使得在操作上变更加便易。另外，它还采用了插件扩展及开放API模式，这样开发者就可根据自已的需求来创建更多的功能，

官方网站：http://piwik.org/ DEMO地址：http://piwik.org/demo/ 下载地址： http://piwik.org/last.zip

0个评论标签: ajax , mysql , php

表格标签的合理应用

2008年03月28日

去年5月30日写了一篇读后感在经典论坛《[笔记]css2对表格增加的一些东东》
现在就把它移植过来啦。

—————————————————————————

在N年前，提起表格，多数人想到的应该是布局，包括我自己，以前用dreamwear，表格是一个套一个，一个接一个的用。
不过接触了网页标准之后，发现表格更合理的用处应该是“显示数据”，为什么呢？
我们先来看看传统表格格式。
传统的表格常用的就只有 table， tr， td，分别为对象，行，单元格