|
|
| Line 1: |
Line 1: |
| | + | |
| | <html> | | <html> |
| | + | |
| | | | |
| | <style type="text/css"> | | <style type="text/css"> |
| − | #top_title{
| |
| − | display:none;
| |
| − | }
| |
| | * { | | * { |
| | box-sizing: border-box; | | box-sizing: border-box; |
| Line 19: |
Line 18: |
| | | | |
| | body { | | body { |
| | + | width:100%; |
| | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| | font-size: 14px; | | font-size: 14px; |
| Line 161: |
Line 161: |
| | background-color: #eee; | | background-color: #eee; |
| | } | | } |
| − | html {
| + | @font-face{ |
| − | font-family: sans-serif; | + | font-family:'pinghei'; |
| − | -webkit-text-size-adjust: 100%; | + | src:url('https://static.igem.org/mediawiki/2018/5/5d/T--SCAU-China--pinghei.ttf') format('truetype'); /*导入字体文件*/ |
| − | -ms-text-size-adjust: 100%; | + | |
| | } | | } |
| − | #mainDiv{
| |
| | | | |
| − | margin: 0; | + | body{ |
| − | height: 2700px;
| + | margin:0px; |
| − | padding-top: 70px;
| + | width:1300px; |
| − | min-width: 1140px;
| + | height:100%; |
| − | background: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg') center center;
| + | |
| | } | | } |
| − | .heart {
| + | |
| − | width: 1140px;
| + | #head1{ |
| − | margin: 0 auto;/* 通用的版心 */
| + | position: relative; |
| − | }
| + | top:-120px; |
| − | #mask {
| + | |
| | width: 100%; | | width: 100%; |
| − | height: 2600px; | + | height:100%; |
| − | background: rgba(0, 0, 0, 0.3);
| + | |
| − | margin-top: -15px;
| + | |
| − | padding-top: 15px;
| + | |
| | } | | } |
| − | .DBoard {/* 展板样式 */ | + | .navbar-fixed-top { |
| − | margin: 0px auto 40px auto;
| + | top: 20px; |
| − | width: 1000px; | + | border-width: 0 0 1px; |
| − | height: 500px;
| + | } |
| − | border-radius: 3px;
| + | #Title{ |
| − | background-color: #fff;
| + | width: 400px; |
| − | overflow: hidden;
| + | |
| | position: relative; | | position: relative; |
| | + | left: 40%; |
| | + | margin-top: -38%; |
| | + | font-family: 'pinghei'; |
| | + | font-size: 50px; |
| | + | color: white; |
| | } | | } |
| − | .DBoard0 {/*文字样式*/
| + | #Title1{ |
| − | margin: 0px auto 40px auto;
| + | |
| − | width: 1000px; | + | position: relative; |
| − | height: 500px;
| + | width: 400px; |
| − | border-radius: 3px;
| + | left: 37%; |
| | + | margin-top: -1%; |
| | + | font-family: 'pinghei'; |
| | + | font-size: 40px; |
| | color: white; | | color: white; |
| − | overflow: hidden;
| + | } |
| | + | #Title2{ |
| | position: relative; | | position: relative; |
| | + | width: 400px; |
| | + | left: 39%; |
| | + | margin-top: -1%; |
| | + | font-family: 'pinghei'; |
| | + | font-size: 40px; |
| | + | color: white; |
| | } | | } |
| − | #mask p {
| + | |
| − | color: #fff;
| + | #img1{ |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | #lists-DB {
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | #lists-DB:hover #arr-l,#lists-DB:hover #arr-r{
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | #lists { | + | |
| | position: relative; | | position: relative; |
| − | width: 4000px; | + | float: right; |
| | + | margin-top:20%; |
| | + | width: 60%; |
| | + | height:60%; |
| | } | | } |
| − | #lists img { | + | #d1-t{ |
| − | float: left;
| + | position: relative; width: 600px;/*一定要限制字的宽度 否则滚动条会出问题*/ |
| | + | margin-top:35%; |
| | + | font-family: 'pinghei'; |
| | + | font-size: 60px; |
| | + | color: black; |
| | + | left: 13%; |
| | } | | } |
| − | #arr-l,#arr-r { | + | #d1-t1{ |
| − | display: block;
| + | position: relative; width: 600px; |
| − | position: absolute; | + | margin-top:2%; |
| − | width: 40px; | + | font-family: 'pinghei'; |
| − | height: 60px;
| + | font-size: 25px; |
| − | background: rgba(0, 0, 0, .4);
| + | color: black; |
| − | top: 50%; | + | left:5%; |
| − | margin-top: -30px;
| + | |
| − | color: #fff;
| + | |
| − | font: 600 30px/60px "宋体"; | + | |
| − | line-height: 60px;
| + | |
| − | text-align: center;
| + | |
| − | display: none;
| + | |
| | } | | } |
| − | #arr-l:hover,#arr-r:hover { | + | #d1-t2{ |
| − | background: rgba(0, 0, 0, .7);
| + | position: relative; width: 600px; |
| | + | margin-top:0%; |
| | + | font-family: 'pinghei'; |
| | + | font-size: 25px; |
| | + | color: black; |
| | + | left: 5%; |
| | } | | } |
| − | #arr-l { | + | |
| − | left: 0;
| + | #img2{ |
| | + | position: relative; |
| | + | |
| | + | margin-top:0%; |
| | + | width: 100%; |
| | + | height:100%; |
| | } | | } |
| − | #arr-r { | + | /*按钮*/ |
| − | right: 0;
| + | #d2-t2{ |
| | + | position: relative; width: 130px; |
| | + | |
| | + | margin-top:0%; |
| | + | margin-left: auto; |
| | + | margin-right: auto; |
| | + | left: 0px; |
| | } | | } |
| − | #buttons { | + | #ha{ |
| | + | |
| | + | width: 150px; |
| | + | height: 65px; |
| | + | |
| | + | margin-top: 20px; |
| | + | font-family:微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif; |
| | + | font-size:16px; |
| | + | color: white; |
| | + | |
| | + | top: 20px; |
| | position: absolute; | | position: absolute; |
| − | bottom: 15px; | + | text-decoration:none; /*超链接无下划线*/ |
| − | left: 50%; | + | border-style:solid; |
| | + | border-width:2px; |
| | + | border-bottom-color:white ; |
| | + | border-left-color:white ;/*设置左边框颜色为黑色*/ |
| | + | border-right-color:white ;/*设置右边框颜色为黑色*/ |
| | + | border-top-color:white ; |
| | + | border-radius: 5px; |
| | + | |
| | + | text-align:center; |
| | + | line-height:60px; |
| | + | |
| | + | -webkit-transition:all linear 0.30s; |
| | + | -moz-transition:all linear 0.30s; |
| | + | transition:all linear 0.30s; |
| | } | | } |
| − | #buttons span { | + | #d2-t2 a:hover { background:white;color: #1BBC9B; } |
| − | width: 12px;
| + | #d2-t{ |
| − | height: 12px;
| + | position: relative; |
| − | background: #ccc;
| + | margin-top:-23%; |
| − | float: left;
| + | font-family: Arial,Helvetica,sans-serif,SimSun; |
| − | border-radius: 50%;
| + | font-size: 60px; |
| − | margin: 0 5px 0 5px; | + | color: white; |
| | + | margin-left: auto; |
| | + | margin-right: auto; |
| | + | text-align: center; |
| | } | | } |
| − | .on {
| + | #d2-t1{ |
| − | background-color: #333 !important;
| + | position: relative; |
| − | }
| + | margin-top:2%; |
| − | #toTop {
| + | font-family: Arial,Helvetica,sans-serif,SimSun;; |
| − | width: 50px;
| + | font-size: 25px; |
| − | height: 50px;
| + | color: white; |
| − | background: url("https://static.igem.org/mediawiki/2018/b/b6/T--SCAU-China--toTop.png") no-repeat center center rgba(0, 0, 0, .3);
| + | margin-left: auto; |
| − | position: fixed;
| + | margin-right: auto; |
| − | right: 50px;
| + | text-align: center; |
| − | bottom: 5px;
| + | |
| − | cursor: pointer;
| + | |
| − | display: none;
| + | |
| | } | | } |
| | | | |
| | | | |
| − | }
| |
| − | #img4{
| |
| − | width: 10%;
| |
| − | }
| |
| | #content { | | #content { |
| − | width: 101%; | + | width: 103.5%; |
| | padding: 15px; | | padding: 15px; |
| | border: none; | | border: none; |
| Line 287: |
Line 324: |
| | #content { | | #content { |
| | position: relative; | | position: relative; |
| − | width: 101%; | + | width: 103.5%; |
| | margin: 0 auto; | | margin: 0 auto; |
| | padding: 5px 5px 5px 5px; | | padding: 5px 5px 5px 5px; |
| Line 297: |
Line 334: |
| | z-index: 2; | | z-index: 2; |
| | } | | } |
| − | #title{
| |
| − | height: 100px;
| |
| − | background: rgba(0, 0, 0, 0.3);
| |
| − | text-align: left;
| |
| − | font-size: 60px;
| |
| − | color: white;
| |
| − | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
| − | line-height: 100px;
| |
| | | | |
| | + | #d2 { |
| | + | height: 600px; |
| | } | | } |
| − | #article1{
| + | body { |
| − | background: rgba(0, 0, 0, 0); | + | background-color:white; |
| − | height: 1710px;
| + | |
| | | | |
| − | }
| + | margin: 0px; |
| − | #article1 p{
| + | width: 100%; |
| | + | height: 100%; |
| | | | |
| − | text-align: left;
| |
| − | position: relative;
| |
| − | color: white;
| |
| − | margin-top: 20px;
| |
| − |
| |
| − | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
| − | font-size:20px;
| |
| | } | | } |
| | | | |
| | + | </style> |
| | | | |
| | | | |
| − | #title2{
| + | <div class="Tan MingYang"></div> |
| − | height: 50px;
| + | <div class="Li JiaDong"></div> |
| − | background: rgba(0, 0, 0, 0.3);
| + | <div class="Huang XinLing"></div> |
| − | text-align: left;
| + | |
| − | font-size:30px;
| + | |
| − | color: white;
| + | |
| − | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| + | |
| − | line-height: 50px;
| + | |
| − | }
| + | |
| − | #art1{
| + | |
| − | background: rgba(0, 0, 0, 0);
| + | |
| − | height: 150px;
| + | |
| − | }
| + | |
| − | #art2{
| + | |
| − | background: rgba(0, 0, 0, 0);
| + | |
| − | height: 700px;
| + | |
| − | }
| + | |
| | | | |
| − | #art3{
| |
| − | background: rgba(0, 0, 0, 0);
| |
| − | height: 50px;
| |
| − | }
| |
| − | #art1 p{
| |
| − | text-align: left;
| |
| − | position: relative;
| |
| − | color: white;
| |
| − | margin-top: 0px;
| |
| − |
| |
| − | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
| − | font-size:20px;
| |
| − | }
| |
| − | #art2 p{
| |
| − | text-align: left;
| |
| − | position: relative;
| |
| − | color: white;
| |
| − | margin-top:0px;
| |
| − |
| |
| − | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
| − | font-size:20px;
| |
| − | }
| |
| − | body {
| |
| − | background-color: white;
| |
| − | }
| |
| − | </style>
| |
| | <div class="navbar-default"> | | <div class="navbar-default"> |
| | <div class="container"> | | <div class="container"> |
| Line 396: |
Line 381: |
| | </li> | | </li> |
| | <li> | | <li> |
| − | <a href="#">Collaborations</a> | + | <a href="https://2018.igem.org/Team:SCAU-China/Collaborations">Collaborations</a> |
| | </li> | | </li> |
| | </ul> | | </ul> |
| Line 404: |
Line 389: |
| | <span class="caret"></span> | | <span class="caret"></span> |
| | <ul class='dropdown-menu'> | | <ul class='dropdown-menu'> |
| − | <li><a href="#">Description</a></li> | + | <li><a href="https://2018.igem.org/Team:SCAU-China/Description">Description</a></li> |
| | <li><a href="#">Design</a></li> | | <li><a href="#">Design</a></li> |
| | </ul> | | </ul> |
| Line 448: |
Line 433: |
| | <span class="caret"></span> | | <span class="caret"></span> |
| | <ul class='dropdown-menu'> | | <ul class='dropdown-menu'> |
| | + | <li><a href="#">Overview</a></li> |
| | + | <li><a href="https://2018.igem.org/Team:SCAU-China/silver">Silver</a></li> |
| | <li><a href="https://2018.igem.org/Team:SCAU-China/integrated">Integrated</a></li> | | <li><a href="https://2018.igem.org/Team:SCAU-China/integrated">Integrated</a></li> |
| − | <li><a href="#">Engagement</a></li> | + | <li><a href="https://2018.igem.org/Team:SCAU-China/engagement">Public Engagement & Education</a></li> |
| − | <li><a href="#">Entrepreneurship</a></li> | + | <li><a href="https://2018.igem.org/Team:SCAU-China/Collaborations">Collaborations</a></li> |
| − | <li><a href="#"></a></li>
| + | |
| − | <li><a href="#"></a></li>
| + | |
| | </ul> | | </ul> |
| | </li> | | </li> |
| Line 460: |
Line 446: |
| | </div> | | </div> |
| | | | |
| − | | + | <div id="head"> |
| − | | + | <img src="https://static.igem.org/mediawiki/2018/c/c6/T--SCAU-China--overview.JPG" id="head1"> |
| − | <div id="mainDiv"> | + | <!--<div id=" Title"> SCAU- 2018</div> |
| − | <div class="heart"><!-- 版心 --> | + | <div id="Title1">Anything you can do,</div> |
| − | <div id="mask"><!-- 半透明底板 --> | + | <div id="Title2">you can do better.</div>--> |
| − | | + | |
| − | <div class="DBoard" id="title"> | + | |
| − | | + | |
| − | | + | |
| − | Integrated Human Practices
| + | |
| − | | + | |
| | | | |
| | </div> | | </div> |
| − | <div class="DBoard" id="title2">
| |
| | | | |
| − | Help High School IGEM Team
| + | <div id="d2"> |
| | + | <img src="https://static.igem.org/mediawiki/2018/7/7a/T--SCAU-China--timg1.JPG" id="img2"> |
| | + | <div id="d2-t">Silver </div> |
| | + | <div id="d2-t1">The Human Practices - Silver of SCAU-China 2018. |
| | | | |
| | </div> | | </div> |
| − | <div class="DBoard" id="art1"> | + | <div id="d2-t2"> |
| − | <p>
| + | <a id="ha" href="https://2018.igem.org/Team:SCAU-China/silver">Learn more</a> |
| − | | + | |
| − | In order to better understand the problems faced by the high school iGEM team and to verify the feasibility of our high school iGEM guide (You can find it on our Human Practices - Silver page), we have maintained close contact with the two high school iGEM teams (GDSYZX & GZHS-United).
| + | |
| − | | + | |
| − | | + | |
| − | </p> | + | |
| − | | + | |
| | </div> | | </div> |
| − | <div class="DBoard" id="title2">
| |
| − |
| |
| − | Conduct Basic Experimental Training Courses
| |
| − |
| |
| | </div> | | </div> |
| − | <div class="DBoard" id="art2">
| |
| − | <p>
| |
| | | | |
| − | Considering that the iGEM team in high school has no experimental basis, it is very difficult to participate in an academic competition such as iGEM. We conducted a two-day basic experimental skills training course for the 2018 high school iGEM team GDSYZX to help them better complete wet experiment tasks in the competition.
| |
| | | | |
| | | | |
| − | </p> | + | <div id="d2"> |
| | + | <img src="https://static.igem.org/mediawiki/2018/4/47/T--SCAU-China--timg2.JPG" id="img2"> |
| | + | <div id="d2-t">Integrated </div> |
| | + | <div id="d2-t1">Integrated Human Practices of SCAU-China 2018. |
| | | | |
| − | <p>This course includes:</p>
| |
| − |
| |
| − | <p>1.Explain basic synthetic biology concepts</p>
| |
| − |
| |
| − | <p>2.Teaching basic molecular experiment skills</p>
| |
| − |
| |
| − | <p>·Explain the principle of experiment</p>
| |
| − |
| |
| − | <p>·Experimental operation guidance and practice</p>
| |
| − |
| |
| − | <p>·Extracting red fluorescent protein particles</p>
| |
| − |
| |
| − | <p>·Prepare agarose gel & verify</p>
| |
| − |
| |
| − | <p>
| |
| − |
| |
| − | ·Hot hit conversion
| |
| − |
| |
| − | </p>
| |
| − |
| |
| − | <p>
| |
| − |
| |
| − | ·Flat line
| |
| − |
| |
| − | </p>
| |
| − |
| |
| − | <p>
| |
| − |
| |
| − | ·Result observation and analysis
| |
| − |
| |
| − | </p>
| |
| − |
| |
| − | <p>3.Project content and team building experience exchange</p>
| |
| − |
| |
| − | <p>
| |
| − |
| |
| − | In addition to conducting basic experimental training, we closely followed the progress of the follow-up experiments of the two team’s projects(GDSYZX & GZHS-United),held a project meeting to exchange the progress of our project. We put forward some follow-up experimental suggestions for GZHS-United.
| |
| − |
| |
| − | </p>
| |
| − |
| |
| − | <p>
| |
| − |
| |
| − | (We also have a similar course for Guangdong Country Garden School, which may form an iGEM team. Detailed information can be found on the Public Engagement & Education page)
| |
| − |
| |
| − | </p>
| |
| | </div> | | </div> |
| − | <div class="DBoard" id="title2">Help High School Team Complete Interlab</div> | + | <div id="d2-t2"> |
| − | <div class="DBoard" id="art1"><!-- 展板 --> | + | <a id="ha" href="https://2018.igem.org/Team:SCAU-China/integrated">Learn more</a> |
| − | <p>
| + | </div> |
| − | | + | |
| − | We learned that the high school team GZHS-United encountered equipment and venue difficulties when completing the interlab task. We helped the high school team complete the interlab competition requirements.
| + | |
| − | | + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | These help include:</p>
| + | |
| − | <p> | + | |
| − | ·Lend out our lab and some equipment (such as a microplate reader)
| + | |
| − | | + | |
| − | | + | |
| − | </p>
| + | |
| − | <p>·Teached some related operations and methods of using the equipments
| + | |
| − | | + | |
| − | </p> | + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | ·Help GZHS-United analyze their data
| + | |
| − | | + | |
| − | </p>
| + | |
| | </div> | | </div> |
| | | | |
| − | <div class="DBoard" id="title2">Conduct Art Design Courses</div> | + | <div id="d2"> |
| − | | + | <img src="https://static.igem.org/mediawiki/2018/b/b7/T--SCAU-China--timg3.JPG" id="img2"> |
| − | <div class="DBoard" id="art2"><!-- 展板 --> | + | <div id="d2-t">Public Engagement & Education </div> |
| − | | + | <div id="d2-t2"> |
| − | <p>
| + | <a id="ha" href="https://2018.igem.org/Team:SCAU-China/engagement">Learn more</a> |
| − | | + | </div> |
| − | We started a seven-day art design course to help GDSYZX & GZHS-United teams better complete their wiki, poster, banner, logo, team flag, team uniform and other aspects of design work. In this course, we explained the iGEM official requirements, and taught some basic use of design software, and led the two high school teams to make their prototypes of posters, logos, and wikis.
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | This course specifically includes:
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | ·Introduce the requirements of the iGEM competition for poster, banner (...)
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | ·Note on poster design, excellent poster appreciation in previous years
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | ·Presentation ppt design considerations
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | ·Considerations for wiki design, popular trend analysis
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | ·Logo design considerations
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p> | + | |
| − | | + | |
| − | ·Basic photography training course
| + | |
| − | | + | |
| − | </p> | + | |
| − | | + | |
| − | <p> | + | |
| − | | + | |
| − | ·Basic use of Photoshop
| + | |
| − | | + | |
| − | </p> | + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | ·Basic use of Illustrator
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | ·Experimental result graph, data graph processing
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | Perhaps other teams also need information about this course, please feel free to contact us by email, we will be happy to help you.
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <p>
| + | |
| − | | + | |
| − | E-mail：scau_igem_2018@foxmail.com (official mailbox)
| + | |
| − | | + | |
| − | </p>
| + | |
| − | | + | |
| − | <p> | + | |
| − | | + | |
| − | jihahuazou@foxmail.com (communication member mailbox)
| + | |
| − | | + | |
| − | </p> | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| | </div> | | </div> |
| | | | |
| | + | <div id="d2"> |
| | + | <img src="https://static.igem.org/mediawiki/2018/d/dd/T--SCAU-China--timg4.JPG" id="img2"> |
| | + | <div id="d2-t">Collaborations </div> |
| | + | <div id="d2-t1">View Some University Team or High School of SCAU-China 2018. |
| | | | |
| − |
| |
| − |
| |
| − | <p>School's name:SCAU</p>
| |
| − | <p>Member's name:SCAU</p>
| |
| − | <p>Designed by:SCAU</p>
| |
| | </div> | | </div> |
| | + | <div id="d2-t2"> |
| | + | <a id="ha" href="https://2018.igem.org/Team:SCAU-China/Collaborations">Learn more</a> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | <!-- 回到顶部按钮 -->
| + | |
| − | <em id="toTop"></em>
| + | |
| | | | |
| | <script> | | <script> |
| Line 705: |
Line 521: |
| | } | | } |
| | </script> | | </script> |
| − |
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − |
| |
| − | var a= function() {
| |
| − | var box01 = document.getElementById("lists-DB");
| |
| − | var lis = document.getElementById("lists");//获得轮播图图片盒子
| |
| − | var btns = document.getElementById("buttons");//获得按钮盒子
| |
| − | var imgs = lis.getElementsByTagName("img");//获得图片伪数组
| |
| − | btns.style.width = 24 * (imgs.length - 2) + "px";
| |
| − | btns.style.marginLeft = -(12 * (imgs.length - 2)) + "px";//动态赋值
| |
| − | for(var i = 0;i < imgs.length - 2; i++){
| |
| − | //动态生成小圆点
| |
| − | var span = document.createElement("span");
| |
| − | btns.appendChild(span);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | //轮播图正式部分
| |
| − | var prev = document.getElementById("arr-l");
| |
| − | var next = document.getElementById("arr-r");
| |
| − | var animated = false;//防止计时器多次被触发变量
| |
| − |
| |
| − | function animate(offset) {
| |
| − | var time = 300;//滚动一张图片总用时
| |
| − | var inteval = 10;//滚动一次的间隔时间
| |
| − | var speed = offset / (time / inteval);//每次滚动滑动的像素
| |
| − | var left = parseInt(lis.style.left) + offset;//先计算出滚动后的left值
| |
| − | function go() {
| |
| − | animated = true;//为true代表正在运行
| |
| − | //滑动函数
| |
| − | if(((speed > 0) + (parseInt(lis.style.left) < left)===2) || ((speed < 0) + (parseInt(lis.style.left)) > left===2)){
| |
| − | lis.style.left = parseInt(lis.style.left) + speed + "px";
| |
| − | setTimeout(go,inteval);//设置计时器
| |
| − | }
| |
| − | else {
| |
| − | lis.style.left = left + "px";
| |
| − | if(parseInt(lis.style.left) > -1000) lis.style.left = -(1000 * (imgs.length - 2)) + "px";
| |
| − | if(parseInt(lis.style.left) < -(1000 * (imgs.length - 2))) lis.style.left = -1000 + "px";
| |
| − | animated = false;//结束运行
| |
| − | }
| |
| − | }
| |
| − | go();//调用函数
| |
| − |
| |
| − | }
| |
| − | prev.onclick = function() {
| |
| − | if(animated) return;//正在轮播停止
| |
| − | if(index == 0) index = spans.length - 1;
| |
| − | else index --;
| |
| − | animate(1000);
| |
| − | showButton();
| |
| − | }
| |
| − | next.onclick = function() {
| |
| − | if(animated) return;
| |
| − | if(index == spans.length - 1) index = 0;
| |
| − | else index ++;
| |
| − | animate(-1000);
| |
| − | showButton();
| |
| − | }
| |
| − | var index = 0;//记录现在className为on的按钮
| |
| − |
| |
| − | var spans = btns.getElementsByTagName("span");//得到btns下所有的span标签
| |
| − | spans[0].className = "on";
| |
| − | for(var i = 0;i < spans.length;i ++ ) {
| |
| − | spans[i].index = i;//自定义属性
| |
| − | spans[i].onclick = function() {
| |
| − | if(animated) return;
| |
| − | if(this.className == "on") return;
| |
| − | animate((index - this.index) * 1000);
| |
| − | index = this.index;
| |
| − | showButton();
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function showButton() { //显示按钮运动的函数
| |
| − | for(var j = 0;j < spans.length;j ++) {//排它思想
| |
| − | //if(spans[j].className == "on") oldIndex = j;
| |
| − | spans[j].className = "";
| |
| − | spans[index].className = "on";
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var timer;//计时器变量 , 这里为什么不能为null
| |
| − | var interval = 3000;//点击间隔时间
| |
| − |
| |
| − | function play() {//自动点击next函数
| |
| − | timer = setTimeout(function(){
| |
| − | next.onclick();//自动点击next
| |
| − | play();//递归调用
| |
| − | },interval);
| |
| − | }
| |
| − |
| |
| − | function stop() {
| |
| − | //停止函数
| |
| − | clearTimeout(timer);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | box01.onmouseover = stop; //鼠标悬浮在轮播图上时停止
| |
| − | box01.onmouseout = play;//鼠标离开轮播图继续
| |
| − | play();//先自己调用一次
| |
| − | }
| |
| − | a();
| |
| − | </script>
| |
| − | <script type="text/javascript">
| |
| − | //封装函数js文件，方便调用
| |
| − | function $(id) {return document.getElementById(id);}//封装获取id对象函数
| |
| − | function show(obj) {obj.style.display = "block";}//封装显示函数
| |
| − | function hidden(obj) {obj.style.display = "none";}//封装隐藏函数
| |
| − | function scroll(){
| |
| − | if(window.pageYOffset != null) {
| |
| − | //ie9+ 和 其他浏览器
| |
| − | return {
| |
| − | top: window.pageYOffset,
| |
| − | left: window.pageXOffset
| |
| − | }
| |
| − | }
| |
| − | else if(document.compatMode == "CSS1Compat") {
| |
| − | //非怪异浏览器：没有头部的
| |
| − | return {
| |
| − | top: document.documentElement.scrollTop,
| |
| − | left: document.documentElement.scrollLeft
| |
| − | }
| |
| − | }
| |
| − | return {//剩下的全部都是怪异浏览器
| |
| − | top: document.body.scrollTop,
| |
| − | left: document.body.scrollLeft
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var leader = 0,target = 0,timer = null;//计时器变量
| |
| − | window.onscroll = function() {
| |
| − | //滚动时执行的函数
| |
| − | scroll().top > 0 ? show($("toTop")) : hidden($("toTop"));//隐藏和显示totop
| |
| − | leader = scroll().top; //实时记录滚动距离
| |
| − | }
| |
| − |
| |
| − | $("toTop").onclick = function() {
| |
| − | //toTop被点击时执行的函数
| |
| − | target = 0;
| |
| − | timer = setInterval(function() {
| |
| − | leader = leader + (target - leader) / 10;
| |
| − | window.scrollTo(0,leader);
| |
| − | if(leader == target) clearInterval(timer);//当到达顶端清除计时器
| |
| − | //必须写在里面,因为在计时器执行时判断
| |
| − | },20);
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − |
| |
| | </html> | | </html> |
