zoukankan      html  css  js  c++  java
  • 表单-放大缩小

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    span{
    background: #ccc;
    cursor: pointer;
    }
    .comment{
    max-height: 500px;
    min-height: 50px;
    height: 100px;

    }
    </style>
    </head>
    <body>
    <form >
    <div class="msg">
    <div class="msg_caption">
    <span class="bigger">放大</span>
    <span class="smaller">缩小</span>
    </div>
    <div><textarea id="comment" cols="30" rows="10">
    多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化
    多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化
    多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化
    </textarea></div>
    </div>
    </form>

    </body>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    // var $comment=$("#comment");
    // $(".bigger").click(function(){
    // if($($comment.height()<500)){
    // $comment.height($comment.height()+50);
    // }
    // });
    // $(".smaller").click(function(){
    // if($comment.height()>50){
    // $comment.height($comment.height()-50)
    // }
    // })
    // var $comment=$("#comment");
    // $(".bigger").click(function(){
    // if($($comment.height()<500)){
    // $comment.animate({height:"+=50"},400);
    // }
    // });
    // $(".smaller").click(function(){
    // if($comment.height()>50){
    // $comment.animate({height:"-=50"},400)
    // }
    // })
    var $comment=$("#comment");
    $(".bigger").click(function(){
    if(!$comment.is(':animated')){
    if($($comment.height()<500)){
    $comment.animate({scrollTop:"+=50"},400);
    }
    }

    });
    $(".smaller").click(function(){
    if(!$comment.is(':animated')){
    if($comment.height()>50){
    $comment.animate({scrollTop:"-=50"},400)
    }
    }
    })
    })
    </script>
    </html>

  • 相关阅读:
    VMware 创建的虚拟机,Xshell无法进行连接
    Centos7 文件修改详情
    Centos7 selinux关闭
    centos7 RPM命令使用
    centos 操作系统优化
    centos 内存使用情况+负载使用情况
    Centos 修改环境变量
    centos7 系统级别(持续更新)
    centos7 常规修改信息(比较杂的)持续更新
    centos7 修改网卡信息
  • 原文地址:https://www.cnblogs.com/jinsuo/p/7420676.html
Copyright © 2011-2022 走看看