CSSASSCSSASSCSSASS

三人行必有我师焉，择其善者而从之，其不善者而改之
三人行必有我师焉，择其善者而从之，其不善者而改之
三人行必有我师焉，择其善者而从之，其不善者而改之
三人行必有我师焉，择其善者而从之，其不善者而改之
三人行必有我师焉，择其善者而从之，其不善者而改之

“javascript”目录存档

« 较老的文章

简单效果——地图移动

2010年01月29号，星期五

记得上回弄的简单文字滚屏效果，无缝滚动字幕。
其实应用的地方还是蛮多的。我们也可以做个简单的地图移动效果。

  1. var $id=function(id){ return document.getElementById(id);}
  2. var map={
  3.     locked:0,
  4.     initial:function(){         //初始图片位置为居中
  5.         $id('albumRoll').scrollLeft=($id('albumList').scrollWidth-$id('albumRoll').offsetWidth)/2;
  6.         $id('albumRoll').scrollTop=($id('albumList').scrollHeight-$id('albumRoll').offsetHeight)/2;
  7.     },
  8.     scroll:function(othis){
  9.         if (map.locked==0){    
  10.             var x=0,y=0;   
  11.             if(othis.id=='rollUp'){
  12.                 y=2;  //滚动向量（上2）
  13.             }
  14.             if(othis.id=='rollDown'){
  15.                 y=-2;
  16.             }
  17.             if(othis.id=='rollLeft'){
  18.                 x=2;  
  19.             }
  20.             if(othis.id=='rollRight'){
  21.                 x=-2;
  22.             }
  23.             roll = setInterval(function(){
  24.                 $id('albumRoll').scrollLeft+=x;
  25.                 $id('albumRoll').scrollTop+=y;       
  26.             }, 5);
  27.             map.locked=1;
  28.         }
  29.     },
  30.     stop:function (){
  31.         if (roll){
  32.             clearInterval(roll);
  33.             map.locked = 0;
  34.         }}   
  35. }

标签：,
发布在 javascript | 一条评论 »

简单效果——滚动展示

2010年01月29号，星期五

上回的文章里提到了文字滚屏效果。是无限滚动下去的。
现在弄一个可控制的单步滚动效果。

  1. var scrollHori={
  2.     locked:0,  //锁死
  3.     vector:0,  //左右向量
  4.     start:function(thiso){
  5.         if (scrollHori.locked == 0){
  6.             if (thiso.id == 'rollLeft'&&$id('rollBox').scrollLeft!=0) {  //按到往左按钮，且在左侧有内容
  7.                 scrollHori.vector = -5;
  8.                 scrollHori.scroll();
  9.             }
  10.             if (thiso.id =='rollRight'&&$id('rollBox').scrollLeft!=($id('rollList').offsetWidth-$id('rollBox').offsetWidth)){     //按到往右按钮，且在右侧有内容
  11.                 scrollHori.vector = 5;   
  12.                 scrollHori.scroll(); 
  13.             } 
  14.         }
  15.     },
  16.     scroll:function(){
  17.         var step=0;
  18.         var size=$id('rollList').offsetWidth/$id('rollList').getElementsByTagName('li').length;  //单个内容总宽（包括margin）
  19.         play = setInterval(function(){
  20.                 if(size>step){   //单步滚动
  21.                     $id('rollBox').scrollLeft+=scrollHori.vector;
  22.                     step+=Math.abs(scrollHori.vector);
  23.                     scrollHori.locked = 1;   //滚动的时候锁死
  24.                 }
  25.                 else{
  26.                     scrollHori.stop();
  27.                 }
  28.             }, 5);
  29.     },
  30.     stop:function(){
  31.         if (window.play) {
  32.             clearInterval(window.play);   //清除反复
  33.             scrollHori.locked = 0;   //开锁
  34.         }
  35.     }
  36. }

竖排的话可以省力很多。
（不过下面的效果本来就更简单）

标签：, ,
发布在 javascript | 没有评论 »

简单效果的简单写法——无缝滚动字幕

2009年12月29号，星期二

先看看无缝滚动的效果，使用window的setInterval方法重复调用一个滚动函数。
关键的代码是

  1. function roll(){ 
  2.             if($$('box2').offsetTop-$$('wrap').scrollTop<=0)  {  //当滚动到第二部分的顶部位置时
  3.                 $$('wrap').scrollTop-=$$('box1').offsetHeight;      //重置至第一部分顶部位置,相当于$$('box').scrollTop=0;
  4.                 }
  5.             else{ 
  6.                 $$('wrap').scrollTop++ ;
  7.                 $$('refer').innerHTML=$$('box2').offsetTop+' '+$$('wrap').offsetHeight+' '+$$('wrap').scrollTop  //无他，参考值尔
  8.             } 
  9.         } 
  10. var start=setInterval(roll,speed);

而无缝的关键还在这里

  1. $$('box2').innerHTML=box1.innerHTML;  //拷贝一份内容跟随其后，使原内容之后还有内容

我原本要做的效果并非全如上面，我需要的效果是：单条为一步阶，进行间歇性循环无缝滚动。

其实提起滚动，应该立马会想起走马灯（marquee）。尽管对其一直有偏见，但我还是会给他个机会的。。。

  1. function func(){
  2.         $$('quee').stop();
  3.         setTimeout(func2,1000);
  4.     }
  5.     function func2(){
  6.         $$('quee').start();
  7.         setTimeout(func,1000);
  8.     }

延时1秒交叉调用marquee的内置函数start()和stop();

不过，scrollamount影响的步阶不准确啊，而且不能做到无缝么。好，将marquee拖出去斩了（marquee:冤枉啊~~~~~）

下面是新的做法

  1. function roll(){
  2.         wrap.scrollTop++;
  3.          if($$('box1').offsetHeight-wrap.scrollTop>0){  //尚未滚动到第二部分的顶部位置时
  4.              if(wrap.scrollTop%wrap.offsetHeight!=0)  //
  5.              {
  6.                 return(setTimeout(roll,20));     //20毫秒即递归一次
  7.              }
  8.              else{                //当滚动的累计距离达到显示域高度的倍数时
  9.                 return(setTimeout(roll,2000));  //等待2秒才递归调用
  10.              }
  11.          }
  12.          else{
  13.                 setTimeout("$$('wrap').scrollTop=0;roll()",2000);
  14.             }
  15.     }

运用递归，而没有用setInterval

标签：, , ,
发布在 javascript | 3 条评论 »

说说HTML5

2009年09月4号，星期五

html5如何而来？
HTML isn’t a very good language！它亟待改进。
因此，1999年W3C停止了HTML的工作，2000年发布xhtml的第一个推荐版本。
2002年W3C发布XHTML 2.0第一个草案，令人吃惊的是：XHTML2.0不是向后兼容的（Web 的未来：XHTML 2.0(2003.1.1)）。
随着XHTML的越来越火，绝大多数人都认为它将是web的未来。然而终于有些人坐不住了，面对W3C对HTML的持续冷淡，2004年，由Apple, Mozilla Foundation 和Opera Software组成了The Web Hypertext Application Technology Working Group (WHATWG)，致力于发展HTML和创建Web applications所需的APIs。他们开始制定Web Applications 1.0 规范，这也就是后来HTML5。
WHATWG的努力没有白费，这份规范的草案在2007年通过了W3C的审核。
W3C组织了HTML工作组，并在2008年1月22日公开了第一份草案。
2009年7月2日，W3C宣布在年内停止XHTML 2的工作，而将资源投入转向HTML5工作组。（XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5）
在标准化的春风吹满神州之际，xhtml2却溘然而止,HTML5取代上位，我们广大的web工作者是不是需要做什么呢？

我们不需要做什么！
HTML5 的目标是保持HTML当前标准HTML4.01和HTML的XML版本XHTML1.0 向后兼容。
同以前的HTML4一样：它没有名称空间或模式、元素不必结束、浏览器会宽容地对待错误。
对于XHTML1，它也没有什么排斥。
相反的，XHTML2才是不向后兼容的。
所以，我们并不需要非得做什么改变，才能适应在HTML5下面的页面工作。
当然HTML5不会仅仅如此而已，只是HTML5是想让不支持它的浏览器中能够平稳地退化。
随着浏览器的缓慢升级，HTML5的真正好处才会开始慢慢体现，当别人的网页通过html5实现了越来越多的功能之后。到时，你再虑是不是需要做什么——理论上讲，也是不晚的。
我们不需要做什么，但我们可以做的更多

HTML5能做什么？
一句话：很多！HTML5还在草案阶段，他的功能仍将扩展。
首先，我们应该知道，html5已经不只是Hypertext Markup Language，它更是一种Web Hypertext Application Technology。

1. html5增加了一些结构性（Sections）元素：header,footer,nav,section,article,aside，用来替代千篇一律的div布局，非常语义化。

2. 还有meter（数值尺），progress(进度表)，mark（标记）这些语义内联元素。通过自带的属性，可以进行很直接地描述。

3.一些交互元素。details（脚注），datagrid（网格控件——可动态显示树、列表和表格），menu和command（可以做交互菜单）

4. 媒体元素video,audio,source。不需要借助第三方插件，页面就能播放多媒体。

5. canvas元素。脚本绘图，它的最终目标是flash般的动画展示和交互体验。不要以为很遥远，canvas在FireFox1.5就有了，opera,safari也是一样支持甚早（这个标签是就是苹果的发明）。

6. 表单处理功能。HTML5吸收了WHATWG之前的Web Forms 2.0。验证数据是如此简单。

7. 页面元素的拖曳和编辑。

8. HTML5的离线存储技术 http://dev.w3.org/html5/webstorage/

好了， HTML5能做的够多了，但他还处在草案阶段，那关键是现在我们能做什么呢？

我们能做什么？
HTML5估计能在2012年之前成为W3C的候选推荐标准，不过在这之前，只要浏览器支持，我们都可以使用html5的功能。

1. HTML5新元素布局。
除了ie系列浏览器外，其它大多数浏览器都能识别HTML5的那些新元素标签，可以对其进行style，这就意味着它们可以使用HTML5的新元素标签进行页面布局。
但问题是ie系列浏览器是无法对其不承认的元素添加样式的，而缺少了IE的支持，大多数人都会束手束脚。解决这个问题的方法早已经了:HTML5 Shiv
很简单:

  1. <script>
  2. document.createElement("元素名称")
  3. </script>

创建文档元素。
批量创建的方法:

  1. (function(){
  2.     if(!/*@cc_on!@*/0) return;    
  3.     var html5 = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,event,source,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(',');   
  4.     for(var i = 0, len = html5.length; i < len; i++ ) {       
  5.     document.createElement(html5[i]);  
  6.     }
  7. })
  8. ();

现在在IE里也可以对HTML5元素进行布局了。
不过，在此之前，我们还需要对这些新元素定义基本的Display style,
这个工作本来一般是由浏览器完成的，比如FireFox的html.css。
现在只能自己对引进的HTML5元素进行定义了。
那么哪些需要定义成display:block;哪些又是不需要呢？这个我们可以看下W3C是怎么定义的：display-types

  1. address, article, aside, blockquote, body, center, dd, dialog, dir,
  2. div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
  3. hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
  4. section, ul, xmp { display: block; }

刨除HTML老元素，以下这些元素:
article,aside,dialog,figure,footer,header,hgroup,nav,section可以定义为{display:block;}
这篇针对HTML 5 Reset Stylesheet的文章也可以参考下：http://html5doctor.com/html-5-reset-stylesheet/。文章在Eric的CSS Reset的基础上考虑HTML5新元素及W3C规范推荐下对元素进行了style reset。当然reset CSS本身就存在争议的，一般来说，reset CSS是你自己的style，很多东西都可以按你的意愿来定，当然不要太偏离W3C的元素设计本意。
接下来，使用HTML5新元素进行布局就可以随心所欲了（还是悠着点好）。

2. Drag & drop
Drag & drop是浏览器支持度比较高的HTML5内容：

3. canvas
我们先看一些canvas的示例：
http://www.agustinfernandez.com.ar/proyectos/canvas/
http://www.whatwg.org/demos/2008-sept/color/color.html
网上还有一些互动性蛮强的Demo.
canvas应用的发展无疑将威胁到也行进在富Web之路上的Flash和Silverligth这些Web插件。

canvas在safari,firefox,opera很早就有了支持，但IE缺迟迟不予支持，尽管他在ie8中已经开始支持多个HTML5功能。MS的同志很有理由这么做:“HTML 5标准制定之前,某些功能确实已经得以实现,例如Google Gears实现了离线应用程序功能,Flash和silverlight实现了类似Canvas API的功能.在下一代HTML规范中设置这些内容未必非常必要”。要知道MS在silverlight是花了很大力气。事实上，MS在参与HTML5之事上一直非常谨慎，并且希望精简HTML5。
Flash的所有者，HTML5参与者之一Adobe则表现的很轻松：“canvas还很弱，HTML 5 + CSS 3 可能要 10年的时间才能定稿，在这期间，Flash 会持续发展，并提供更好的用户体验”。

尽管IE没有支持canvas功能，但我们可以使用JS模拟达到：
http://excanvas.sourceforge.net/
这是其中的一个Demo,试试你的IE:
3Dcanvas_For_IE.html

4. audio and video
使用FireFox3.5看看下面这个Video Demo。

我们没有引入flash播放器就能播放swf。

在下面这个页面里罗列了各浏览器所支持的HTML5功能：
Implementations in Web browsers
随着浏览器的升级，翻新，他们支持的东西会越来越多，提供给我们前端工作者发挥的空间也越来越大。

标签：, , , , , , ,
发布在 (x)Html, CSS, javascript | 2 条评论 »

JS实现字符unicode编码信息查询

2009年05月2号，星期六

   这两天在xiaonei的个人状态里看见很多人添加有一些特殊字符，如҉ (据说叫菊花，囧nz)。当然这种字符也还没什么稀奇，这个符号是cyrillic里百万的标识。另外有见到一个能将文字反排显示的不可见字符,比较有趣。如下：

   此RLO字符的效果就是将文字反排（效果有点类似<bdo dir=rtl>啊。参见：HTML的dir属性和<bdo>标签及其他一些CSS文字排版属性、滤镜 不过bdo这个是需要浏览器解释后才能看见效果的，而此RLO不需要浏览器解释，当然上面代码里使用的是html字符实体编号,这个是需要浏览器解释的。）

   在UCS（Unicode Character Set）当中，每个字符都有一个unicode编码——不过，拥有unicode码的不一定是字符，也可以是设备控制符。
   应该说，很多形式的字符编码都是基于unicode编码的，如URL-encode,ASCll码,HTML Character Entities编号。特别是HTML Character Entities编号，与unicode可以说是一一对应的，只要浏览器支持，charset包含，“&#”+十进制标号+“；”的编码就能在html中使用所有unicode中定义字符。
   以上面的RLO字符分析，虽然RLO符看不见，但也是可以被copy的，而且，必然的有一个对应的unicode码。RLO的unicode对应的16进制编号是：202e。转成10进制就是：8238。所以如果要在html中使用这个字符，除了copy这个字符过来外，我们可以使用字符实体编号：&#+8238+;(不包括+号)。
关于如何查到某个字符的unicode编码，每种程序语言应该都有函数可以用来解码为unicode，这里有一个php的解码应用：convert-to-html。这是直接解成html实体编码的。它同unicode的关系只是十进制与十六进制的关系（实质是一样的）。要看16进制unicode只需做下进制转码就行了。知道了16进制编码，我们就可以在这里查询字符的信息：unicode.org

下面是自己用js写的转码工具：

可以解开任意字符的unicode码，并生成字符实体码，而且可以链接到unicode官网查询该字符的信息。
js中escape这个函数能直接将字符串转成unicode码，不过有部分属于ASCll编码的字符不会解开。
而charCodeAt函数则能解开任何字符的unicode码。
我在js中两种方法都用了。
JS中解码的函数还有encodeURI——这个解开的unicode码我们会经常看见，地址栏里的字符串即出自于此。

转码函数的主要内容。——写的有点乱，不合理处肯定很多。

  1. function escapeCode(){
  2.     var hexArray=new Array();
  3.     var decArray=new Array();
  4.     var entiArray=new Array();
  5.     var decCode;
  6.     var inTXT=getId('inputValue').value;
  7.     var outTXT='';
  8.     var entityCode='';
  9.     var outList="<ul><li>Unicode Character Code编码</li><li>HTML Character Entities编号</li><li>字符显示</li><li>unicode信息查询</li></ul>";
  10.  
  11.     if(getId('convAll').checked){  //true,转换a-z,A-Z等字符的unicode编码
  12.       var character;
  13.       for(i=0;i<inTXT.length;i++){
  14.         character=inTXT.charCodeAt(i).toString(16).toUpperCase();   //法1：使用charCodeAt逐字转码
  15.         outTXT+='u'+character+' ';
  16.         hexArray.push(character);
  17.        }
  18.     }
  19.     else{
  20.     outTXT=escape(inTXT);               //法2：使用escape直接转码（不转a-z,A-Z等字符）
  21.     hexArray=outTXT.split(/%u|%/);  //以%u和%做分割插入数组
  22.     }
  23.  
  24.     for(i in hexArray){
  25.         if(hexArray[i]=='') hexArray.splice(i,1); //清除空的数组项（FF）
  26.         hexArray[i]=hexArray[i].slice(0,4);     //截取数组项中前四个字符。（消除a-z,A-Z等不解码产生的影响）
  27.         decCode=parseInt(hexArray[i],16).toString(10);
  28.         decArray.push(decCode);
  29.         entityCode+='&#'+decCode+'; ';
  30.         outList+="<ul><li>"+hexArray[i]+"</li><li>"+decArray[i]+"</li><li>\"&#"+decCode+";\"</li>";
  31.         outList+="<li><form enctype='application/x-www-form-urlencoded' action='http://www.unicode.org/cgi-bin/Code2Chart.pl' method='post' target='_blank'>";
  32.         outList+="<input type='hidden'  maxlength='8' size='8' name='HexCode' value="+hexArray[i]+" />";
  33.         outList+="<input type='submit' value='Go' name='submit'/></form></li></ul>";
  34.     }
  35.         getId('outUnicode').value=outTXT;   //输出unicode码，以%u或%开头。
  36.         getId('outEnticode').value=entityCode;  //输出字符实体编码
  37.         getId('outView').innerHTML=outList;  //输出编码值，并有unicode信息查询链接。
  38.      }

标签：, , , , , ,
发布在 javascript | 没有评论 »

未知高度元素的垂直居中（js实现）

2009年04月28号，星期二

未知高度（即高度不确定）元素的垂直居中，虽说这个布局的实际应用不是很多，但在网上讨论的却很多，而且往往联系到某公司的招聘题。
之前有收集过几个纯CSS的做法：点这里
不过，当然没有用Js来做的简单明了啦。

上面的垂直居中，是相对于整个屏幕来说的。如果是在某个div中垂直居中，方法也一样，稍微修改下就可以了。

标签：
发布在 javascript | 没有评论 »

« 较老的文章