实验4 学校网站首页制作 css+js+html
效果分析及建议
1.样式以独立文件保存,存放在站点的css文件夹。
2.页面布局可分为上下结构,下面又可以分为左右结构。如下图所示。
main_left分为校园公告与学校园地两块
main_right分为上中下三块,上面包括:校园动态、教师园地,中间与图片新闻,下面为页尾信息。
3.top区域主要是8个圆圈代表的导航,与以往的区别是,它们并没有居中显示,而是有一定的边距或填充,使其靠右显示。
4.main_left比较好处理,只是要注意一下里面两块的位置。
5.main_right只要会处理其中一块,其它的也一样处理,下面以为校园动态为例说明。
所有的内容可以包裹在一个div里,这个外层div包括h1标签(也可以是其它的,只是放一张校园动态的背景图而已)和div标签(包括列表的内容和更多内容)。
处理校园动态及更多内容的位置。可以使用相对定位和绝对定位,使这两个内容位置设置好。如果不知道具体数值,可以调试,看看哪个值比较好看,按此值设置即可。
简单的写几句,希望对大家有帮助,祝成功~~~~~
css
*{
margin: 0px;
}
.container{
background-image: url("../images/m_bg.jpg" );
margin:0 auto;
width: 1000px;
height: 900px;
}
.nav{
margin-left: 240px;
}
.nav a{
background-image: url("../images/menu_bg.png");
width: 38px;
height: 38px;
display: inline-block;
padding: 21px;
text-align: center;
color: white;
font-size: 14px;
text-decoration: none;
margin-top: 51px;
margin-left: 5px;
}
.main_left{
float: left;
position:relative;
widows: 160px;
font-size: 12px;
padding: 5px;
}
.main_left .notice{
position: absolute;
top: 88px;
left: 30px;
width: 160px;
}
.main_left .notice h2{
width: 160px;
text-align: center;
}
.main_left .notice ul{
padding-left: 10px;
list-style-type: none;
}
.main_left .notice li{
background-image: url("../images/ico2.gif");
background-repeat: no-repeat;
background-position: left center;
padding-left: 7px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: white;
}
.main_left .notice li a{
color: white;
text-decoration: none;
line-height: 24px;
}
.main_left .campas{
position: absolute;
top:297px;
left: 30px;
width: 160px;
}
.main_left .campas h2{
width: 160px;
text-align: center;
}
.main_left .campas ul{
padding-left: 10px;
list-style-type: none;
}
.main_left .campas li{
background-image: url("../images/ico2.gif");
background-repeat: no-repeat;
background-position: left center;
padding-left: 7px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: white;
}
.main_left .campas li a{
color: white;
text-decoration: none;
line-height: 22px;
}
.main_right{
float: left;
margin-top: 20px;
margin-bottom: 20px;
font-size: 14px;
width: 700px;
height: 30px;
}
.top{
position: relative;
margin-left: 223px;
}
.dl{
position: absolute;
}
.dr{
position: absolute;
top: 0px;
left: 375px;
}
.dl h2,.dr h2{
position: absolute;
top: 9px;
left: 8px;
}
.dl .more,.dr .more{
position: absolute;
top:58px ;
left: 317px;
display: block;
width:20px ;
height:114px ;
background-image: url(../images/more.png);
}
.dl ul,.dr ul {
background-image: url(../images/box1.jpg);
width: 270px;
height: 190px;
padding-left: 30px;
padding-top: 30px;
padding-right: 52px;
margin-top: 50px;
list-style-type: none;
}
.dl ul li,.dr ul li{
background-image: url(../images/ico.jpg);
background-repeat: no-repeat;
background-position:center left;
padding-left: 10px;
line-height: 28px;
height: 28px;
border-bottom: 1px dashed #e8e8e8;
}
.dl ul li a,.dr ul li a{
color: #444;
text-decoration: none;
}
.middle{
position: relative;
top: 323px;
margin-left: 223px;
width: 727px;
height: 344px;
background-image: url(../images/box2.jpg);
}
.middle h2{
position: absolute;
top:-40px;
left: 8px;
}
.middle p {
position: absolute;
top: 31px;
text-align: center;
font-size: 12px;
}
.middle #img1 {
left:41.4px;
border-width: 1px;
padding: 5px;
border-style: solid ;
}
.middle #img2 {
left:212.8px;
border-width: 1px;
padding: 5px;
border-style: solid ;
}
.middle #img3 {
left:384.2px;
border-width: 1px;
padding: 5px;
border-style: solid ;
}
.middle #img4 {
left:555.6px;
border-width: 1px;
padding: 5px;
border-style: solid ;
}
.footer{
position: relative;
top: 323px;
margin-left: 223px;
}
.footer p {
position: absolute;
top: -150px;
text-align: center;
font-size: 12px;
}
.footer #img1 {
left:57px;
border-width: 1px;
padding: 5px;
border-style: solid ;
}
.footer #img2 {
left:221px;
border-width: 1px;
padding: 5px;
border-style: solid ;
}
.footer #img3 {
left:385px;
border-width: 1px;
padding: 5px;
border-style: solid ;
}
.footer #img4{
left:555px;
border-width: 1px;
padding: 5px;
border-style: solid ;
}
.foot{
font-size: 10px;
position: relative;
margin-left:306px;
top: 392px;
}
.foot p{
margin-left: 0px;
text-align: center;
color: slategrey;
}
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>school</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="container">
<div class="nav">
<a href="#">网站首页</a>
<a href="#">学校概况</a>
<a href="#">新闻动态</a>
<a href="#">师生风采</a>
<a href="#">师生资料</a>
<a href="#">网上留言</a>
<a href="#">招聘信息</a>
<a href="#">关于我们</a>
</div>
<div class="main">
<div class="main_left">
<div class="notice">
<h2>
<img src="images/tit_ann.png">
</h2>
<ul>
<li><a href="#">关于2016年教研室课题课课课课</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">更多...</a></li>
</ul>
</div>
<div class="campas">
<h2>
<img src="images/tit_yuan.png">
</h2>
<ul>
<li><a href="#">关于2016年教研室课题课课课课</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
</ul>
</div>
</div>
<div class="main_right">
<div class="top">
<div class="dl">
<h2>
<img src="images/tit_school.png">
</h2>
<a href="#" class="more"></a>
<ul>
<li><a href="#">关于2016年教研室课题课课课课</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
</ul>
</div>
<div class="dr">
<h2>
<img src="images/tit_teach.png">
</h2>
<a href="#" class="more"></a>
<ul>
<li><a href="#">关于2016年教研室课题课课课课</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
<li><a href="#">关于2016年教研室课题库</a></li>
</ul>
</div>
</div>
<div class="middle">
<h2>
<img src="images/tit_pic.png">
</h2>
<p id="img1">
<img src="images/pic.jpg">
<br>校园图片
</p>
<p id="img2">
<img src="images/pic1.jpg"><br>
校园图片
</p>
<p id="img3">
<img src="images/pic.jpg"><br>
校园图片
</p>
<p id="img4">
<img src="images/pic1.jpg"><br>
校园图片
</p>
</div>
<div class="footer">
<p id="img1">
<img src="images/pic2.jpg"><br>
校园风光
</p>
<p id="img2">
<img src="images/pic3.jpg"><br>
校园风光
</p>
<p id="img3">
<img src="images/pic2.jpg"><br>
校园风光
</p>
<p id="img4">
<img src="images/pic3.jpg"><br>
校园风光
</p>
</div>
<div class="foot">
<p>版权所有© 中山五桂山桂南学校 学校地址 中山市五桂山镇桂南马溪西路3号</p>
</div>
</div>
</div>
</div>
</body>
</html>
JS部分
flickerplate.min js
!function(a){
var b=function(){
var b=this,c=0,d=!1,e=0,f=0,g=!1;b.settings={
arrows:!0,arrows_constraint:!1,auto_flick:!0,auto_flick_delay:10,block_text:!0,dot_navigation:!0,dot_alignment:"center",flick_animation:"transition-slide",flick_position:1,inner_width:!1,theme:"light"},b.init=function(f,h){
b.settings=a.extend(b.settings,h),d=f,d.addClass("flickerplate"),d.find("ul:first").addClass("flicks"),d.find("li:first").addClass("first-flick"),c=b.settings.flick_position-1,$data_flick_position=d.data("flick-position"),void 0!=$data_flick_position&&(c=$data_flick_position-1),d.attr("data-flick-position",c);var i=d.data("flick-animation");b.settings.flick_animation=b.settings.flick_animation||i,d.addClass("animate-"+b.settings.flick_animation);var j=d.data("theme"),k=d.find(".first-flick").data("theme");j&&j.length>0?(b.settings.theme=j,d.addClass(k&&k.length>0?"flicker-theme-"+k:"flicker-theme-"+j)):d.addClass("flicker-theme-"+b.settings.theme);var l=d.data("block-text");if(void 0!=l&&0==l&&(b.settings.block_text=!1),d.find("ul.flicks > li").each(function(){
e++,a(this).wrapInner('<div class="flick-inner"><div class="flick-content"></div></div>'),$flick_block_text=a(this).data("block-text"),void 0!=$flick_block_text?1==$flick_block_text&&(a(this).find(".flick-title").wrapInner('<span class="flick-block-text"></span>'),a(this).find(".flick-sub-text").wrapInner('<span class="flick-block-text"></span>')):1==b.settings.block_text&&(a(this).find(".flick-title").wrapInner('<span class="flick-block-text"></span>'),a(this).find(".flick-sub-text").wrapInner('<span class="flick-block-text"></span>'));var c=a(this).data("background");c&&c.length>0&&a(this).css("background-image","url("+c+")"),$flick_theme=a(this).data("theme"),$flick_theme&&$flick_theme.length>0&&a(this).addClass("flick-theme-"+$flick_theme)}),"scroller-slide"!=b.settings.flick_animation){
$data_arrow_navigation=d.data("arrows"),void 0!=$data_arrow_navigation?0!=$data_arrow_navigation&&b.create_arrow_navigation():1==b.settings.arrows&&b.create_arrow_navigation(),$data_dot_navigation=d.data("dot-navigation"),$data_dot_alignment=d.data("dot-alignment");var m=b.settings.dot_alignment;void 0!=$data_dot_alignment&&("left"==$data_dot_alignment||"right"==$data_dot_alignment)&&(m=$data_dot_alignment),void 0!=$data_dot_navigation?0!=$data_dot_navigation&&b.create_dot_navigation(m):1==b.settings.dot_navigation&&b.create_dot_navigation(m),$flick_delay=1e3*b.settings.auto_flick_delay,$data_auto_flick=d.data("auto-flick"),$data_auto_flick_delay=d.data("auto-flick-delay"),$data_auto_flick_delay&&($flick_delay=1e3*$data_auto_flick_delay),void 0!=$data_auto_flick&&(b.settings.auto_flick=0!=$data_auto_flick),b.auto_flick_start(),b.flick_flicker(),"jquery-slide"!=b.settings.flick_animation&&d.find("ul.flicks").bind("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",function(){
g=!1})}b.move_flicker(c)},b.flick_flicker=function(){
Modernizr.touch&&d.on("drag",function(a){
0==g&&"horizontal"==a.orientation&&(a.preventDefault(),1==a.direction?--c<0?c=0:(g=!0,b.move_flicker(c)):++c==e?c=e-1:(g=!0,b.move_flicker(c)))})},b.create_arrow_navigation=function(){
$arrow_nav_html='<div class="arrow-navigation left"><div class="arrow"></div></div>',$arrow_nav_html+='<div class="arrow-navigation right"><div class="arrow"></div></div>',d.prepend($arrow_nav_html),a(".arrow-navigation").mouseover(function(){
a(this).toggleClass("hover")}),a(".arrow-navigation").mouseout(function(){
a(this).toggleClass("hover")}),$data_arrows_constraint=d.data("arrows-constraint"),void 0!=$data_arrows_constraint&&(b.settings.arrows_constraint=$data_arrows_constraint),d.find(".arrow-navigation").on("click",function(){
a(this).hasClass("right")?++c==e&&(c=b.settings.arrows_constraint?e-1:0):--c<0&&(c=b.settings.arrows_constraint?0:e-1),b.move_flicker(c)})},b.create_dot_navigation=function(c){
for($dot_nav_html='<div class="dot-navigation '+c+'"><ul>';e>f;)f++,$dot_nav_html+=1==f?'<li><div class="dot active"></div></li>':'<li><div class="dot"></div></li>';$dot_nav_html+="</ul></div>",d.prepend($dot_nav_html),d.find(".dot-navigation li").on("click",function(){
b.move_flicker(a(this).index())})},b.auto_flick_start=function(){
1==b.settings.auto_flick&&(b.flicker_auto=setInterval(b.auto_flick,$flick_delay))},b.auto_flick=function(){
++c==e&&(c=0),b.move_flicker(c)},b.auto_flick_stop=function(){
b.flicker_auto=clearInterval(b.flicker_auto)},b.auto_flick_reset=function(){
b.auto_flick_stop(),b.auto_flick_start()},b.move_flicker=function(a){
c=a,"transform-slide"==b.settings.flick_animation?d.find("ul.flicks").attr({
style:"-webkit-transform:translate3d(-"+c+"%, 0, 0);-o-transform:translate3d(-"+c+"%, 0, 0);-moz-transform:translate3d(-"+c+"%, 0, 0);transform:translate3d(-"+c+"%, 0, 0)"}):"transition-slide"==b.settings.flick_animation?d.find("ul.flicks").attr({
style:"left:-"+c+"00%;"}):"jquery-slide"==b.settings.flick_animation&&d.find("ul.flicks").animate({
left:"-"+c+"00%"},function(){
g=!1}),$crt_flick=d.find("ul.flicks li:eq("+c+")"),d.removeClass("flicker-theme-light").removeClass("flicker-theme-dark"),d.addClass($crt_flick.hasClass("flick-theme-dark")?"flicker-theme-dark":$crt_flick.hasClass("flick-theme-light")?"flicker-theme-light":"flicker-theme-"+b.settings.theme),d.find(".dot-navigation .dot.active").removeClass("active"),d.find(".dot:eq("+c+")").addClass("active"),d.attr("data-flick-position",c),b.auto_flick_reset()}};a.fn.flicker=function(c){
var d=this.length;return this.each(function(e){
var f=a(this),g="flickerplate"+(d>1?"-"+ ++e:""),h=(new b).init(f,c);f.data(g,h).data("key",g)})}}(jQuery);
jquery-finger-v0.1.0.min js
!function(a){
function b(a,b){
return(m?b.originalEvent.touches[0]:b)["page"+a.toUpperCase()]}function c(b,c,d){
var g=a.Event(c,t);a.event.trigger(g,{
originalEvent:b},b.target),g.isDefaultPrevented()&&b.preventDefault(),d&&(a.event.remove(r,p+"."+q,e),a.event.remove(r,o+"."+q,f))}function d(d){
var k=d.timeStamp||+new Date;i!=k&&(i=k,s.x=t.x=b("x",d),s.y=t.y=b("y",d),s.time=k,s.target=d.target,t.orientation=null,g=!1,h=!1,j=setTimeout(function(){
h=!0,c(d,"press")},a.Finger.pressDuration),a.event.add(r,p+"."+q,e),a.event.add(r,o+"."+q,f),u.preventDefault&&d.preventDefault())}function e(d){
return t.x=b("x",d),t.y=b("y",d),t.dx=t.x-s.x,t.dy=t.y-s.y,t.adx=Math.abs(t.dx),t.ady=Math.abs(t.dy),(g=t.adx>u.motionThreshold||t.ady>u.motionThreshold)?(clearTimeout(j),t.orientation||(t.adx>t.ady?(t.orientation="horizontal",t.direction=t.dx>0?1:-1):(t.orientation="vertical",t.direction=t.dy>0?1:-1)),d.target!==s.target?(d.target=s.target,void f.call(this,a.Event(o+"."+q,d))):void c(d,"drag")):void 0}function f(a){
var b,d=a.timeStamp||+new Date,e=d-s.time;if(clearTimeout(j),a.target===s.target){
if(g||h)e<u.flickDuration&&c(a,"flick"),t.end=!0,b="drag";else{
var f=k===a.target&&d-l<u.doubleTapInterval;b=f?"doubletap":"tap",k=f?null:s.target,l=d}c(a,b,!0)}}var g,h,i,j,k,l,m="ontouchstart"in window,n=m?"touchstart":"mousedown",o=m?"touchend touchcancel":"mouseup mouseleave",p=m?"touchmove":"mousemove",q="finger",r=a("html")[0],s={
},t={
},u=a.Finger={
pressDuration:300,doubleTapInterval:300,flickDuration:150,motionThreshold:5};a.event.add(r,n+"."+q,d)}(jQuery),function(a){
var b=function(){
var b=this,c=0,d=!1,e=0,f=0,g=!1;b.settings={
block_text:!0,inner_width:!1,theme:"light",flick_animation:"transition-slide",auto_flick:!0,auto_flick_delay:10,dot_navigation:!0,dot_alignment:"center",arrows:!0},b.init=function(f,h){
b.settings=a.extend(b.settings,h),d=f,d.addClass("flickerplate"),d.find("ul:first").addClass("flicks"),d.find("li:first").addClass("first-flick"),d.attr("data-flick-position",c);var i=d.data("flick-animation");i&&i.length>0?("transform-slide"==i?b.settings.flick_animation="transform-slide":"transition-slide"==i?b.settings.flick_animation="transition-slide":"jquery-slide"==i?b.settings.flick_animation="jquery-slide":"scroller-slide"==i&&(b.settings.flick_animation="scroller-slide"),d.addClass("animate-"+i)):d.addClass("animate-"+b.settings.flick_animation);var j=d.data("theme"),k=d.find(".first-flick").data("theme");j&&j.length>0?(b.settings.theme=j,d.addClass(k&&k.length>0?"flicker-theme-"+k:"flicker-theme-"+j)):d.addClass("flicker-theme-"+b.settings.theme);var l=d.data("block-text");if(void 0!=l&&0==l&&(b.settings.block_text=!1),d.find("li").each(function(){
e++,a(this).wrapInner('<div class="flick-inner"><div class="flick-content"></div></div>'),$flick_block_text=a(this).data("block-text"),void 0!=$flick_block_text?1==$flick_block_text&&(a(this).find(".flick-title").wrapInner('<span class="flick-block-text"></span>'),a(this).find(".flick-sub-text").wrapInner('<span class="flick-block-text"></span>')):1==b.settings.block_text&&(a(this).find(".flick-title").wrapInner('<span class="flick-block-text"></span>'),a(this).find(".flick-sub-text").wrapInner('<span class="flick-block-text"></span>'));var c=a(this).data("background");c&&c.length>0&&a(this).css("background-image","url("+c+")"),$flick_theme=a(this).data("theme"),$flick_theme&&$flick_theme.length>0&&a(this).addClass("flick-theme-"+$flick_theme)}),"scroller-slide"!=b.settings.flick_animation){
$data_arrow_navigation=d.data("arrows"),void 0!=$data_arrow_navigation?0!=$data_arrow_navigation&&b.create_arrow_navigation():1==b.settings.arrows&&b.create_arrow_navigation(),$data_dot_navigation=d.data("dot-navigation"),$data_dot_alignment=d.data("dot-alignment");var m=b.settings.dot_alignment;void 0!=$data_dot_alignment&&("left"==$data_dot_alignment?m="left":"right"==$data_dot_alignment&&(m="right")),void 0!=$data_dot_navigation?0!=$data_dot_navigation&&b.create_dot_navigation(m):1==b.settings.dot_navigation&&b.create_dot_navigation(m),$flick_delay=1e3*b.settings.auto_flick_delay,$data_auto_flick=d.data("auto-flick"),$data_auto_flick_delay=d.data("auto-flick-delay"),$data_auto_flick_delay&&($flick_delay=1e3*$data_auto_flick_delay),void 0!=$data_auto_flick&&(b.settings.auto_flick=0!=$data_auto_flick?!0:!1),b.auto_flick_start(),b.flick_flicker(),"jquery-slide"!=b.settings.flick_animation&&d.find("ul.flicks").bind("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",function(){
g=!1})}},b.flick_flicker=function(){
Modernizr.touch&&d.on("drag",function(a){
0==g&&"horizontal"==a.orientation&&(a.preventDefault(),1==a.direction?(c--,0>c?c=0:(g=!0,b.move_flicker(c))):(c++,c==e?c=e-1:(g=!0,b.move_flicker(c))))})},b.create_arrow_navigation=function(){
$arrow_nav_html='<div class="arrow-navigation left"><div class="arrow"></div></div>',$arrow_nav_html+='<div class="arrow-navigation right"><div class="arrow"></div></div>',d.prepend($arrow_nav_html),a(".arrow-navigation").mouseover(function(){
0==a(this).hasClass("hover")&&a(this).addClass("hover")}),a(".arrow-navigation").mouseout(function(){
1==a(this).hasClass("hover")&&a(this).removeClass("hover")}),a(".arrow-navigation").on("click",function(){
a(this).hasClass("right")?(c++,c==e&&(c=0)):(c--,0>c&&(c=e-1)),b.move_flicker(c)})},b.create_dot_navigation=function(c){
for($dot_nav_html='<div class="dot-navigation '+c+'"><ul>';e>f;)f++,$dot_nav_html+=1==f?'<li><div class="dot active"></div></li>':'<li><div class="dot"></div></li>';$dot_nav_html+="</ul></div>",d.prepend($dot_nav_html),d.find(".dot-navigation li").on("click",function(){
b.move_flicker(a(this).index())})},b.auto_flick_start=function(){
1==b.settings.auto_flick&&(b.flicker_auto=setInterval(b.auto_flick,$flick_delay))},b.auto_flick=function(){
c++,c==e&&(c=0),b.move_flicker(c)},b.auto_flick_stop=function(){
b.flicker_auto=clearInterval(b.flicker_auto)},b.auto_flick_reset=function(){
b.auto_flick_stop(),b.auto_flick_start()},b.move_flicker=function(a){
c=a,"transform-slide"==b.settings.flick_animation?d.find("ul.flicks").attr({
style:"-webkit-transform:translate3d(-"+c+"%, 0, 0);-o-transform:translate3d(-"+c+"%, 0, 0);-moz-transform:translate3d(-"+c+"%, 0, 0);transform:translate3d(-"+c+"%, 0, 0)"}):"transition-slide"==b.settings.flick_animation?d.find("ul.flicks").attr({
style:"left:-"+c+"00%;"}):"jquery-slide"==b.settings.flick_animation&&d.find("ul.flicks").animate({
left:"-"+c+"00%"},function(){
g=!1}),$crt_flick=d.find("ul.flicks li:eq("+c+")"),d.removeClass("flicker-theme-light").removeClass("flicker-theme-dark"),d.addClass($crt_flick.hasClass("flick-theme-dark")?"flicker-theme-dark":$crt_flick.hasClass("flick-theme-light")?"flicker-theme-light":"flicker-theme-"+b.settings.theme),d.find(".dot-navigation .dot.active").removeClass("active"),d.find(".dot:eq("+c+")").addClass("active"),d.attr("data-flick-position",c),b.auto_flick_reset()}};a.fn.flicker=function(c){
var d=this.length;return this.each(function(e){
var f=a(this),g="flickerplate"+(d>1?"-"+ ++e:""),h=(new b).init(f,c);f.data(g,h).data("key",g)})}}(jQuery);
jquery-v1.10.2.min js
!function(a,b){
function c(a){
var b=a.length,c=kb.type(a);return kb.isWindow(a)?!1:1===a.nodeType&&b?!0:"array"===c||"function"!==c&&(0===b||"number"==typeof b&&b>0&&b-1 in a)}function d(a){
var b=zb[a]={
};return kb.each(a.match(mb)||[],function(a,c){
b[c]=!0}),b}function e(a,c,d,e){
if(kb.acceptData(a)){
var f,g,h=kb.expando,i=a.nodeType,j=i?kb.cache:a,k=i?a[h]:a[h]&&h;if(k&&j[k]&&(e||j[k].data)||d!==b||"string"!=typeof c)return k||(k=i?a[h]=bb.pop()||kb.guid++:h),j[k]||(j[k]=i?{
}:{
toJSON:kb.noop}),("object"==typeof c||"function"==typeof c)&&(e?j[k]=kb.extend(j[k],c):j[k].data=kb.extend(j[k].data,c)),g=j[k],e||(g.data||(g.data={
}),g=g.data),d!==b&&(g[kb.camelCase(c)]=d),"string"==typeof c?(f=g[c],null==f&&(f=g[kb.camelCase(c)])):f=g,f}}function f(a,b,c){
if(kb.acceptData(a)){
var d,e,f=a.nodeType,g=f?kb.cache:a,i=f?a[kb.expando]:kb.expando;if(g[i]){
if(b&&(d=c?g[i]:g[i].data)){
kb.isArray(b)?b=b.concat(kb.map(b,kb.camelCase)):b in d?b=[b]:(b=kb.camelCase(b),b=b in d?[b]:b.split(" ")),e=b.length;for(;e--;)delete d[b[e]];if(c?!h(d):!kb.isEmptyObject(d))return}(c||(delete g[i].data,h(g[i])))&&(f?kb.cleanData([a],!0):kb.support.deleteExpando||g!=g.window?delete g[i]:g[i]=null)}}}function g(a,c,d){
if(d===b&&1===a.nodeType){
var e="data-"+c.replace(Bb,"-$1").toLowerCase();if(d=a.getAttribute(e),"string"==typeof d){
try{
d="true"===d?!0:"false"===d?!1:"null"===d?null:+d+""===d?+d:Ab.test(d)?kb.parseJSON(d):d}catch(f){
}kb.data(a,c,d)}else d=b}return d}function h(a){
var b;for(b in a)if(("data"!==b||!kb.isEmptyObject(a[b]))&&"toJSON"!==b)return!1;return!0}function i(){
return!0}function j(){
return!1}function k(){
try{
return Y.activeElement}catch(a){
}}function l(a,b){
do a=a[b];while(a&&1!==a.nodeType);return a}function m(a,b,c){
if(kb.isFunction(b))return kb.grep(a,function(a,d){
return!!b.call(a,d,a)!==c});if(b.nodeType)return kb.grep(a,function(a){
return a===b!==c});if("string"==typeof b){
if(Qb.test(b))return kb.filter(b,a,c);b=kb.filter(b,a)}return kb.grep(a,function(a){
return kb.inArray(a,b)>=0!==c})}function n(a){
var b=Ub.split("|"),c=a.createDocumentFragment();if(c.createElement)for(;b.length;)c.createElement(b.pop());return c}function o(a,b){
return kb.nodeName(a,"table")&&kb.nodeName(1===b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function p(a){
return a.type=(null!==kb.find.attr(a,"type"))+"/"+a.type,a}function q(a){
var b=ec.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function r(a,b){
for(var c,d=0;null!=(c=a[d]);d++)kb._data(c,"globalEval",!b||kb._data(b[d],"globalEval"))}function s(a,b){
if(1===b.nodeType&&kb.hasData(a)){
var c,d,e,f=kb._data(a),g=kb._data(b,f),h=f.events;if(h){
delete g.handle,g.events={
};for(c in h)for(d=0,e=h[c].length;e>d;d++)kb.event.add(b,c,h[c][d])}g.data&&(g.data=kb.extend({
},g.data))}}function t(a,b){
var c,d,e;if(1===b.nodeType){
if(c=b.nodeName.toLowerCase(),!kb.support.noCloneEvent&&b[kb.expando]){
e=kb._data(b);for(d in e.events)kb.removeEvent(b,d,e.handle);b.removeAttribute(kb.expando)}"script"===c&&b.text!==a.text?(p(b).text=a.text,q(b)):"object"===c?(b.parentNode&&(b.outerHTML=a.outerHTML),kb.support.html5Clone&&a.innerHTML&&!kb.trim(b.innerHTML)&&(b.innerHTML=a.innerHTML)):"input"===c&&bc.test(a.type)?(b.defaultChecked=b.checked=a.checked,b.value!==a.value&&(b.value=a.value)):"option"===c?b.defaultSelected=b.selected=a.defaultSelected:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}}function u(a,c){
var d,e,f=0,g=typeof a.getElementsByTagName!==W?a.getElementsByTagName(c||"*"):typeof a.querySelectorAll!==W?a.querySelectorAll(c||"*"):b;if(!g)for(g=[],d=a.childNodes||a;null!=(e=d[f]);f++)!c||kb.nodeName(e,c)?g.push(e):kb.merge(g,u(e,c));return c===b||c&&kb.nodeName(a,c)?kb.merge([a],g):g}function v(a){
bc.test(a.type)&&(a.defaultChecked=a.checked)}function w(a,b){
if(b in a)return b;for(var c=b.charAt(0).toUpperCase()+b.slice(1),d=b,e=yc.length;e--;)if(b=yc[e]+c,b in a)return b;return d}function x(a,b){
return a=b||a,"none"===kb.css(a,"display")||!kb.contains(a.ownerDocument,a)}function y(a,b){
for(var c,d,e,f=[],g=0,h=a.length;h>g;g++)d=a[g],d.style&&(f[g]=kb._data(d,"olddisplay"),c=d.style.display,b?(f[g]||"none"!==c||(d.style.display=""),""===d.style.display&&x(d)&&(f[g]=kb._data(d,"olddisplay",C(d.nodeName)))):f[g]||(e=x(d),(c&&"none"!==c||!e)&&kb._data(d,"olddisplay",e?c:kb.css(d,"display"))));for(g=0;h>g;g++)d=a[g],d.style&&(b&&"none"!==d.style.display&&""!==d.style.display||(d.style.display=b?f[g]||"":"none"));return a}function z(a,b,c){
var d=rc.exec(b);return d?Math.max(0,d[1]-(c||0))+(d[2]||"px"):b}function A(a,b,c,d,e){
for(var f=c===(d?"border":"content")?4:"width"===b?1:0,g=0;4>f;f+=2)"margin"===c&&(g+=kb.css(a,c+xc[f],!0,e)),d?("content"===c&&(g-=kb.css(a,"padding"+xc[f],!0,e)),"margin"!==c&&(g-=kb.css(a,"border"+xc[f]+"Width",!0,e))):(g+=kb.css(a,"padding"+xc[f],!0,e),"padding"!==c&&(g+=kb.css(a,"border"+xc[f]+"Width",!0,e)));return g}function B(a,b,c){
var d=!0,e="width"===b?a.offsetWidth:a.offsetHeight,f=kc(a),g=kb.support.boxSizing&&"border-box"===kb.css(a,"boxSizing",!1,f);if(0>=e||null==e){
if(e=lc(a,b,f),(0>e||null==e)&&(e=a.style[b]),sc.test(e))return e;d=g&&(kb.support.boxSizingReliable||e===a.style[b]),e=parseFloat(e)||0}return e+A(a,b,c||(g?"border":"content"),d,f)+"px"}function C(a){
var b=Y,c=uc[a];return c||(c=D(a,b),"none"!==c&&c||(jc=(jc||kb("<iframe frameborder='0' width='0' height='0'/>").css("cssText","display:block !important")).appendTo(b.documentElement),b=(jc[0].contentWindow||jc[0].contentDocument).document,b.write("<!doctype html><html><body>"),b.close(),c=D(a,b),jc.detach()),uc[a]=c),c}function D(a,b){
var c=kb(b.createElement(a)).appendTo(b.body),d=kb.css(c[0],"display");return c.remove(),d}function E(a,b,c,d){
var e;if(kb.isArray(b))kb.each(b,function(b,e){
c||Ac.test(a)?d(a,e):E(a+"["+("object"==typeof e?b:"")+"]",e,c,d)});else if(c||"object"!==kb.type(b))d(a,b);else for(e in b)E(a+"["+e+"]",b[e],c,d)}function F(a){
return function(b,c){
"string"!=typeof b&&(c=b,b="*");var d,e=0,f=b.toLowerCase().match(mb)||[];if(kb.isFunction(c))for(;d=f[e++];)"+"===d[0]?(d=d.slice(1)||"*",(a[d]=a[d]||[]).unshift(c)):(a[d]=a[d]||[]).push(c)}}function G(a,b,c,d){
function e(h){
var i;return f[h]=!0,kb.each(a[h]||[],function(a,h){
var j=h(b,c,d);return"string"!=typeof j||g||f[j]?g?!(i=j):void 0:(b.dataTypes.unshift(j),e(j),!1)}),i}var f={
},g=a===Rc;return e(b.dataTypes[0])||!f["*"]&&e("*")}function H(a,c){
var d,e,f=kb.ajaxSettings.flatOptions||{
};for(e in c)c[e]!==b&&((f[e]?a:d||(d={
}))[e]=c[e]);return d&&kb.extend(!0,a,d),a}function I(a,c,d){
for(var e,f,g,h,i=a.contents,j=a.dataTypes;"*"===j[0];)j.shift(),f===b&&(f=a.mimeType||c.getResponseHeader("Content-Type"));if(f)for(h in i)if(i[h]&&i[h].test(f)){
j.unshift(h);break}if(j[0]in d)g=j[0];else{
for(h in d){
if(!j[0]||a.converters[h+" "+j[0]]){
g=h;break}e||(e=h)}g=g||e}return g?(g!==j[0]&&j.unshift(g),d[g]):void 0}function J(a,b,c,d){
var e,f,g,h,i,j={
},k=a.dataTypes.slice();if(k[1])for(g in a.converters)j[g.toLowerCase()]=a.converters[g];for(f=k.shift();f;)if(a.responseFields[f]&&(c[a.responseFields[f]]=b),!i&&d&&a.dataFilter&&(b=a.dataFilter(b,a.dataType)),i=f,f=k.shift())if("*"===f)f=i;else if("*"!==i&&i!==f){
if(g=j[i+" "+f]||j["* "+f],!g)for(e in j)if(h=e.split(" "),h[1]===f&&(g=j[i+" "+h[0