一、常用网页效果应用
1.表单应用
表单由表单标签、表单域和表单按钮组成。
1.1单行文本框应用
例:获取和失去焦点改变样式
首先,在网页中创建一个表单,HTML代码如下
<form action="" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text" />
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password" />
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg" rows="2" cols="20"></textarea>
</div>
</fieldset>
</form>
当文本框获取焦点后,它的颜色需要有变化;当它失去焦点后,则要恢复原来的样式。此功能极大地提升用户体验,使用户的操作可以得到及时的反馈。
可以使用CSS中的伪类选择符来实现以上的功能
CSS代码如下
input:focus , textarea:focus{
boreder: 1px solid #f00
background: #fcc;
}
但是IE6并不支持除超链接元素之外的:hover伪类选择符,此时可以用jquery来弥补ie6对css支持的不足
首先在CSS中添加一个类名为focus的样式。
.focus {
border: 1px solid #f00;
background: #fcc;
}
然后再添加获取焦点和失去焦点事件
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
})
1.2多行文本框应用
首先创建一个表单,其中包含评论框
<form>
<div class = "msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<textarea id="comment" rows="8" clos="20">
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
</div>
</div>
</form>
<style type="text/css">
/*定义全局属性*/
* {
margin:0; /*外边距0px*/
padding:0;/*内边距0px*/
font:normal 12px/17px Arial; /*字体颜色,默认,字体大小,字体*/
}
/*定义消息显示区*/
.msg {
width:300px; /*宽度300px*/
margin:100px; /*定义外边距100px*/
}
/*定义消息中的标题*/
.msg_caption {
width:100%; /*宽度100%,此处就是300px*/
overflow:hidden; /*溢出范围就会自动裁剪*/
margin-bottom:1px;/*内底边距1px*/
}
/*定义消息菜单选项*/
.msg_caption span {
display:block; /*此元素将显示为块级元素,此元素前后会带有换行符。*/
float:left; /*浮动在左边*/
margin:0 2px; /*外边距上下为0左右2px*/
padding:4px 10px; /*内边距上下为4px左右10px*/
background:#898989; /*背景颜色*/
cursor:pointer;/*鼠标的形状,手形*/
color:white; /*字体颜色*/
}
/*定义消息文本域*/
.msg textarea{
width:300px; /*宽度300px*/
height:80px;/*高80px*/
border:1px solid #000;/*边框大小1px,边框粗细 solid 边框颜色 黑色*/
}
</style>
然后,需要思考以下两种情况
(1)当单击放大按钮后,如果评论框的高度小于500px,则在原有高度的基础上增加50px。
(2)当单击”缩小”按钮后,如果评论框的高度大于50px,则在原有高度的基础上减去50px。
$(function(){
var $comment = $("#comment");//获取评论宽
$(".bigger").click(function(){
//放大按钮
var height = $comment.height();//当前评论框高度
var number = 50;//增量
if( height < 500){
//重新设置高度
$comment.height(height + number);
}
});
$(".smaller").click(function(){
//缩小按钮
var height = $comment.height();//当前评论框高度
var number = 50;//减量
if( height > 50){
//重新设置高度
$comment.height(height - number);
}
});
});
但是,此时评论框显得很呆板,缺乏缓冲效果。改用自定义动画animate来实现。
$(function(){
var $comment = $("#comment");//获取评论宽
$(".bigger").click(function(){
//放大按钮
var height = $comment.height();//当前评论框高度
var number = 50;//增量
if(!$comment.is(":animated")){
//判断是否处于动画
if( height < 500){
//重新设置高度
//$comment.height(height + number);
//清空当前正在执行动画,然后在加入动画
$comment.stop(true).animate({height: height + number},300);
}
}
});
$(".smaller").click(function(){
//缩小按钮
var height = $comment.height();//当前评论框高度
var number = 50;//减量
if(!$comment.is(":animated")){
//判断是否处于动画
if( height > 50){
//重新设置高度
//$comment.height(height - number);
//清空当前正在执行动画,然后在加入动画
$comment.stop(true).animate({height: height - number},300);
}
}
});
});
2.滚动条高度变化
通过控制多行文本框的滚动条的变化,使文本框里的内容滚动。
与控制高度的方法相同,只不过此处需要控制的是另一个属性,scrollTop。
$(".up").click(function(){
//向上翻一页
var height = $comment.height();//当前评论框高度
if(!$comment.is(":animated")){
//判断是否处于动画
if( height > 50){
//清空当前正在执行动画,然后在加入动画
$comment.stop(true).animate({scrollTop: "-="+height},300);
}
}
});
$(".down1").click(function(){
//向下翻一页
var height = $comment.height();//当前评论框高度
if(!$comment.is(":animated")){
//判断是否处于动画
//清空当前正在执行动画,然后在加入动画
$comment.stop(true).animate({scrollTop: "+="+height},300);
}
});
1.3复选框应用
对复选框最基本的应用,就是对复选框进行全选、反选和全不选等操作。复杂的操作要与选项挂钩,来达到各种级联反应效果。
首先在空白网页中创建一个表单,其中放入一组复选框,HTML代码如下:
<form action="" method="post" id="regForm">
你爱好的运动是?<br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<input type="checkbox" name="items" value="排球" />排球