JQuery实现的各样效果
用Jquery可以实现很多绚丽的效果，如下图，就是各种效果：
<script type="text/javascript">
//下拉框实现背景的变化
function XX() {
//alert($("select[@name='a'] option[@selected]").text());
$("#a").val('1');
var X = $("select[@name='a'] option[@selected]").attr("value");
$(document.body).css("background", X ); }
</script>
<select id="a" onchange="XX()" name="a">
<option value="FFFF00" style ="background-color:#FFFF00 "selected="selected">黄色</option>
<option style="BACKGROUND-COLOR: #ffffed" value="ffffed">米黄色</option>
<option style="BACKGROUND-COLOR: #4394d6" value="4394d6">蓝色</option>
<option style="BACKGROUND-COLOR: #d0cfb2" value="d0cfb2">灰色</option>
<option style="BACKGROUND-COLOR: #9fc383" value="9fc383">绿色</option>
<option style="BACKGROUND-COLOR: #fcefff" value="fcefff">淡紫色</option>
</select>
<script type="text/javascript" src ="jquery-1[1].2.6.js"></script>
<script type="text/javascript">
//淡入浅出
$(document).ready(function() {
$("#txtname").click(function(){
$("#name").fadeIn("slow",function(){ document .getElementById ("name").innerHTML ="请输入用户名！";});
$("#name").fadeOut("slow",function(){ document .getElementById ("name").innerHTML ="请输入用户名！";});
$("#name").fadeTo("slow", 0.66,function(){ document .getElementById ("name").innerHTML ="请输入用户名！";});
})
})
//滑动
$(function() {
$("#txtpwd").click(function(){
$("#pwd").slideDown("slow",function(){document .getElementById ("pwd").innerHTML ="请输入用户密码！";});
$("#pwd").slideUp("slow",function(){document .getElementById ("pwd").innerHTML ="请输入用户密码！";});
//$("#pwd").slideToggle("10000",function(){document .getElementById ("pwd").innerHTML ="请输入用户密码！";});
})
})
//隐藏、显示
$(function (){
$("#txtemail").click(function (){
$("#email").show("slow",function(){ $(this).text(document .getElementById ("email").innerHTML ="邮箱用来返回你的信息");});
//$("#email").hide("slow",function (){document .getElementById ("email").innerHTML ="邮箱用来返回你的信息";});
$("#email").toggle() ;//切换隐藏或显示
})
})
//放大
$(function (){
$("#btn1").click(function(){
$("#div1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
})
$("#btn2").click(function(){
$("#div2").animate( { width: "90%"}, { queue: false, duration: 5000 } )
.animate( { fontSize: '10em' } , 1000 )
.animate( { borderWidth: 5 }, 1000);
})
$("#stop").click(function(){
$("#div2").stop();
})
})
$(function (){
// 开始动画
$("#go").click(function(){
$("#images").animate({left: '+200px'}, 5000);
})
// 当点击按钮后停止动画
$("#stop").click(function(){
$("#images").stop();
})
})
//执行一个禁用的动画
$(function (){
jQuery.fx.off = true;
$("#if").click(function(){
$("#images").toggle("slow");
});
})
</script>
