来源:自学PHP网 时间:2014-11-29 13:28 作者: 阅读:次
[导读] 这里给大家分享一段个人觉着非常实用也经常用于项目中的代码,本代码基于jQuery实现了文本框缩放以及上下移动功能,给需要的网友们参考下吧...
想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧。 jQuery代码: 复制代码 代码如下: $(function(){ var $comment = $('#comment'); $('.bigger').click(function(){ if(!$comment.is(":animated")){ if($comment.height() < 500){ //$comment.height($comment.height() + 50); $comment.animate({height:"+=50"},400); } } }); $('.smaller').click(function(){ if(!$comment.is(":animated")){ if($comment.height() > 50){ //$comment.height($comment.height() - 50); $comment.animate({height:"-=50"},400); } } }); $('.up').click(function(){ if(!$comment.is(":animated")){ $comment.animate({scrollTop:"-=50"},400); } }); $('.down').click(function(){ if(!$comment.is(":animated")){ $comment.animate({scrollTop:"+=50"},400); } }); }); HTML代码: 复制代码 代码如下: <div class="msg"> <div class="msg_caption"> <span class="bigger">放大</span> <span class="smaller">缩小</span> <span class="up">向上</span> <span class="down">向下</span> </div> <div> <textarea id="comment" rows="8" cols="20"> 水电费水电费爽肤水法萨芬沙发放松放松沙发 当爽肤水飞沙发发沙发发发发 水电费水电费爽肤水法萨芬沙发放松放松沙发 当爽肤水飞沙发发沙发发发发 </textarea> </div> </div> CSS代码: 复制代码 代码如下: .bigger , .down , .up , .smaller{ background-color: #f1a55c; } 代码奉上,具体如何使用,使用在何处,我就不多说了,小伙伴们自由发挥吧。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com