实例介绍
【实例简介】提供源码下载，仅供学习交流使用。
【实例截图】
【核心代码】
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input { border: 0 none; margin: 0; padding: 0; }
body { background: url("images/bodyBg.jpg") no-repeat scroll center top #000000; font-family: '新宋体' , '宋体' ,Verdana; font-size: 12px; color: #EEEEEE; overflow-y: scroll; overflow-x: hidden;}
ul, ol { list-style-type: none; }
select, input, img { outline: medium none; vertical-align: middle; }
a { text-decoration: none; outline: medium none; color: White; }
/*导航相关 begin*/
.nav_c { width: 1000px; margin: 40px auto 0; }
.logo { float: left; margin-top: -20px; }
.nav { width: 720px; background: url("images/navBg.png") no-repeat; height: 77px; padding-left: 40px; position: relative; z-index: 10; right: 0; margin-left: 265px; }
.nav div { position: absolute; background: url("images/navA_hover.png") no-repeat; width: 116px; height: 78px; text-indent: -9999px; top: -2px; z-index: -10; }
.nav ul { }
.nav ul li { display: inline-block; line-height: 60px; height: 77px; width: 106px; text-align: center; margin: 0 2px; }
.nav ul li a { font-size: 14px; color: White; text-shadow: 1px 1px 1px #000000; font-family: Verdana; }
.nav ul li a:hover { color: #63B1FF; text-shadow: 1px 1px 1px #000000; }
.nav ul li span { background: none repeat scroll 0 0 #FFFFFF; box-shadow: 1px 1px 0 #000000; height: 14px; margin: 24px -8px 0 0; overflow: hidden; vertical-align: top; width: 1px; float: right; }
/*导航相关 end*/
/*header begin*/
.header { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); height: 26px; line-height: 26px; box-shadow: 1px 2px 10px #000000; }
.header .main{ width: 990px; margin: 0 auto;}
.header h3 { font-size: 12px; font-weight: normal; color: #CDCDCD; float: left; width: 700px; }
.header .tool_bar{ float: right;}
.header .tool_bar a{ color: White; color: #CDCDCD; }
/*header end*/
/*flash img begin*/
#flash { background: url("images/slideBg.png") no-repeat; width: 1010px; height: 385px; position: relative; margin: 10px auto; }
.outer { background: url("pic/1.png") no-repeat; width: 840px; height: 306px; position: relative; transition: background-image 10s linear; border-radius: 10px; top: 32px; left: 84px; }
.outer div { background: url("pic/1.png"); width: 134px; height: 153px; position: absolute; transition: transform 0.5s linear; text-indent: -9999px; }
.bt { display: inline-block; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 41px; height: 42px; text-indent: -9999px; position: absolute; opacity: 0.5; transition: opacity 1s linear; }
#pre { background-position: -274px -43px; top: 160px; left: 20px; }
#next { background-position: -315px -43px; top: 160px; right: 20px; }
#pre:hover { background-position: -273px 0; opacity: 1; }
#next:hover { background-position: -314px 0; opacity: 1; }
#pager { position: absolute; bottom: 14px; right: 100px; }
#pager a { display: inline-block; width: 24px; height: 24px; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; opacity: 0.5; transition: opacity 1s linear; background-position: -143px -1px; text-indent: -9999px; } #pager .sec { opacity: 1; background-position: -119px -1px;}
#pager a:hover { opacity: 1; background-position: -119px -1px; }
/*flash img end*/
/*快速导航 begin*/
.fast_nav { width: 72px; height: 72px; position: fixed; top: 50px; right: 30px; transition: right 0.2s linear, top 0.2s linear;}
#fast_nav_close { width: 24px; height: 24px; border-radius: 14px; border: 1px solid white; position: absolute; right: -8px; top: -8px; z-index: 700; display: none; }
#fast_nav_close div { background: white; border-radius: 4px; text-indent: -9999px; width: 0; height: 0; border: 1px solid white; transform: rotate(45deg); cursor: pointer; }
#fast_nav_close .nav_x { width: 13px; height: 1px; margin: 11px auto; }
#fast_nav_close .nav_y { height: 13px; width: 1px; margin: -20px auto; }
#fast_nav_bt { background: url("images/fast_nav.png") no-repeat; width: 72px; height: 72px; text-indent: -9999px; position: absolute; cursor: pointer; z-index: 500; }
.fast_nav .list { width: 0; height: 0; position: absolute; background: url("images/fast_nav_open.png") no-repeat; display: none; }
.fast_nav h3{font-family: "Microsoft YaHei"; font-size: 18px; text-shadow:0 0 2px white; font-weight: normal;}
.fast_nav .list li{ line-height: 22px; overflow: hidden; min-width: 260px; }
#fast_nav01 { right: 303px; top: 188px; background-position: 0 0; height: 0; z-index: 400; }
#fast_nav02 { background-position: -303px 0; z-index: 399; }
#fast_nav03 { background-position: 0 -186px; z-index: 377; }
#fast_nav04 { background-position: -303px -186px; z-index: 388; }
#fast_nav01 ul{ margin-left: 54px;}
#fast_nav02 ul{ margin-left: 54px;}
#fast_nav03 ul{ margin-left: 54px; margin-top: 30px;}
#fast_nav04 ul{ margin-left: 54px; margin-top: 30px;}
#fast_nav01 h3{ margin: 26px 0 26px 66px;}
#fast_nav02 h3{ margin: 26px 0 26px 150px}
#fast_nav03 h3{ margin: 26px 0 0 76px;}
#fast_nav04 h3{ margin: 26px 86px 0 0; text-align: right; }
.fast_nav h3{ display: none; }
.fast_nav ul{ display: none; }
div.open { width: 606px; height: 376px; }
div.open h3 { display: block; }
div.open ul { display: block; }
div.open .list { width: 303px; height: 188px; }
div.open #fast_nav_bt { left: 267px; top: 152px; }
/*快速导航 end*/
/*新闻列表 begin*/
.box { border: 1px solid white; display: inline-block; width: 324px; height: 220px; border-radius: 6px; box-shadow: 0 0 4px white; margin: 10px auto;}
.box h3 { color: #63B1FF; font-weight:bold; padding: 8px 12px; font-size: 14px; text-shadow: 1px 1px 1px #000000; display: inline-block; }
.box h3 span{ color: #93989D; font-weight:bold; padding: 5px 10px; }
.box .h a{ background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; width: 12px; height: 18px; float: right; margin: 10px 10px 0 0 ; }
.box .h .pre{ background-position: -513px -29px;}
.box .h .next{ background-position: -526px -29px;}
.box .c { background: #DEE1E7 url("images/news_bg.png"); color: Black; padding: 10px; line-height: 24px; height: 168px; border-radius: 0 0 6px 6px;}
.box .c a { color: #474747; }
.box .c a:hover { color: Black; text-decoration: underline; }
.box .list { position: absolute; width: 306px; }
.box .list span { float: right;}
.box .list li { position: relative; height: 24px; line-height: 24px; overflow: hidden; z-index: 10; }
.box .list li div{ top: 0; position: absolute; z-index: 2; width: 100%; transition: top 0.3s linear; }
/*新闻列表 end*/
.main { width: 1000px; margin: 10px auto 0;}
#main_r { float: right; width: 640px; }
#main_r li{ display: inline-block; text-align: center; margin: 0 12px; }
#main_r a { width: 100px; height: 100px; display: block; background: url("images/znsComBg.png") no-repeat scroll 0 0 transparent; float: none; margin: 0 auto; }
#main_r .js { background-position: -111px -369px; }
#main_r .html { background-position: 0 -367px; }
#main_r .css { background-position: -220px -366px; }
</style>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//导航相关
var div_hover = $('#nav_div');
var nav = $('#nav');
$('#nav ul').delegate('li', 'mouseenter', function (e) {
var el = $(this),
el_left = el.offset().left,
div_left = div_hover.offset().left;
time_step = 100;
var l = el_left - nav.offset().left;
div_hover.stop().animate({ left: l 'px' }, time_step, function () {
if (el_left > div_left) {
div_hover.animate({ left: (l - 20) 'px' }, time_step).animate({ left: l 'px' }, time_step);
} else {
div_hover.animate({ left: (l 20) 'px' }, time_step).animate({ left: l 'px' }, time_step);
}
});
});
//flash图片相关
var index = 1;
var timer = null;
$('#outer div').each(function (i) {
var el = $(this);
var y = i > 5 ? 153 : 0,
x = i > 5 ? i - 6 : i;
el.css({ 'left': (x * 134) 'px', 'top': y 'px', 'background-position': (-1 * x * 134) 'px ' (-1 * y) 'px' });
var s = '';
});
function setFlash() {
if (timer) clearTimeout(timer);
$('#outer').css('background-image', 'url("pic/' index '.png")');
$('#pager a').removeClass('sec');
$('#pager .p' index).addClass('sec');
$('#outer div').each(function (i) {
var el = $(this);
var step = 200;
var x = 0, y = 0;
var regx = Math.round(Math.random() * 80);
var regy = Math.round(Math.random() * 80);
var r1 = Math.random() > 0.5 ? 1 : -1;
var r2 = Math.random() > 0.5 ? 1 : -1;
if (i < 3) {
x = -1 * step;
y = -1 * step;
} else if (i < 6) {
x = step;
y = -1 * step;
} else if (i < 9) {
x = -1 * step;
y = step;
} else {
x = step;
y = step;
}
x = r1 * Math.random() * step;
y = r2 * Math.random() * step;
el.css('transform', 'translate(' x 'px, ' y 'px) skew(' regx 'deg, ' regy 'deg)');
// el.css('transform', 'rotate(360deg)');
setTimeout(function () {
el.css('transform', '');
el.css('background-image', 'url("pic/' index '.png")');
}, 500);
});
}
$('#pre').click(function () {
if (index == 1) index = 5; else index--;
setFlash();
});
$('#next').click(function () {
if (index == 5) index = 1; else index ;
setFlash();
});
$('#pager').delegate('a', 'click', function () {
var el = $(this);
var num = el.html();
index = num;
setFlash();
});
var func = function () {
if (index == 5) index = 1; else index ;
setFlash();
timer = setTimeout(func, 3000);
}
func();
//快速导航
var step = 250;
// width: 606px; height: 376px;
// transition: width 1s linear, height 1s linear;
$('#fast_nav_bt').click(function () {
click_fast();
});
$('#fast_nav_close').click(function () {
click_fast();
});
function click_fast() {
if ($('#fast_nav').hasClass('open')) {
close_nav3();
} else {
var r = (parseInt($(window).width()) / 2 - 303) 'px';
$('#fast_nav').css({ right: r, top: '100px' });
open_fast();
}
}
function open_fast() {
$('#fast_nav').addClass('open');
setTimeout(open_nav1, step)
}
function open_nav1() {
$('#fast_nav01').css('width', '303px');
$('#fast_nav01').show();
$('#fast_nav01').animate({ height: '188px', top: '0' }, step, open_nav2);
}
function open_nav2() {
$('#fast_nav02').css({ 'left': '0', 'top': '0' }).show();
$('#fast_nav02').animate({ left: '303px' }, step, open_nav4);
}
function open_nav3() {
$('#fast_nav03').css({ 'left': '303px', 'top': '188px' }).show();
$('#fast_nav03').animate({ left: '0' }, step);
$('#fast_nav_close').show();
}
function open_nav4() {
$('#fast_nav04').css({ 'left': '303px', 'top': '0' }).show();
$('#fast_nav04').animate({ top: '188px' }, step, open_nav3);
}
// function close_fast() {
// $('#fast_nav_bt').animate({ left: '0', top: '0' }, step, close_nav3);
// }
function close_nav3() {
$('#fast_nav_close').hide();
$('#fast_nav03').stop().animate({ left: '188px' }, step, close_nav4);
}
function close_nav4() {
$('#fast_nav03').hide();
$('#fast_nav04').animate({ top: '0' }, step, close_nav2);
}
function close_nav2() {
$('#fast_nav04').hide();
$('#fast_nav02').animate({ left: '0' }, step, close_nav1);
}
function close_nav1() {
$('#fast_nav02').hide();
$('#fast_nav01').animate({ top: '188px', height: '0' }, step, function () {
$('#fast_nav01').css('width', '0');
$('#fast_nav').removeClass('open');
$('#fast_nav').css({ right: '30px', top: '50px' });
// close_fast();
}).hide();
}
//新闻列表
var next = $('#list_next');
var pre = $('#list_pre');
var next_data = [
'[公告]关于2月2日公开课案例bug修复001',
'js视频下载第四波来啦',
'JS课程2013年开班信息',
'新的JS课程页面更新',
'JS视频教程免费第四波 欢迎观看~',
'js视频下载第三波来啦',
'2月3日YY公开课视频已提供下载'
];
next.click(function () {
//此处代码有点恶心。。。
$('.list li div').each(function (i) {
var el = $(this);
setTimeout(function () {
el.append($('<br/><a href="javascript:;">' next_data[i] '</a><span>2013-03-24</span>'));
el.css('top', '-24px');
}, 150 * i);
});
});
pre.click(function () {
//此处代码有点恶心。。。
$('.list li div').each(function (i) {
var el = $(this);
setTimeout(function () {
el.css('top', '0');
}, 150 * i);
});
});
}); //ready
</script>
</head>
<body>
<header class="header">
<div class="main">
<h3>
智能社是一家专注于web前端开发技术的专业培训机构，现推出“HTML5”、“JavaScript”和“HTML CSS”三套课程</h3>
<div class="tool_bar">
<a href="javascript:;">登陆</a> | <a href="javascript:;">关于我们</a></div>
</div>
</header>
<div class="nav_c">
<h1 class="logo">
<a href="http://www.zhinengshe.com/">
<img alt="智能社——前端培训专家" src="images/logo.png"></a>
</h1>
<nav class="nav" id="nav">
<div id="nav_div">
hover</div>
<ul>
<li><a href="javascript:;">首页</a><span></span></li>
<li><a href="javascript:;">JS课程</a><span></span></li>
<li><a href="javascript:;">HTML5课程</a><span></span></li>
<li><a href="javascript:;">视频课程</a><span></span></li>
<li><a href="javascript:;">课程案例</a><span></span></li>
<li><a href="javascript:;">联系方式</a></li>
</ul>
</nav>
</div>
<div id="flash">
<a id="pre" href="javascript:;" class="bt">pre</a> <a id="next" href="javascript:;"
class="bt">next</a>
<div id="pager">
<a class="p1" href="javascript:;">1</a> <a class="p2" href="javascript:;">2</a>
<a class="p3" href="javascript:;">3</a> <a class="p4" href="javascript:;">4</a>
<a class="p5" href="javascript:;">5</a>
</div>
<div class="outer" id="outer">
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
</div>
</div>
<div id="fast_nav" class="fast_nav">
<div id="fast_nav_bt">
fast_nav
</div>
<div id="fast_nav_close">
<div class="nav_x">
x
</div>
<div class="nav_y">
y
</div>
</div>
<div id="fast_nav01" class="list">
<h3 class="fastCom_title_l">
近期开班信息</h3>
<ul>
<li>JS周末班 2012年10月13日开班 [已开班]</li><li>JS全日制 2012年10月19日开班 <a
href="contact.html">[咨询]</a></li><li>HTML5周末班 2012年10月21日开班 <a href="contact.html">[咨询]</a></li><li>
JS周末班 2012年11月17日开班 <a href="contact.html">[咨询]</a></li></ul>
</div>
<div id="fast_nav02" class="list">
<h3 class="fastCom_title_r">
最新留言</h3>
<ul>
<li><a href="message.html">老师 这个留言板分页 鼠标移动上去 就...</a></li><li><a href="message.html">
看到16集里说会开远程教学，不知道是不...</a></li><li><a href="message.html">这个站做的真的很牛逼呀，貌似后台都是...</a></li><li>
<a href="message.html">现在有没有能加上的Q群啊blue老湿</a></li></ul>
</div>
<div id="fast_nav03" class="list">
<ul>
<li><a href="js02_desc.html#zns_zt_content">JS课程包括哪些内容？</a></li><li><a href="html5_01_desc.html#zns_zt_content">
HTML5课程包括哪些内容？</a></li><li><a href="js02_desc.html#zns_zt_content">课程收费是多少？</a></li><li>
<a href="contact.html">我想去学习，如何报名呢？</a></li></ul>
<h3 class="fastCom_title_l">
常见问题</h3>
</div>
<div id="fast_nav04" class="list">
<ul>
<li><a href="http://www.zhinengshe.com/news/4.html">积分系统上线</a></li><li><a href="http://www.zhinengshe.com/news/1.html">
邀请码系统开始公测</a></li><li><a href="http://zhinengshe.com/video.html">视频教程，已更新到第31集</a></li><li>
<a href="http://zhinengshe.com/contact.html">智能社联系方式</a></li></ul>
<h3 class="fastCom_title_r">
综合其他</h3>
</div>
</div>
<div class="main">
<div id="news" class="box">
<div class="h">
<h3>
新闻中心<span>News center</span></h3>
<a class="next" id="list_next" title="下一页" href="javascript:;"></a><a class="pre"
id="list_pre" title="上一页" href="javascript:;"></a>
</div>
<div class="c">
<ul class="list">
<li>
<div>
<a target="_blank" href="http://www.zhinengshe.com/news/26.html">[公告]关于2月2日公开课案例bug修复</a>
<span>2013-03-24</span>
</div>
</li>
<li>
<div>
<a target="_blank" href="http://bbs.zhinengshe.com/thread-430-1-1.html">3月16日 第二次YY公开课已提供下载</a>
<span>2013-03-24</span>
</div>
</li>
<li>
<div>
<a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社 第二次YY公开课</a>
<span>2013-03-24</span>
</div>
</li>
<li>
<div>
<a target="_blank" href="http://www.zhinengshe.com/news/26.html">智能社乔迁新址</a> <span>2013-03-24</span>
</div>
</li>
<li>
<div>
<a target="_blank" href="http://www.zhinengshe.com/news/26.html">不会JavaScript能混前端么？</a>
<span>2013-03-24</span>
</div>
</li>
<li>
<div>
<a target="_blank" href="http://www.zhinengshe.com/news/26.html">[2月3日YY公开课视频已提供下载</a>
<span>2013-03-24</span>
</div>
</li>
<li>
<div>
<a target="_blank" href="http://www.zhinengshe.com/news/26.html">论坛开放邀请注册了哦</a>
<span>2013-03-24</span>
</div>
</li>
</ul>
</div>
</div>
<div id="main_r" class="box">
<div class="h">
<h3>
热门课程<span>Hot course</span></h3>
</div>
<div class="c">
<ul>
<li><a href="javascript:;" class="js"></a>
<div>
精通JavaScript 2.0课程</div>
<div>
(适合具备XHTML CSS基础的朋友)</div>
</li>
<li><a href="javascript:;" class="html"></a>
<div>
精通JavaScript 2.0课程</div>
<div>
(适合具备XHTML CSS基础的朋友)</div>
</li>
<li><a href="javascript:;" class="css"></a>
<div>
精通JavaScript 2.0课程</div>
<div>
(适合具备XHTML CSS基础的朋友)</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论