?
一、眾所周知的
?
眾所周知，文本域(
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
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
