CSSASS

简单效果——滚动展示

Fri, 29 Jan 2010 21:36:27 +0800

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

<!DOCTYPE HTML> <html > <head> <meta charset="utf-8"> <title>横向滚动控制</title> <style type="text/css"> *{padding:0;margin:0;} *{padding:0;margin:0;} .wrap{position:relative;width:735px;overflow:hidden;} #rollBox{overflow:hidden;margin:0 50px;} #rollList{float:left;overflow:hidden;zoom:1;margin-right:-3000px;} /* float,margin-right为了横版排列 */ #rollList li{float:left;display:inline;margin:15px;} #rollList img{display:block;border:1px solid #efefef;} .rollMenu{position:absolute;width:35px;height:80px;font-size:70px;text-decoration:none;color:#6B90DA;text-align:center;} #rollLeft{top:20px;left:0;} #rollRight{top:20px;right:0;} </style> </head> <body> <div class="wrap"> <a onclick="scrollHori.start(this);" class="rollMenu" id="rollLeft" href="javascript:;">‹</a> <a onclick="scrollHori.start(this);" class="rollMenu" id="rollRight" href="javascript:;">›</a> <div id="rollBox"> <ul id="rollList"> <li> <a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a> </li> <li> <a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a> </li> <li> <a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a> </li> <li> <a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a> </li> <li> <a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a> </li> <li> <a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg" /></a> </li> <li> <a href="#"><img height="95" width="95" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg"/></a> </li> </ul> </div> <script type="text/javascript"> var $id=function(id){ return document.getElementById(id);} var scrollHori={ locked:0, vector:0, start:function(thiso){ if (scrollHori.locked == 0){ if (thiso.id == 'rollLeft'&&$id('rollBox').scrollLeft!=0) { scrollHori.vector = -5; scrollHori.scroll(); } if (thiso.id =='rollRight'&&$id('rollBox').scrollLeft!=($id('rollList').offsetWidth-$id('rollBox').offsetWidth)){ scrollHori.vector = 5; scrollHori.scroll(); } } }, scroll:function(){ var step=0; var size=$id('rollList').offsetWidth/$id('rollList').getElementsByTagName('li').length; play = setInterval(function(){ if(size>step){ $id('rollBox').scrollLeft+=scrollHori.vector; step+=Math.abs(scrollHori.vector); scrollHori.locked = 1; } else{ scrollHori.stop(); } }, 5); }, stop:function(){ if (window.play) { clearInterval(window.play); scrollHori.locked = 0; } } } </script> </div> </body> </html>

var scrollHori={
locked:0, //锁死
vector:0, //左右向量
start:function(thiso){
if (scrollHori.locked == 0){
if (thiso.id == 'rollLeft'&&$id('rollBox').scrollLeft!=0) { //按到往左按钮，且在左侧有内容
scrollHori.vector = -5;
scrollHori.scroll();
}
if (thiso.id =='rollRight'&&$id('rollBox').scrollLeft!=($id('rollList').offsetWidth-$id('rollBox').offsetWidth)){ //按到往右按钮，且在右侧有内容
scrollHori.vector = 5;
scrollHori.scroll();
}
}
},
scroll:function(){
var step=0;
var size=$id('rollList').offsetWidth/$id('rollList').getElementsByTagName('li').length; //单个内容总宽（包括margin）
play = setInterval(function(){
if(size>step){ //单步滚动
$id('rollBox').scrollLeft+=scrollHori.vector;
step+=Math.abs(scrollHori.vector);
scrollHori.locked = 1; //滚动的时候锁死
}
else{
scrollHori.stop();
}
}, 5);
},
stop:function(){
if (window.play) {
clearInterval(window.play); //清除反复
scrollHori.locked = 0; //开锁
}
}
}

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

<!DOCTYPE HTML> <html > <head> <meta charset="utf-8"> <title>纵向滚动控制</title> <style type="text/css"> *{padding:0;margin:0;} a{font-size:12px;text-decoration:none;color:#6B90DA;} .wrap{position:relative;overflow:hidden;width:140px;} #rollBox{margin:30px 0;height:360px;overflow:hidden;} #rollList li{height:106px;overflow:hidden;text-align:center;padding-top:13px;} #rollList li img{display:block;margin:0 auto;border:1px solid #efefef;} .rollMenu{position:absolute;width:140px;height:30px;line-height:30px;font-size:30px;text-align:center;} #rollUp{top:0px;} #rollDown{bottom:0px;} </style> </head> <body> <div class="wrap"> <a onmouseout="scrollVert.stop();" onmouseover="scrollVert.play(this);" href="javascript:;" id="rollUp" class="rollMenu">▲</a> <a onmouseout="scrollVert.stop();" onmouseover="scrollVert.play(this);" href="javascript:;" id="rollDown" class="rollMenu">▼</a> <div id="rollBox"> <ul id="rollList"> <li> <a href="#"><img height="80" width="114" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg"/>我的相册</a> </li> <li> <a href="#"><img height="80" width="114" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg"/>我的相册</a> </li> <li> <a href="#"><img height="80" width="114" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg"/>我的相册</a> </li> <li> <a href="#"><img height="80" width="114" src="http://th04.deviantart.net/fs13/150/f/2009/113/f/e/fe84cff8156cbec59b1fff91faea18b6.jpg"/>我的相册</a> </li> </ul> </div> <script type="text/javascript"> var $id=function(id){ return document.getElementById(id);} var scrollVert={ locked: 0, vector: 0, play:function(thiso){ if (scrollVert.locked == 0) { if (thiso.id == 'rollUp') { scrollVert.vector = 1; } if (thiso.id == 'rollDown') { scrollVert.vector = -1; } roll = setInterval(function(){ $id('rollBox').scrollTop+=scrollVert.vector; }, 10); scrollVert.locked = 1; } }, stop: function(){ if (window.roll) { clearInterval(window.roll); scrollVert.locked = 0; } } } </script> </div> </body> </html>

简单效果的简单写法——无缝滚动字幕 <style> *{padding:0;margin:0;font-size:12px;} #wrap{width:300px;background:#eee;} #wrap li{height:22px;line-height:22px;} </style> <div id="wrap" style="overflow:hidden;height:100px;">...

简单效果——地图移动

Fri, 29 Jan 2010 17:54:04 +0800

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

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>地图移动控制</title> <style type="text/css"> *{padding:0;margin:0;} html,body{height:100%;overflow:hidden;} #control{position:absolute;top:10px;left:10px;width:58px;height:58px;z-index:10;background:url(http://capi3.edushi.com/Images/ZoomBarControl.gif) no-repeat;} #control i{position:absolute;width:15px;height:15px;text-indent:-10000px;cursor:pointer;} #rollUp{bottom:0;left:20px;} #rollDown{top:0;left:20px;} #rollLeft{top:20px;right:0;} #rollRight{top:20px;left:0;} #albumRoll{position:relative;height:100%;width:80%;overflow:hidden;border:2px solid #ccf;} #albumList{position:absolute;} </style> </head> <body> <div id="control"> <i id="rollUp" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向上</i> <i id="rollDown" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向下</i> <i id="rollLeft" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向左</i> <i id="rollRight" onmousedown="map.scroll(this);" onmouseup="map.stop(this);">向右</i> </div> <div id="albumRoll"> <img id="albumList" onload="map.initial()" src="http://www.onegreen.net/maps/Upload_maps/200812/20081225213951966.jpg" /> </div> <script type="text/javascript"> var $id=function(id){ return document.getElementById(id);} var map={ locked:0, initial:function(){ $id('albumRoll').scrollLeft=($id('albumList').scrollWidth-$id('albumRoll').offsetWidth)/2; $id('albumRoll').scrollTop=($id('albumList').scrollHeight-$id('albumRoll').offsetHeight)/2; }, scroll:function(othis){ if (map.locked==0){ var x=0,y=0; if(othis.id=='rollUp'){ y=2; } if(othis.id=='rollDown'){ y=-2; } if(othis.id=='rollLeft'){ x=2; } if(othis.id=='rollRight'){ x=-2; } roll = setInterval(function(){ $id('albumRoll').scrollLeft+=x; $id('albumRoll').scrollTop+=y; }, 5); map.locked=1; } }, stop:function (){ if (roll){ clearInterval(roll); map.locked = 0; }} } </script> </body> </html>

var $id=function(id){ return document.getElementById(id);}
var map={
locked:0,
initial:function(){ //初始图片位置为居中
$id('albumRoll').scrollLeft=($id('albumList').scrollWidth-$id('albumRoll').offsetWidth)/2;
$id('albumRoll').scrollTop=($id('albumList').scrollHeight-$id('albumRoll').offsetHeight)/2;
},
scroll:function(othis){
if (map.locked==0){
var x=0,y=0;
if(othis.id=='rollUp'){
y=2; //滚动向量（上2）
}
if(othis.id=='rollDown'){
y=-2;
}
if(othis.id=='rollLeft'){
x=2;
}
if(othis.id=='rollRight'){
x=-2;
}
roll = setInterval(function(){
$id('albumRoll').scrollLeft+=x;
$id('albumRoll').scrollTop+=y;
}, 5);
map.locked=1;
}
},
stop:function (){
if (roll){
clearInterval(roll);
map.locked = 0;
}}
}

No related posts.

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

Mon, 25 Jan 2010 21:10:17 +0800

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

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

而无缝的关键还在这里

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

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

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

function func(){
$$('quee').stop();
setTimeout(func2,1000);
}
function func2(){
$$('quee').start();
setTimeout(func,1000);
}

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

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

下面是新的做法

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

运用递归，而没有用setInterval

简单效果——滚动展示上回的文章里提到了文字滚屏效果。是无限滚动下去的。现在弄一个可控制的单步滚动效果。 <!DOCTYPE HTML> <html > <head> <meta charset="utf-8"> <title>横向滚动控制</title>...

浅谈辄止：line-height和vertical-align

Tue, 19 Jan 2010 21:23:49 +0800

line-height可以应用在所有元素上。
但尽管line-height可以加在block元素上，实际起作用的却是内部的inline元素或textnode节点。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>line-height对非可置换inline元素的影响</title> <style type="text/css"> .box{border:1px solid #000} </style> </head> <body> <div class="box" style="line-height:100px"> <span>line-height加在外层div上</span> </div> <div class="box" > <span style="line-height:100px">line-height加在内层span上</span> </div> </body> </html>

另外，line-height属性可继承。

非可置换inline元素没有height;每一行的高度就由line-height决定。
而对于可置换inline元素，他本身其实是有内在高度的，将不受line-height影响（ie7是个例外）。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可置换inline元素</title> <style type="text/css"> .box{border:1px solid #000} </style> </head> <body> <div class="box" style="line-height:100px"> <input type="text" /> </div> <div class="box" style="line-height:100px"> <input type="text" />若有textNode文本,又另当别论。 </div> </body> </html>

但这点性质，似乎正在改变。
css2.1也如是说：对于block,inline-block(可置换inline元素就是天生的inline-block元素), line-height是做为其minimal height的。那当高度小于line-height时，是理应起作用的。
我们使用html5的doctype声明:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>可置换inline元素</title> <style type="text/css"> .box{border:1px solid #000} </style> </head> <body> <div class="box" style="line-height:100px"> <input type="text" /> </div> </body> </html>

在上面的例子里，除了ie6，这里的line-height在其他浏览器都能起作用。
总之，单纯设置外层height=line-height使image等可置换元素垂直居中，在ie6下是行不通的——如果要考虑ie6，请记住这一点。
那么，如何才能做到inline元素(包括可置换inline元素)的垂直居中，并且推而广之应用在block元素上呢？我们可以利用vertical-align属性。

现在先摘要说下vertical-align属性。
在CSS Specification中，line-height属性和vertical-align属性就是放在一起做介绍的。
Line height calculations: the ‘line-height’ and ‘vertical-align’ properties

vertical-align的默认值是baseline;
与line-height不同，vertical-align只能用在inline元素（还有’table-cell’ 元素）上
vertical-align属性在各个浏览器下都有不少的差异。参见：http://www.mikkolee.com/13

不过，我们要用到的属性middle在各个浏览器解释中却没有什么差异（或只有微小的差异）。
让同行的inline元素按中间线对齐，我们给各个inline元素加上vertical-align:middle;

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>横向对齐</title> <style type="text/css"> .box{height:100px;border:1px solid #000;} .box input,.box span{vertical-align:middle;} </style> </head> <body> <div class="box"> vertical-align:middle<input type="text" style="padding:10px;" /><span>各元素横行对齐</span> </div> </body> </html>

接着我们要相对外层做垂直居中。
假如，内部的一个inline元素（当然是可置换inline元素,或是设置了inline-block的元素——这二者其实是一样的）的高度也达到外层的高度，那么就可以保证内层所有的inline元素都垂直居中了。
所以我们可以设置这样一个空元素pillar。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>横向对齐</title> <style type="text/css"> .box{height:100px;border:1px solid #000;} .box input,.box span{vertical-align:middle;} .pillar{display:inline-block;width:0px;height:100%;vertical-align:middle;} /* width:0的话，在opera下会失效。当然也有另外的方法来解决opera */ </style> </head> <body> <div class="box"> <span class="pillar" ></span>vertical-align:middle<input type="text" style="padding:10px;" /><span>各元素横行对齐</span> </div> </body> </html>

是不是很熟悉啊，我们“未知尺寸元素的垂直居中”的一个方法就是从这里衍生而来的——那是针对block元素的居中：http://www.cssass.com/blog/index.php/2008/36.html
做法就是将block元素变成inline-block,或者干脆使用某一inline元素包住block元素（尽管这不符合标准），然后再使用上面的方法。

改变元素display属性的垂直居中方法。之前也有搜集过纯CSS的几种方法。但觉得没有下面的好。 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <style...

通灵谬言，未满25岁者必看。教训啊

Sun, 17 Jan 2010 21:30:40 +0800

余年已二十有五，逾月即将本命之年。所叹者红颜未得，知己难求，东隅已逝，宏图空有。
近日得闻“《资治通鉴.梁纪》（第二十卷）有记——‘凤历五年，时洛隐者为帝卜之，曰逾二十五年未房者通灵’”。初想以身试法，一探通灵之境。然查阅《资治通鉴》，竟现谬误有三：
一谬于《资治通鉴》卷二十实为《汉纪》，卷一四五至卷一六零乃为《梁纪》，而凤历年只记于《后梁纪》卷二六八，前后梁全无干系。以谬加谬，盖为始作俑者故意为之。
二谬于凤历始于癸酉年（913年）正月甲子，废于当年二月庚寅。废立之间不足两月，“凤历五年”何从谈起？
三谬于郢王朱友圭杀父篡位之辈，荒淫无能之徒，根基不固，乾坤难控，篡居帝位未有一年即告覆灭，身死名废，被贬庶人。因而后史记之皆呼“郢王”，而不称之为“帝”。“为帝卜之”实乃大谬。
其实伪作史料者，应深知后梁历史，比如凤历之年，梁国都确在洛阳，“洛隐者为帝卜之”并不违地域常理。其他谬言，当其故意为之，一来令甄别者扑朔难查，二来盖其不敢篡改历史，故设之以馄饨虚空之年代人物，然后编造以事件。
网络之内信息庞杂，真假共存。吾人当自有判断，绝不可轻信谬论，倘若贻误终身，悔之晚矣。

尽管我觉得吧，通灵王魔法使之类的东西肯定是假的，但网球王子里海棠熏的snake回球，修炼的好的话，绝对是能打出来的。

No related posts.

D2之行照片

Wed, 23 Dec 2009 14:53:38 +0800

为了不妨碍会场，没有开闪光灯。同时没有好的摄影技术及机器，拍的很烂，也不敢多拍。大家能看一眼真是赏光了。

D2会议在人间网的即时讨论帖：D2人间现场直播记录
如果你还没有人间账户，可以接受我的邀请：http://renjian.com/dd/reg?verify_code=VnyqWVP8HuvchiIi3J0l

D2的PPT下载及更多现场照片：http://www.d2forum.org/2009/12/23/look-back-upon-the-fourth-d2-forum/

No related posts.