1、磁力图片：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
font-family:微软雅黑;
}
img {
position:absolute;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$(document).click(function (a) {
$("img").animate({ left: a.pageX, top: a.pageY }, 2000);
});
});
</script>
</head>
<body>
<img src="Images/cat.jpg" />
</body>
</html>
2、轮播图：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="Style/demo2.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var num = 0;//记录下当前显示的图片的索引
$(function () {
$(".imgitem").not(":eq(0)").hide();//页面加载的时候，第一张图片显示。
setInterval(function () {//隔多久，执行一次方法
num++;
if (num == 5)
{
num = 0;
}
ShowFocusPic();
}, 5000);
$(".btn a").click(function () {
num = $(".btn a").index($(this));//当前点击的下标在整个下标里面的索引，把这个索引值转成整数赋值给num
ShowFocusPic();
});
});
function ShowFocusPic()
{
$(".imgitem").eq(num).show();
$(".imgitem").not(":eq(" + num + ")").hide();
$(".btn li a").eq(num).addClass("selected");
$(".btn li a").not(":eq(" + num + ")").removeClass("selected");
}
</script>
</head>
<body>
<div id="list">
<div class="imgitem"><img src="Images/2.png" /></div>
<div class="imgitem"><img src="Images/3.jpg" /></div>
<div class="imgitem"><img src="Images/4.jpg" /></div>
<div class="imgitem"><img src="Images/5.jpg" /></div>
<div class="imgitem"><img src="Images/6.jpg" /></div>
<div class="btn">
<ul>
<li><a href="#" class="selected">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</div>
</body>
</html>
3、腾讯课堂菜单：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Style/demo1.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$(".showinfor").hide();//页面加载后，class为showinfor的div隐藏
$(".showinfor").hover(function () {
$(this).show();
}, function () {
$(this).hide();
});
$(".listitem").hover(function () {
var obj = $(this).offset();
var index =$(".listitem").index($(this));
$(".showinfor").eq(index).show();
$(".showinfor").eq(index).css({ "top": obj.top, "left": obj.left + 220 });
$(this).addClass("itembg");
}, function () {
var index =$(".listitem").index($(this));
$(".showinfor").eq(index).hide();
$(this).removeClass("itembg");
});
});
</script>
</head>
<body>
<div id="list">
<p class="top"><a href="#">全部课程</a></p>
<div class="listitem">
<div class="item_1"><a href="#">职业技能</a></div>
<div class="item_2">
<ul>
<li><a href="#">职能技能</a></li>
<li><a href="#">SNS营销</a></li>
<li><a href="#">公务员</a></li>
</ul>
</div>
</div>
<div class="showinfor">
职业技能
</div>
<div class="listitem">
<div class="item_1"><a href="#">IT培训</a></div>
<div class="item_2">
<ul>
<li><a href="#">网站制作</a></li>
<li><a href="#">手机开发</a></li>
<li><a href="#">游戏制作</a></li>
</ul>
</div>
</div>
<div class="showinfor">IT培训</div>
<div class="listitem">
<div class="item_1"><a href="#">语言学习</a></div>
<div class="item_2">
<ul>
<li><a href="#">英语口语</a></li>
<li><a href="#">留学英语</a></li>
<li><a href="#">韩语</a></li>
</ul>
</div>
</div>
<div class="showinfor">语言学习</div>
<div class="listitem">
<div class="item_1"><a href="#">中小学/大学</a></div>
<div class="item_2">
<ul>
<li><a href="#">中考备战</a></li>
<li><a href="#">高考备战</a></li>
</ul>
</div>
</div>
<div class="showinfor">中小学/大学</div>
<div class="listitem">
<div class="item_1"><a href="#">兴趣爱好</a></div>
<div class="item_2">
<ul>
<li><a href="#">投资理财</a></li>
<li><a href="#">美妆</a></li>
<li><a href="#">摄影</a></li>
</ul>
</div>
</div>
<div class="showinfor">兴趣爱好</div>
<div class="listitem">
<div class="item_1"><a href="#">亲子课堂</a></div>
<div class="item_2">
<ul>
<li><a href="#">幼儿教育</a></li>
<li><a href="#">家长训练营</a></li>
</ul>
</div>
</div>
<div class="showinfor">亲子课堂</div>
</div>
</body>
</html>
4、可弹出红色菜单：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #ffdee0;
}
a {
font-family: "微软雅黑";
color: white;
text-decoration: none;
}
ul {
list-style-type: none; /* 不显示项目符号 */
margin: 0px;
padding: 0px;
}
#navigation {
width: 200px;
}
#navigation ul li {
border-bottom: 1px solid #ED9F9F; /* 添加下划线 */
background-color: #c11136;
}
#navigation ul li a {
display: block; /* 区块显示 */
padding: 5px;
border-left: 12px solid #711515; /* 左边的粗红边 */
border-right: 1px solid #711515; /* 右侧阴影 */
}
#navigation ul li a:hover { /* 鼠标经过时 */
background-color: #990020; /* 改变背景色 */
color: #ffff00; /* 改变文字颜色 */
}
#navigation ul li ul li {
background-color: #e85070;
border-top: 1px solid #ED9F9F;
}
#navigation ul li ul li a {
display: block;
padding: 3px;
border-left: 28px solid #a71f1f;
border-right: 1px solid #711515;
}
#navigation ul li ul li a:hover {
background-color: #c2425d;
color: #ffff00;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//$(function () {
// $(".c").find("ul").hide();
// $(".c").toggle(function () {
// $(this).find("ul").slideDown(500);
// }, function () {
// $(this).find("ul").slideUp(500);
// });
//});
$(function () {
$(".c").find("ul").hide();
$(".c").toggle(function () {
$(this).find("ul").slideDown(500);
}, function () {
$(this).find("ul").slideUp(500);
});
});
</script>
</head>
<body>
<div id="navigation">
<ul id="listUL" >
<li class="c"><a href="#">体育明星</a>
<ul>
<li><a href="#">乔丹</a></li>
<li><a href="#">纳什</a></li>
<li><a href="#">奥利尔</a></li>
</ul>
</li>
<li class="c"><a href="#">政治明星</a>
<ul>
<li><a href="#">普京</a></li>
<li><a href="#">习总</a></li>
<li><a href="#">奥巴马</a></li>
</ul>
</li>
<li class="c"><a href="#">娱乐明星</a>
<ul>
<li><a href="#">黄家驹</a></li>
<li><a href="#">周润发</a></li>
<li><a href="#">刘德华</a></li>
</ul>
</li>
<li class="c"><a href="#">历史人物</a>
<ul>
<li><a href="#">康熙</a></li>
<li><a href="#">拿破仑</a></li>
<li><a href="#">秦始皇</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
5、砸蛋游戏：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#d1 {
margin-top: 200px;
margin-left: 200px;
}
.egg {
float: left;
background-image: url("Images/egg_1.png");
background-repeat: no-repeat;
height: 187px;
width: 158px;
margin-right: 50px;
cursor: pointer;
}
#t {
height: 87px;
width: 74px;
background-image: url("Images/egg_3.png");
background-repeat: no-repeat;
position: absolute;
top: 185px;
left: 330px;
cursor: pointer;
}
#re {
width: 160px;
height: 35px;
position:absolute;
background-color:#FFFFCC;
color:#FF6600;
font-size:14px;
font-family:"微软雅黑";
display:none;
text-align:center;
line-height:35px;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
var iNum = Math.floor(Math.random() * 4 + 1);//产生一个1~4之间的随机整数
var i = 0;
$(".egg").mouseover(function () {
var off = $(this).offset();//当前蛋的方位
$("#t").css("left", off.left + 120);
});
$(".egg").click(function () {
if (i == 4) {
alert("蛋都碎了，别砸了，刷新再来");
document.getElementById("a3").play();
return;
}
if ($(this).attr("isbreak") == "false") {
i++;
$(this).css("background-image", "url(Images/egg_2.png)");
var a = $(".egg").index($(this)) + 1;//获取到当前的蛋是第几个蛋
var off = $(this).offset();
if (a == iNum) {
$("#re").text("恭喜，您中得数码相机!").css({ "left": off.left, "top": "140px" }).slideDown();
document.getElementById("a2").play();
}
else {
$("#re").text("很遗憾，您没有中奖").css({ "left": off.left, "top": "140px" }).slideDown();
document.getElementById("a1").play();
}
$(this).attr("isbreak", "true");
}
else {
$("#re").text("蛋已砸过了").css({ "left": off.left, "top": "140px" }).slideDown();
}
});
});
</script>
</head>
<body>
<div id="d1">
<div class="egg" isbreak="false"></div>
<div class="egg" isbreak="false"></div>
<div class="egg" isbreak="false"></div>
<div class="egg" isbreak="false"></div>
</div>
<div id="t"></div>
<div id="re"></div>
<div><audio src="file/1.mp3" id="a1"></audio></div>
<div><audio src="file/2.mp3" id="a2"></audio></div>
<div><audio src="file/3.mp3" id="a3"></audio></div>
</body>
</html>
jq4 实例（磁力图片、轮播图、腾讯课堂菜单、可弹出红色菜单、砸蛋游戏）
原文：http://www.cnblogs.com/marchtree/p/4697086.html