手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于jQuery实现文本框缩放以及上下移动功能
基于jQuery实现文本框缩放以及上下移动功能
摘要:想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧。jQuery代码:复制代码代码如下:$(functio...

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

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>

<div>

<span>放大</span>

<span>缩小</span>

<span>向上</span>

<span>向下</span>

</div>

<div>

<textarea id="comment" rows="8" cols="20">

水电费水电费爽肤水法萨芬沙发放松放松沙发

当爽肤水飞沙发发沙发发发发

水电费水电费爽肤水法萨芬沙发放松放松沙发

当爽肤水飞沙发发沙发发发发

</textarea>

</div>

</div>

CSS代码:

复制代码 代码如下:

.bigger , .down , .up , .smaller{

background-color: #f1a55c;

}

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

【基于jQuery实现文本框缩放以及上下移动功能】相关文章:

原生javascript实现解析XML文档与字符串

js实现带按钮的上下滚动效果

jQuery实现强制cookie过期方法汇总

jQuery使用zTree插件实现树形菜单和异步加载

jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

JQuery+CSS实现图片上放置按钮的方法

jQuery插件jRumble实现网页元素抖动

基于javascript简单实现对身份证校验

javascript实现简单的省市区三级联动

jQuery实现限制textarea文本框输入字符数量的方法

精品推荐
分类导航