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


Posted in Javascript onNovember 24, 2014

想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧。

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; 

} 

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

Javascript 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
详谈javascript中的cookie
Jun 03 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 #Javascript
基于jQuery实现下拉框
Nov 24 #Javascript
基于jQuery实现表单提交验证
Nov 24 #Javascript
jQuery简单实现网页选项卡特效
Nov 24 #Javascript
jQuery选择器全集详解
Nov 24 #Javascript
常见的jQuery选择器汇总
Nov 24 #Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 #Javascript
You might like
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python简单商城购物车实例代码
2018/03/15 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
如何理解python中数字列表
2020/05/29 Python
python属于解释型语言么
2020/06/15 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
职业道德模范事迹材料
2014/08/24 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书