jQuery有很我的效果可以实现，比如说淡入淡出的效果:<html>
<head>
<style>
#box{width:200px;height:200px;background:red;opacity:1;}
</style>
</head>
<body>
<div ).slideToggle(1500)
})
})
</script>
</html>
jQuery也可以来实现一个滚动字幕的效果，比如说下边这个例子：<html>
<head>
<style>
#box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;}
</style>
</head>
<body>
<div ).html(str)
}
})
</script>
</html>
jQuery可以用来实现一个删除功能的实现,比如：<html>
<head>
<style>
#box{
width:400px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body>
<div ).empty()
});
})
</script>
</html>
jQuery还会做出一选课功能的实现,比如:<html>
<head>
<title></title>
<style>
li{
list-style:none;
}
#you{
position:absolute;
left:300px;
top:10px;
}
ul{
position:absolute;
left:150px;
top:10px;
}
</style>
<script src="jquery-1.6.js"></script>
<script>
$(function(){
$("button:first").click(function(){
$("#zuo>option:selected").prependTo($("#you"));
//$("#you").append($("#zuo>option:selected");
})
$("button:eq(1)").click(function(){
$("#you>option:selected").appendTo($("#zuo"));
//$("#you").append($("#zuo>option:selected");
})
$("button:eq(2)").click(function(){
$("#zuo>option").appendTo($("#you"));
})
$("button:eq(3)").click(function(){
$("#you>option").appendTo($("#zuo"));
})
$("button:eq(4)").click(function(){
//$("#zuo>option:first").before($("#zuo>option:selected"))
$("#zuo>option:selected").prependTo($("#zuo"));
})
$("button:eq(5)").click(function(){
// $("#zuo>option:last").after($("#zuo>option:selected"))
$("#zuo>option:selected").appendTo($("#zuo"));
})
$("button:eq(6)").click(function(){
$("#zuo>option:selected").prev().before($("#zuo>option:selected")) ;
})
$("button:eq(7)").click(function(){
$("#zuo>option:selected").next().after($("#zuo>option:selected")) ;
})
})
</script>
</head>
<body>
<select size="10" >
</select>
</body>
</html>
jQuery还能够实现下滑框功能:<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
jQuery能够实现简单的动画效果：<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery能实现一个动画的开始与停止的功能:<html>
<head>
<style>
#box{width:100px;height:100px;background:violet;position:absolute;border-radius:50%;top:50px;}
</style>
</head>
<body>
<div ).stop();
})
})
</script>
</html>
jQuery还能做一些向上轮播图片广告的功能:<html>
<head>
<style>
#box{width:600px;height:300px;overflow:hidden;border:1px solid #000;margin:0 auto;}
ul{list-style:none;}
img{width:600px;height:300px;}
*{padding:0;margin:0;}
</style>
</head>
<body>
<div )
if(m>=1200){m=0}
}
})
</script>
</html>
jQuery还能实现两个下拉展开于闭合的效果于一体的:<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p >jQuery 乐趣十足！</p>
<button>点击这里</button>
</body>
</html>
以上就是我分享给大家的，谢谢。