?

一、眾所周知的

?

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

?

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

?

?

二、純CSS的交互展示

?

您可以狠狠地點擊這里： textarea resize下的純CSS交互demo

?

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

?

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

?

效果沒什么，但是卻完全CSS實現的，就有意思了。

?

?

三、實現原理

?

我們平時拖動文本域的時候，往右拖則文本域寬度往右側擴展。但是，如果文本域右側定位（浮動或絕對定位），則右側不動，寬度往左側擴展。下圖演示為右100像素絕對定位：

?

我們還知道， textarea resize 的時候寬度變化會讓具有“包裹性”的父元素寬度跟著一起變化，所以，如果我們把 textarea 放在具有半透明背景色的層中，那拉伸的時候，這個半透明層不就可以拉拉伸伸，有了交互效果啦！這就是demo中半透明層覆蓋來覆蓋去的原理。

?

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

?

?

四、結束語

?

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

?

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

?

?

參考文章： Tricky Textarea Pulltab

?

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