前端开发

 首页 > 前端开发 > jquery教程 > 基于jQuery实现文本框缩放以及上下移动功能_jqu

基于jQuery实现文本框缩放以及上下移动功能_jqu

分享到:
【字体:
导读:
          这里给大家分享一段个人觉着非常实用也经常用于项目中的代码,本代码基于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代码:

复制代码 代码如下:


      

           放大
           缩小
           向上
           向下
      

       

           
       

   

CSS代码:

复制代码 代码如下:

.bigger , .down , .up , .smaller{
    background-color: #f1a55c;

代码奉上,具体如何使用,使用在何处,我就不多说了,小伙伴们自由发挥吧。

分享到:
基于jQuery实现复选框的全选 全不选 反选...
本代码是在众多的jQuery复选框功能代码中精选出来的,本人项目中使用的代码,这里分享给大家。 jQuery代码: 复制代码 代码如下:         $(function(){             $("#checkedAll").click(function(){                 $(&#039;[name=items]:checkbox&#039;).attr(&#039;chec...
jQuery实现统计复选框选中数量_jquery_自...
代码很简介,功能也很简单,但是却很实用,这里就不细说明了直接上代码 jQuery代码: 复制代码 代码如下:         function countNum(){           //alert($(&#039;input[name=check]:checked&#039;).length);          var arrays = new Array();           var items = doc...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……