Loading... <iframe align="left" width="100%" height="800" src="https://www.burningash.cn/usr/uploads/index3.html"></iframe> <link href="https://www.sccens.net/cssnew.css" rel="stylesheet"> <div id="zm_szh">下面的这张GIF图片说明了整个特效的操作过程:</div> <img src="https://burningash-1312676461.cos.ap-guangzhou.myqcloud.com/test-1312676461-1312676461/coloring_concept.gif"/> 这是一款非常有趣的[HTML5](http://www.htmleaf.com/html5/)可拖拽互动修改页面元素颜色特效。该特效在页面的左边有一个颜色工具栏,用户可以拖动上面的颜色到右边的页面区域或文字上,这些区域或文字的颜色就会被修改为用户拖动的颜色。 你可以拖动左边颜色板中的任意颜色到右边的元素上。在拖动时,该颜色会以一个小水滴的形态显示,只要该水滴拖动到元素上方,元素显示为高亮的蓝色边框,它就是可以被改变颜色的元素。当水滴被放下(释放鼠标),被拖动的颜色就会以[点击波](http://www.htmleaf.com/jQuery/Buttons-Icons/201503221558.html)的样式将颜色附加到该元素上,效果非常炫酷。这个点击波效果是使用[SVG](http://www.htmleaf.com/html5/SVG/)元素,并在其上使用[CSS transition](http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504201713.html)来制作的。 该特效中的拖拽功能使用的是[interact.js](http://www.htmleaf.com/jQuery/Layout-Interface/201504101653.html),它是一款可以支持元素惯性拖放和多点触摸手势的js插件。 <div class="tip inlineBlock error"> 注意这个特效只有在最新版本的现代浏览器中才能看到效果。IE浏览器不支持在SVG元素上使用CSS过渡效果,所以你不会看到放下颜色时的点击波效果。 </div> enjoy! [源码下载](http://down.htmleaf.com/1504/201504231612.zip) > 本文版权属于jQuery之家,转载请注明出处:[http://www.htmleaf.com/html5/html5donghua/201504231724.html](http://www.htmleaf.com/html5/html5donghua/201504231724.html) burningash.cn Burningash 版权申明 www.burningash.cn 若无注明,本文皆burningash原创 转载请保留文章出处 最后修改:2022 年 12 月 21 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏 下一篇 上一篇 发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论,继续评论表示您已同意该条款 评论 * 名称 * 🎲 邮箱 * 地址 发表评论 提交中...