实验4 学校网站首页制作 css+js+html

实验4 学校网站首页制作 css+js+html

效果分析及建议

1.样式以独立文件保存,存放在站点的css文件夹。
2.页面布局可分为上下结构,下面又可以分为左右结构。如下图所示。
实验4 学校网站首页制作 css+js+html_第1张图片

main_left分为校园公告与学校园地两块
main_right分为上中下三块,上面包括:校园动态、教师园地,中间与图片新闻,下面为页尾信息。
3.top区域主要是8个圆圈代表的导航,与以往的区别是,它们并没有居中显示,而是有一定的边距或填充,使其靠右显示。
4.main_left比较好处理,只是要注意一下里面两块的位置。
5.main_right只要会处理其中一块,其它的也一样处理,下面以为校园动态为例说明。
实验4 学校网站首页制作 css+js+html_第2张图片

 所有的内容可以包裹在一个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部分


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>schooltitle>
    <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('
'
),$flick_block_text=a(this).data("block-text"),void 0!=$flick_block_text?1==$flick_block_text&&(a(this).find(".flick-title").wrapInner(''),a(this).find(".flick-sub-text").wrapInner('')):1==b.settings.block_text&&(a(this).find(".flick-title").wrapInner(''),a(this).find(".flick-sub-text").wrapInner(''));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='
'
,$arrow_nav_html+='
'
,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='
+c+'">
    ';e>f;)f++,$dot_nav_html+=1==f?'
  • '
    :'
  • '
    ;$dot_nav_html+="
"
,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('
'
),$flick_block_text=a(this).data("block-text"),void 0!=$flick_block_text?1==$flick_block_text&&(a(this).find(".flick-title").wrapInner(''),a(this).find(".flick-sub-text").wrapInner('')):1==b.settings.block_text&&(a(this).find(".flick-title").wrapInner(''),a(this).find(".flick-sub-text").wrapInner(''));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='
'
,$arrow_nav_html+='
'
,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='
+c+'">
    ';e>f;)f++,$dot_nav_html+=1==f?'
  • '
    :'
  • '
    ;$dot_nav_html+="
"
,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("