在工作中，常用的特效，其实不是很多。主要分为以下几大类：

1.常见Tab切换

2.有关输入框 input的简单交互

3.进度条

4. Banner切换

5.可拖拽弹出层

6.文字超出则省略且显示为点点

7.内容区内部右边3D云标签


1.常见Tab切换

$(function(){

$('.tab_change ul li').click(function(){

$(this).addClass('cur').siblings().removeClass('cur');

$('.tab_change ol li').eq($(this).index()).show().siblings().hide();

})

})


2.有关输入框 input的简单交互

1.一般要求的直接带入写法

<input type=“text” value=“请输入关键字”

onfocus=“if(value==‘请输入关键字’){value=‘ ’}”

onblur=“if(value==‘’){value=‘请输入关键字’}” />

2.特别要求，比如用jQuery在html结构页面外写

$(function(){

$( ‘.text’).focus(function(){

if($(this).val()==‘请输入关键字’) {

$(this).val(‘’) ;

}

})

$( ‘.text’).blur(function(){

if($(this).val()==‘’){

$(this).val(‘请输入关键字’);

}

})

3.特别要求，比如多个输入框的验证，以及输入前后，字体的颜色

$('#name , #psw , #code').focus(function(){

if( $(this).val()=='请输入用户名' || $(this).val()=='请输入密码’|| $(this).val()=='请输入验证码') {

$(this).val('');

$(this).css('color','#000');

}

});

$('#name , #psw , #code').blur(function(){

if( $(this).val()=='') {

$('#name').val('请输入用户名');

$('#psw').val('请输入密码');

$('#code').val('请输入验证码');

$(this).css('color','#9a9a9a');

}

});

4.特别要求,比如原为文本框的，后写入时变为输入密码框

<input name="psw" id="psw" type="text" value="请输入密码" />

<input name="password" id="password" type="password" class="input display_none" />


$("#psw").focus(function() {

var text_value = $(this).val();

if (text_value ==this.defaultValue){

$("#psw").hide();

$("#password").show().focus();

}

});


$("#password").blur(function() {

var text_value = $(this).val();

if (text_value == ""){

$("#psw").show();$("#password").hide();

}

});

5.特别要求：输入前文字居中，输入后文字左靠齐

$("input[type='text']").focus(function(){

$(this).css({"text-align":"left","color":"#333"})

$(this).val(" ")

})


$("input[type='text']").blur(function(){

if($(this).val()==" "){

$(this).css({"text-align":"center","color":"#dfdfdf"})

$(this).val("－请输入－")

}

})