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>

  • 相关阅读:
    Beyond Compare同步功能简介
    CorelDRAW中如何制作表格
    如何解决CorelDRAW中尖突问题
    LCS 最长公共子序列
    Java容器部分用法
    数论知识简易总结
    操作系统的运行环境 中断与有异常
    OS的发展和分类
    操作系统的基本概念
    搭建神经网络的八股
  • 原文地址:https://www.cnblogs.com/jinsuo/p/7420676.html
Copyright © 2011-2022 走看看