0

photoshop超酷海报效果

Posted July 31st, 2006. Filed under Design


今天在蓝色经典看到一个超酷的电影海报效果
教程地址是：http://bbs.blueidea.com/viewthread.php?tid=2302296
主人公是哈里贝瑞(和我们家哈里同名………..)
我看了一下教程，然后自己根据最终效果想象用了哪些特效，我的最终效果图如上
跟教程还是有一些差距哈，主要是因为用画笔描那些暗线效果的时候我sb了
控制不好鼠标。。。。。。
所以就没做得那么神秘悠远了…大家凑合着看。

原图如下：

0

纯css打造photo album

Posted July 31st, 2006. Filed under xhtml/css

今天在网上看到一个用纯css写的相册，很受启发，之前没有太深入研究过用css去创造一些新东西，其实用css的伪类完全可以模仿一些js的行为，比如a:hover就可以替代js的onmouseover，下面就给大家看一下我写的这个简单相册效果的例子,主要是改变a:hover的样式使图片恢复到原始尺寸。
程序代码

  1. <title>纯css相册效果-----www.achome.cn-----Satellite Of Love</title>
  2. <style>
  3. body{font-size:11px;font-family:Verdana;color:#666;}
  4. li{list-style:none;float:left;}
  5. ul li img{width:80px;height:80px;padding:20px;border:10px solid #eee;}
  6. a:link,a:visited{}
  7. a:hover{width:458px;}
  8. a:hover img{width:458px;height:auto;}
  9. 把鼠标停留在图片上体验纯css的相册效果
  10. <ul>
  11. <li><a href=""><img src="http://www.achome.cn/blog/pics/red_black.jpg" /></a></li>
  12. <li><a href=""><img src="http://www.achome.cn/blog/pics/red_black.jpg" /></a></li>
  13. <li><a href=""><img src="http://www.achome.cn/blog/pics/red_black.jpg" /></a></li>
  14. <li><a href=""><img src="http://www.achome.cn/blog/pics/red_black.jpg" /></a></li>
  15. <li><a href=""><img src="http://www.achome.cn/blog/pics/red_black.jpg" /></a></li>
  16. </ul>
0

写了一个flash的音乐播放器

Posted July 30th, 2006. Filed under Design

功能:播放音乐(播放/暂停/停止/上一首/下一首),无播放列表,无声音调节,无进度调节
平台:Flash MX2004

为什么我要做这个功能非常贫乏的flash播放器呢?
因为我要推出自己录制的歌曲……………………..
对不起,杀鸡用了牛刀…………………………………..

里面现在有两首歌,是我于2003年的某个季度录制的,大家一听就知道了………

纯属玩票,有喜欢的朋友也可以下载去用哈,添加歌曲的方法都在压缩包里:
http://www.achome.cn/example/mini_player/player.rar

p.s:播放器外观是我用miniplayer的外观ps了一下下,换了播放背景,改了两个按钮 :)

1

帮同事ps了两个新版本的图标

Posted July 28th, 2006. Filed under Design


今天同事让我帮忙ps了两个新版本的图标，主要是为了强调“新”版本，贴上来给大家看看，轻点拍哈，没什么设计理念，只是觉得好玩。

0

一个基于ajax的rss阅读器的雏形

Posted July 27th, 2006. Filed under Ajax


这两天忙着写项目需求文档，没怎么研究前台js的东西，今天下午稍微闲一点，于是决定自己研究一下rss，其实也没什么好研究的，主要的技术是ajax，rss的数据源只是一个规范的xml文档，只要用javascript对其进行解析就行了，实验很快就有了成果，不过还比较简陋，没有进行任何装饰，但希望能为正在学习ajax或者rss的朋友们提供一些参考，整个结构很简单，一个建立xmlhttprequest的函数，一个装载xml数据的函数，一个解析xml数据的函数，另外我要告诉大家的是在FIREFOX下，xmlhttp对象不能跨域访问，也就是说只能访问本地或者服务器端的文件，据说IE也将推出此功能，不过这确实不是太好的功能：（，看来rss阅读器都是下载xml文件到本地在解析的了。
js部分的代码如下：

  1. /*定义建立XMLHttpRequest的函数---------------------------------------------------------------开始*/
  2. function CreateXMLHttpRequest()
  3. {
  4. xmlhttp=false;
  5. if(window.XMLHttpRequest)//Mozilla,Sofari
  6.     {xmlhttp=new XMLHttpRequest();
  7.       if (xmlhttp.overrideMimeType)
  8.        {xmlhttp.overrideMimeType('text/xml');}
  9.     }
  10.     else if(window.ActiveXObject)//IE
  11.         {
  12.             try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");}
  13.             catch(e){
  14.                 try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
  15.                 catch(e){}
  16.                 }
  17.             }
  18. }           
  19. /*定义建立XMLHttpRequest的函数---------------------------------------------------------------结束*/
  20. /*定义建立检查URL数据的函数---------------------------------------------------------------开始*/
  21. function checkURL()
  22. {
  23.     if(document.getElementById("rssURL").value=="")
  24.     {
  25.         alert("url不能为空");
  26.         }
  27.         else
  28.             {
  29.                 var rssURL=document.getElementById("rssURL").value;
  30.                 document.getElementById("rssURL").value="";
  31.                 loadXML(rssURL);
  32.                 }
  33.     }
  34. /*定义建立检查URL数据的函数---------------------------------------------------------------结束*/   
  35. /*定义建立装载XML数据的函数---------------------------------------------------------------开始*/
  36. function loadXML(dataURL)
  37. {
  38.     CreateXMLHttpRequest();
  39.     if(!xmlhttp)
  40.     {
  41.         document.getElementById("msg").style.display="";
  42.         document.getElementById("msg").innerHTML="<fontcolor=\"red\">对不起,服务器有故障,不能传送数据!</font>";
  43.         return false;
  44.         }
  45.         else
  46.             {
  47.                 xmlhttp.onreadystatechange=readXML;
  48.                 //URL="http://feeds.feedburner.com/SatelliteOfLove";
  49.                 xmlhttp.open("post",dataURL,true);
  50.                 xmlhttp.send(null);
  51.                 }
  52.     }
  53. /*定义建立装载XML数据的函数---------------------------------------------------------------结束*/
  54.  
  55. /*定义建立解析XML数据的函数---------------------------------------------------------------开始*/   
  56. function readXML()
  57. {
  58.     if(xmlhttp.readyState==4)
  59.     {
  60.         if(xmlhttp.status==200)
  61.         {
  62.             var xmlDoc=xmlhttp.responseXML;//取回rss的xml数据
  63.             var pageData=document.getElementById("data");//建立一个数据层div
  64.            
  65.             var dataUnit=document.createElement("div");//建立一个单元数据层div
  66.             dataUnit.className="dataUnit";
  67.            
  68.             var rssInfo=document.createElement("div");//建立一个标题层div
  69.             rssInfo.className="rssInfo";
  70.             var rssTitle=xmlDoc.getElementsByTagName("title")[0].firstChild.nodeValue;//取得rss的标题值
  71.             rssInfo.innerHTML=rssTitle;
  72.             rssInfo.innerHTML="<img src=\"images/close.gif\" alt='关闭' onclick=\"this.parentNode.parentNode.style.display='none'\"/>"+rssInfo.innerHTML;
  73.             dataUnit.appendChild(rssInfo);//将rss的标题值插入标题层中
  74.            
  75.             var rssData=document.createElement("div");//建立一个单元数据层中的数据层div
  76.             rssData.className="rssData";
  77.             var dataUl=document.createElement("ul");
  78.            
  79.             var items=xmlDoc.getElementsByTagName("item");//取得xml的数据形成数组
  80.             for(i=0;i<10;i++)//对数组进行循环整理
  81.             {
  82.                 urlData=items[i].getElementsByTagName("link")[0].firstChild.nodeValue;//获取单条数据url
  83.                 titleData=items[i].getElementsByTagName("title")[0].firstChild.nodeValue;//获取单条数据title
  84.                
  85.                
  86.                 var dataChild=document.createElement("li");//建立一个标志li
  87.                 dataChild.setAttribute("title",titleData)
  88.                 dataText=document.createTextNode(titleData);//建立一个title的变量 用来保存title的值
  89.                 urlChild=document.createElement("a");//建立一个链接
  90.                
  91.                 dataChild.appendChild(urlChild);//插入一个链接
  92.                 urlChild.setAttribute("href",urlData);//设置链接的url属性
  93.                 urlChild.setAttribute("target","_blank")
  94.                 urlChild.appendChild(dataText);//插入title
  95.                 dataUl.appendChild(dataChild)//插入单条数据
  96.                 }
  97.                 rssData.appendChild(dataUl);
  98.                 dataUnit.appendChild(rssData);//在单元格中插入数据层
  99.                 pageData.appendChild(dataUnit);//把单元格插入页面;
  100.                 //alert(pageData.innerHTML);
  101.                 document.getElementById("msg").style.display="";
  102.                 document.getElementById("msg").innerHTML="数据装载完毕!";       
  103.         }
  104.        
  105.     }
  106.             else
  107.             {
  108.                 document.getElementById("msg").style.display="";
  109.                 document.getElementById("msg").innerHTML="<img src=\"images/loading.gif\" />数据装载中ing...";       
  110.                 }
  111. }   
  112. /*定义建立解析XML数据的函数---------------------------------------------------------------结束*

HTML部分的代码如下：

  1. <head>
  2. <title>rss阅读器</title>
  3. <link rel="stylesheet" type="text/css" href="css/default.css" />
  4. </head>
  5. <body>
  6. <script language="javacsript" type="text/javascript" src="js/ajax.js">
  7. </script>
  8. <input type="button" value="Satellite of love" onclick="loadXML('http://www.achome.cn/feed.asp')" />
  9. <input type="button" value="搜狐新聞" onclick="loadXML('xml/sohu_focus.xml')" />
  10. <input type="button" value="新浪新聞" onclick="loadXML('xml/sina_news.xml')" />
  11. <input type="text" size="20" id="rssURL"/>
  12. <input onclick="checkURL();" value="查看rss数据" type="button" />
  13. <div id="msg" style="display:none;">
  14. </div>
  15. <div id="data">
  16. </div>
  17.  
  18. <body>
 Page 1 of 5  1  2  3  4  5 下一页