?

一、眾所周知的

?

眾所周知，文本域( textarea )在FireFox或Chrome瀏覽器下，右下角有個可以拖拽的標(biāo)志。

?

有人保留，有人嫌礙事，直接 resize:none; 掉，但是，估計(jì)沒人利用整個兒做交互效果。

?

?

二、純CSS的交互展示

?

您可以狠狠地點(diǎn)擊這里： textarea resize下的純CSS交互demo

?

例如，在FireFox瀏覽器下，拖動（往右→）下圖圈中的圖標(biāo)：

?

一個半透明遮罩層隨著拖動把張含韻給覆蓋了，達(dá)到了半遮面的交互效果。

?

效果沒什么，但是卻完全CSS實(shí)現(xiàn)的，就有意思了。

?

?

三、實(shí)現(xiàn)原理

?

我們平時拖動文本域的時候，往右拖則文本域?qū)挾韧覀?cè)擴(kuò)展。但是，如果文本域右側(cè)定位（浮動或絕對定位），則右側(cè)不動，寬度往左側(cè)擴(kuò)展。下圖演示為右100像素絕對定位：

?

我們還知道， textarea resize 的時候?qū)挾茸兓瘯尵哂小鞍浴钡母冈貙挾雀黄鹱兓裕绻覀儼? textarea 放在具有半透明背景色的層中，那拉伸的時候，這個半透明層不就可以拉拉伸伸，有了交互效果啦！這就是demo中半透明層覆蓋來覆蓋去的原理。

?

說得再多也不容易明白，demo中一些障眼的屬性（ overflow:hidden; 、 opacity:0; ）去掉，你就知道大概了。下圖為去掉 overflow:hidden; 以及文本域 opacity 設(shè)為 0.6 后的效果：

?

?

四、結(jié)束語

?

經(jīng)測試，Opera/FireFox/Chrome瀏覽器支持，IE10以及下面的嘍嘍們都不支持。顯然，兼容性是硬傷。因此，除了一些特殊情況，此實(shí)現(xiàn)沒有多少實(shí)用價值。僅供大家娛樂，僅供大家參考。當(dāng)然，您可以發(fā)揮你智慧實(shí)現(xiàn)其他一些交互。

?

唉，憂傷的三月，就這些，感謝閱讀！

?

?

參考文章： Tricky Textarea Pulltab

?

原創(chuàng)文章，轉(zhuǎn)載請注明來自 張鑫旭-鑫空間-鑫生活 [ http://www.zhangxinxu.com ]
本文地址： http://www.zhangxinxu.com/wordpress/?p=3132