Home > Article > Web Front-end > Implementing text box scaling and up and down movement functions based on jQuery_jquery
Implementing text box scaling and up and down movement functions based on jQuery_jquery
- WBOYOriginal
- 2016-05-16 16:30:291754browse
If you want to make your webpage more cool and make your comments more interactive, then please study this code carefully.
jQuery code:
Copy code The code is as follows:
$(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 code:
Copy code
The code is as follows:
& Lt; span class = "bigger" & gt; zoom in & lt;/span & gt;
& Lt; span class = "smaller" & gt; reduction & lt;/span & gt;
& Lt; span class = "up" & gt; up & lt;/span & gt;
Down
& Lt; span class = "bigger" & gt; zoom in & lt;/span & gt;
& Lt; span class = "smaller" & gt; reduction & lt;/span & gt;
& Lt; span class = "up" & gt; up & lt;/span & gt;
Down