Team:WHU-China
From 2012.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | {{: | + | <html xmlns="http://www.w3.org/1999/xhtml"> |
- | + | <body> | |
+ | <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> | ||
+ | <script> | ||
+ | function picObj(src, title, detail, href){ | ||
+ | this.src = src; | ||
+ | this.title = title; | ||
+ | this.detail = detail; | ||
+ | this.href = href; | ||
+ | } | ||
+ | //*************************自定义数据部分************************* | ||
+ | |||
+ | //定义菜单及侧边栏数据 | ||
+ | var menuObj = { | ||
+ | home : [ | ||
+ | { | ||
+ | title : "what's new", | ||
+ | picArray : [ | ||
+ | new picObj("1.png", "title 1", "what's new 1what's new 1whwhat's new 1what's new 1whwhat's new 1what's new 1whwhat's new 1what's new 1what's new 1what's new 1what's new 1what's new 1what's new 1what's new 1what's new 1what's new 1what's new 1what's new 1", "http://baidu.com/"), | ||
+ | new picObj("1.png", "title 1", "what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2what's new 2", "http://sina.com/"), | ||
+ | new picObj("1.png", "title 1", "what's new 3what's new 3what's new 3what's neat's new 3what's new 3what's new 3what's new 3what's new 3what's new 3what's new 3what's new 3what's new 3what's new 3what's new 3what's new 3what's new 3what's newew 3what's new 3", "http://sohu.com/") | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : "pathway introduction", | ||
+ | picArray : [ | ||
+ | new picObj("2.png", "title 2", "pathway introduction 1pathway introduction 1pathway introduction 1pathway introduction 1pathway introduction 1pathway introduction 1pathway introduction 1pathway introduction 1pathway introduction 1pathway introduction 1production 1", "#"), | ||
+ | new picObj("2.png", "title 2", "pathway introduction 2 introduction 2 introduction 2 introduction 2 introduction 2 introduction 2 introduction 2 introduction 2 introduction 2 introduction 2 introduction 2 introduction 2 introduction 2 introduction 2", "#"), | ||
+ | new picObj("2.png", "title 2", "pathway introduction 3way introduction 3way introduction 3way introduction 3way introduction 3way introduction 3way introduction 3way introduction 3way introduction 3way introduction 3way introduction 3way introduction 3", "#") | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : "future prospective", | ||
+ | picArray : [ | ||
+ | new picObj("3.png", "title 3", "future prospective 1uture prospective 1uture prospective 1uture prospective 1uture prospective 1uture prospective 1uture prospective 1uture prospective 1uture prospective 1uture prospective 1uture prospective 1uture prospective 1utureive 1", "#"), | ||
+ | new picObj("3.png", "title 3", "future prospective 2e prospective 2e prospective 2e prospective 2e prospective 2e prospective 2e prospective 2e prospective 2e prospective 2e prospective 2e prospective 2e prospective 2e prospective 2e prospecpective 2", "#"), | ||
+ | new picObj("3.png", "title 3", "future prospective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3pective 3", "#") | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : "about us", | ||
+ | picArray : [ | ||
+ | new picObj("4.png", "title 4", "about us 1", "#"), | ||
+ | new picObj("4.png", "title 4", "about us 2", "#"), | ||
+ | new picObj("4.png", "title 4", "about us 3", "#") | ||
+ | ] | ||
+ | } | ||
+ | ], | ||
+ | team : [ | ||
+ | { | ||
+ | title : 'aa', | ||
+ | dir : [ | ||
+ | { | ||
+ | title : 'aaaa', | ||
+ | href : '#aaaa' | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : 'bb', | ||
+ | dir : [ | ||
+ | { | ||
+ | title : 'bbbb', | ||
+ | href : '#bbbb' | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : 'ccc', | ||
+ | dir : [] | ||
+ | } | ||
+ | ], | ||
+ | project : [ | ||
+ | { | ||
+ | title : 'aa', | ||
+ | dir : [ | ||
+ | { | ||
+ | title : 'aaaa', | ||
+ | href : '#aaaa' | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : 'bb', | ||
+ | dir : [ | ||
+ | { | ||
+ | title : 'bbbb', | ||
+ | href : '#bbbb' | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : 'ccc', | ||
+ | dir : [] | ||
+ | } | ||
+ | ], | ||
+ | standard : [ | ||
+ | { | ||
+ | title : 'aa', | ||
+ | dir : [ | ||
+ | { | ||
+ | title : 'aaaa', | ||
+ | href : '#aaaa' | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : 'bb', | ||
+ | dir : [ | ||
+ | { | ||
+ | title : 'bbbb', | ||
+ | href : '#bbbb' | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : 'ccc', | ||
+ | dir : [] | ||
+ | } | ||
+ | ], | ||
+ | notes : [ | ||
+ | { | ||
+ | title : 'aa', | ||
+ | dir : [ | ||
+ | { | ||
+ | title : 'aaaa', | ||
+ | href : '#aaaa' | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : 'bb', | ||
+ | dir : [ | ||
+ | { | ||
+ | title : 'bbbb', | ||
+ | href : '#bbbb' | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : 'ccc', | ||
+ | dir : [] | ||
+ | } | ||
+ | ], | ||
+ | humanPractice : [ | ||
+ | { | ||
+ | title : 'aa', | ||
+ | dir : [ | ||
+ | { | ||
+ | title : 'aaaa', | ||
+ | href : '#aaaa' | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : 'bb', | ||
+ | dir : [ | ||
+ | { | ||
+ | title : 'bbbb', | ||
+ | href : '#bbbb' | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | { | ||
+ | title : 'ccc', | ||
+ | dir : [] | ||
+ | } | ||
+ | ] | ||
+ | }; | ||
+ | //*************************自定义数据部分************************* | ||
+ | </script> | ||
+ | <style type="text/css"> | ||
+ | /* | ||
+ | * base css, DO NOT MODIFY! | ||
+ | */ | ||
+ | * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | font-family: "Verdana", sans-serif; | ||
+ | color: #333; | ||
+ | list-style: none; | ||
+ | outline: none; | ||
+ | resize: none; | ||
+ | } | ||
+ | html { | ||
+ | overflow-y: scroll; | ||
+ | } | ||
+ | body { | ||
+ | background: url("https://static.igem.org/mediawiki/2012/2/22/Body-bg.jpg") center center fixed; | ||
+ | } | ||
+ | a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .clear { | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | line-height: 0; | ||
+ | display: block; | ||
+ | clear: both; | ||
+ | } | ||
- | + | /* | |
- | + | * common css, include "header","footer"... | |
- | + | */ | |
- | + | div.center { | |
- | </div> | + | width: 1000px; |
- | <div | + | margin: 0 auto; |
- | + | position: relative; | |
- | </ | + | } |
- | < | + | div.header { |
- | + | width: 1000px; | |
- | </ | + | height: 380px; |
- | </ | + | background: url("https://static.igem.org/mediawiki/2012/1/12/Header-bg.png") no-repeat; |
+ | position: relative; | ||
+ | z-index: 50; | ||
+ | } | ||
+ | div.nav { | ||
+ | position: absolute; | ||
+ | height: 80px; | ||
+ | top: 185px; | ||
+ | left: 245px; | ||
+ | } | ||
+ | li.nav-outerLi { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | width: 80px; | ||
+ | height: 80px; | ||
+ | margin: 0 6px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | h2.nav-h21,h2.nav-h22,h2.nav-h23,h2.nav-h24,h2.nav-h25,h2.nav-h26 { | ||
+ | display: block; | ||
+ | background: url("https://static.igem.org/mediawiki/2012/9/91/Nav-tabs.png") no-repeat; | ||
+ | width: 80px; | ||
+ | height: 80px; | ||
+ | background-position: 0 0; | ||
+ | z-index: 150; | ||
+ | position: relative; | ||
+ | } | ||
+ | h2.nav-h22 { | ||
+ | background-position: -80px 0; | ||
+ | } | ||
+ | h2.nav-h23 { | ||
+ | background-position: -160px 0; | ||
+ | } | ||
+ | h2.nav-h24 { | ||
+ | background-position: -240px 0; | ||
+ | } | ||
+ | h2.nav-h25 { | ||
+ | background-position: -320px 0; | ||
+ | } | ||
+ | h2.nav-h26 { | ||
+ | background-position: -400px 0; | ||
+ | } | ||
+ | h2.nav-h21:hover { | ||
+ | background-position: 0 -80px; | ||
+ | } | ||
+ | h2.nav-h22:hover { | ||
+ | background-position: -80px -80px; | ||
+ | } | ||
+ | h2.nav-h23:hover { | ||
+ | background-position: -160px -80px; | ||
+ | } | ||
+ | h2.nav-h24:hover { | ||
+ | background-position: -240px -80px; | ||
+ | } | ||
+ | h2.nav-h25:hover { | ||
+ | background-position: -320px -80px; | ||
+ | } | ||
+ | h2.nav-h26:hover { | ||
+ | background-position: -400px -80px; | ||
+ | } | ||
+ | h2.nav-h21on { | ||
+ | background-position: 0 -160px; | ||
+ | } | ||
+ | h2.nav-h22on { | ||
+ | background-position: -80px -160px; | ||
+ | } | ||
+ | h2.nav-h23on { | ||
+ | background-position: -160px -160px; | ||
+ | } | ||
+ | h2.nav-h24on { | ||
+ | background-position: -240px -160px; | ||
+ | } | ||
+ | h2.nav-h25on { | ||
+ | background-position: -320px -160px; | ||
+ | } | ||
+ | h2.nav-h26on { | ||
+ | background-position: -400px -160px; | ||
+ | } | ||
+ | ul.nav-innerUl{ | ||
+ | position: absolute; | ||
+ | top: 40px; | ||
+ | padding-top: 40px; | ||
+ | width: 76px; | ||
+ | border-left: 2px solid #000; | ||
+ | border-right: 2px solid #000; | ||
+ | z-index: 140; | ||
+ | display: none; | ||
+ | } | ||
+ | em.nav-libg{ | ||
+ | display: block; | ||
+ | width: 96px; | ||
+ | height: 11px; | ||
+ | background: url('https://static.igem.org/mediawiki/2012/4/48/Nav-libg.png'); | ||
+ | margin-left: -10px; | ||
+ | } | ||
+ | ul.nav-innerUl1{ | ||
+ | background: #fffaca; | ||
+ | } | ||
+ | ul.nav-innerUl2{ | ||
+ | background: #dedede; | ||
+ | } | ||
+ | ul.nav-innerUl3{ | ||
+ | background: #d9f0c9; | ||
+ | } | ||
+ | ul.nav-innerUl4{ | ||
+ | background: #f6e5ff; | ||
+ | } | ||
+ | ul.nav-innerUl5{ | ||
+ | background: #ebfcff; | ||
+ | } | ||
+ | ul.nav-innerUl6{ | ||
+ | background: #ffeee8; | ||
+ | } | ||
+ | li.nav-innerLi{ | ||
+ | font-size: 10px; | ||
+ | line-height: 14px; | ||
+ | padding: 3px 5px; | ||
+ | } | ||
+ | li.nav-innerLi:hover{ | ||
+ | background: #fff; | ||
+ | } | ||
+ | div.middle { | ||
+ | width: 940px; | ||
+ | background: #e6deb8; | ||
+ | background: rgba(230,222,184,0.5); | ||
+ | position: absolute; | ||
+ | top: 300px; | ||
+ | left: 30px; | ||
+ | } | ||
+ | div.aside { | ||
+ | width: 160px; | ||
+ | height: 380px; | ||
+ | background: url("https://static.igem.org/mediawiki/2012/b/b3/Aside-bg.png") no-repeat; | ||
+ | margin-left: 20px; | ||
+ | margin-top: 100px; | ||
+ | float: left; | ||
+ | padding: 20px; | ||
+ | } | ||
+ | ul.aside-outerUl { | ||
+ | margin: 15px; | ||
+ | } | ||
+ | li.aside-outerLi { | ||
+ | margin: 15px 0; | ||
+ | background: #fff1a9; | ||
+ | padding: 5px 10px; | ||
+ | color: #725718; | ||
+ | font-size: 16px; | ||
+ | line-height: 24px; | ||
+ | font-weight: bold; | ||
+ | text-align: center; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | li.aside-outerLi:hover { | ||
+ | background: #fff8d3; | ||
+ | } | ||
+ | div.main { | ||
+ | width: 640px; | ||
+ | height: 400px; | ||
+ | border: 5px solid #333; | ||
+ | background: #fff; | ||
+ | float: right; | ||
+ | margin: 100px 30px 30px 0; | ||
+ | } | ||
+ | div.footer { | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * picSlider Css | ||
+ | */ | ||
+ | #picSlider { | ||
+ | width: 640px; | ||
+ | height: 320px; | ||
+ | } | ||
+ | .momo { | ||
+ | background: #000; | ||
+ | } | ||
+ | .momo .pic li { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | overflow: hidden; | ||
+ | position: absolute; | ||
+ | display: none; | ||
+ | } | ||
+ | .momo .txt li { | ||
+ | position: absolute; | ||
+ | padding: 5px 10px; | ||
+ | z-index: 2; | ||
+ | bottom: 0; | ||
+ | height: 28px; | ||
+ | background: #DBDBDB; | ||
+ | display: none; | ||
+ | } | ||
+ | .momo .txt li a { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | z-index: 1; | ||
+ | color: #333; | ||
+ | font-size: 12px; | ||
+ | font-weight: bold; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .momo .num { | ||
+ | position: absolute; | ||
+ | z-index: 3; | ||
+ | bottom: 5px; | ||
+ | right: 5px; | ||
+ | } | ||
+ | .momo .num li { | ||
+ | float: left; | ||
+ | } | ||
+ | .momo .num li a { | ||
+ | color: #333; | ||
+ | float: left; | ||
+ | margin-left: 3px; | ||
+ | width: 15px; | ||
+ | height: 15px; | ||
+ | line-height: 15px; | ||
+ | *line-height: 14px; | ||
+ | overflow: hidden; | ||
+ | border: 1px solid #AEC1CC; | ||
+ | text-align: center; | ||
+ | cursor: pointer; | ||
+ | background: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .momo .num li.current a, .momo .num li.hover a { | ||
+ | color: #fff; | ||
+ | background: #f60; | ||
+ | -webkit-transition: all 0.4s; | ||
+ | -moz-transition: all 0.4s; | ||
+ | -o-transition: all 0.4s; | ||
+ | } | ||
+ | .momo_picSlider .txt li{ | ||
+ | width: 620px; | ||
+ | } | ||
+ | .momo_picSlider .txt li a{ | ||
+ | font-size: 16px; | ||
+ | line-height: 24px; | ||
+ | } | ||
+ | |||
+ | #p-logo { | ||
+ | display:none; | ||
+ | } | ||
+ | #top-section { | ||
+ | height:0; | ||
+ | border:none; | ||
+ | } | ||
+ | #search-controls { | ||
+ | display:none; | ||
+ | } | ||
+ | #content { | ||
+ | position:inherit; | ||
+ | width:inherit; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | background:inherit; | ||
+ | color:inherit; | ||
+ | border:none; | ||
+ | line-height:inherit; | ||
+ | z-index:2; | ||
+ | } | ||
+ | .firstHeading { | ||
+ | display:none; | ||
+ | } | ||
+ | #catlinks { | ||
+ | display:none; | ||
+ | } | ||
+ | #footer-box { | ||
+ | display:none; | ||
+ | } | ||
+ | #contentSub { | ||
+ | display:none; | ||
+ | } | ||
+ | #menubar ul li a { | ||
+ | background:none; | ||
+ | } | ||
+ | #bodyContent h1,#bodyContent h2 { | ||
+ | margin:0; | ||
+ | border:0; | ||
+ | } | ||
+ | .left-menu:hover { | ||
+ | background:none; | ||
+ | } | ||
+ | </style> | ||
+ | <div class="center"> | ||
+ | <div class="header"> | ||
+ | <div class="nav"> | ||
+ | <ul class="nav-outerUl"> | ||
+ | <li class="nav-outerLi"> | ||
+ | <a href="https://2012.igem.org/Team:WHU-China"><h2 class="nav-h21 nav-h21on" title="Home"></h2></a> | ||
+ | <ul class="nav-innerUl nav-innerUl1" name="home"></ul> | ||
+ | </li> | ||
+ | <li class="nav-outerLi"> | ||
+ | <a href="https://2012.igem.org/Team:WHU-China/Team"><h2 class="nav-h22" title="Team"></h2></a> | ||
+ | <ul class="nav-innerUl nav-innerUl2" name="team"></ul> | ||
+ | </li> | ||
+ | <li class="nav-outerLi"> | ||
+ | <a href="https://2012.igem.org/Team:WHU-China/Project"><h2 class="nav-h23" title="Project"></h2></a> | ||
+ | <ul class="nav-innerUl nav-innerUl3" name="project"></ul> | ||
+ | </li> | ||
+ | <li class="nav-outerLi"> | ||
+ | <a href="https://2012.igem.org/Team:WHU-China/Standard"><h2 class="nav-h24" title="Standard"></h2></a> | ||
+ | <ul class="nav-innerUl nav-innerUl4" name="standard"></ul> | ||
+ | </li> | ||
+ | <li class="nav-outerLi"> | ||
+ | <a href="https://2012.igem.org/Team:WHU-China/Notes"><h2 class="nav-h25" title="Notes"></h2></a> | ||
+ | <ul class="nav-innerUl nav-innerUl5" name="notes"></ul> | ||
+ | </li> | ||
+ | <li class="nav-outerLi"> | ||
+ | <a href="https://2012.igem.org/Team:WHU-China/humanPractice"><h2 class="nav-h26" title="Human Practice"></h2></a> | ||
+ | <ul class="nav-innerUl nav-innerUl6" name="humanPractice"></ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="middle"> | ||
+ | <div class="aside"> | ||
+ | <ul class="aside-outerUl"></ul> | ||
+ | </div> | ||
+ | <div class="main"></div> | ||
+ | <div class="clear"></div> | ||
+ | </div> | ||
+ | <div class="footer"></div> | ||
+ | </div> | ||
+ | <script> | ||
+ | $(function(){ | ||
+ | //菜单项填充 | ||
+ | $('.nav-innerUl').each(function(){ | ||
+ | var currentObj = $(this); | ||
+ | var objName = currentObj.attr('name'); | ||
+ | currentObj.html(''); | ||
+ | for(var i in menuObj[objName]){ | ||
+ | currentObj.append('<a href="https://2012.igem.org/Team:WHU-China/'+objName+'/?catalog='+i+'"><li class="nav-innerLi">'+menuObj[objName][i].title+'</li></a>'); | ||
+ | } | ||
+ | currentObj.append('<em class="nav-libg"></em>'); | ||
+ | }); | ||
+ | |||
+ | //边栏内容填充 | ||
+ | $('.aside-outerUl').html(''); | ||
+ | for(var i in menuObj.home){ | ||
+ | $('.aside-outerUl').append('<li action="'+i+'" class="aside-outerLi">'+menuObj.home[i].title+'</li>'); | ||
+ | } | ||
+ | |||
+ | //绑定点击事件 | ||
+ | $('ul.aside-outerUl>li').click(function(){ | ||
+ | var action = parseInt($(this).attr('action')); | ||
+ | history.pushState('','','?catalog='+action); | ||
+ | var formatHead = '<div id="picSlider"><div class="loading"><img src="loading.gif" /></div><div class="pic"><ul>'; | ||
+ | var formatFoot = '</ul></div></div>'; | ||
+ | var formatBody = ''; | ||
+ | for (value in menuObj.home[action].picArray){ | ||
+ | formatBody += '<li><a href="'+ menuObj.home[action].picArray[value].href +'"><img src="'+ menuObj.home[action].picArray[value].src +'" alt="'+ menuObj.home[action].picArray[value].title +'" text="'+ menuObj.home[action].picArray[value].detail +'" /></a></li>'; | ||
+ | } | ||
+ | $('.main').html(formatHead + formatBody + formatFoot); | ||
+ | myFocus.set({ | ||
+ | id : 'picSlider', | ||
+ | txtHeight : 80, | ||
+ | time : 4 | ||
+ | }); | ||
+ | }); | ||
+ | var catalogString = (/catalog=([0-9]*)/).exec(document.URL); | ||
+ | if(catalogString && parseInt(catalogString[1]) < menuObj.home.length){ | ||
+ | $('ul.aside-outerUl>li[action='+catalogString[1]+']').click(); | ||
+ | }else{ | ||
+ | $('ul.aside-outerUl>li:first').click(); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | <script> | ||
+ | (function() { | ||
+ | var $id = function(id) { | ||
+ | return typeof id === 'string' ? document.getElementById(id) : id | ||
+ | }, $tag = function(tag, parentNode) { | ||
+ | return ($id(parentNode) || document).getElementsByTagName(tag) | ||
+ | }, $tag_ = function(tag, parentNode) { | ||
+ | return $getChild(tag, parentNode, 'tag') | ||
+ | }, $class = function(className, parentNode) { | ||
+ | var doms = $tag('*', parentNode), arr = []; | ||
+ | for (var i = 0, l = doms.length; i < l; i++) { | ||
+ | if (hasClass(className, doms[i])) { | ||
+ | arr.push(doms[i]) | ||
+ | } | ||
+ | } | ||
+ | return arr | ||
+ | }, $class_ = function(className, parentNode) { | ||
+ | return $getChild(className, parentNode) | ||
+ | }, $getChild = function(selector, parentNode, type) { | ||
+ | var arr = [], fn = type === 'tag' ? $tag : $class, doms = fn(selector, parentNode), len = doms.length; | ||
+ | for (var i = 0; i < len; i++) { | ||
+ | if (doms[i].parentNode === parentNode) | ||
+ | arr.push(doms[i]); | ||
+ | i += fn(selector, doms[i]).length | ||
+ | } | ||
+ | return arr | ||
+ | }, hasClass = function(className, node) { | ||
+ | return eval('/(^|\\s)' + className + '(\\s|$)/').test(node.className) | ||
+ | }; | ||
+ | myFocus = function(settings) { | ||
+ | return new myFocus.constr(settings) | ||
+ | }; | ||
+ | myFocus.extend = function() { | ||
+ | var arg = arguments, len = arg.length; | ||
+ | if (this === myFocus) { | ||
+ | if (len === 1) | ||
+ | dest = myFocus, i = 0; | ||
+ | else | ||
+ | dest = arg[0], i = 1 | ||
+ | } else { | ||
+ | dest = this, i = 0 | ||
+ | } | ||
+ | for (i; i < len; i++) { | ||
+ | for (var p in arg[i]) { | ||
+ | dest[p] = arg[i][p] | ||
+ | } | ||
+ | } | ||
+ | return dest | ||
+ | }; | ||
+ | myFocus.extend({ | ||
+ | defConfig : { | ||
+ | pattern : 'momo', | ||
+ | trigger : 'click', | ||
+ | txtHeight : "default", | ||
+ | wrap : false, | ||
+ | auto : true, | ||
+ | time : 5, | ||
+ | index : 0, | ||
+ | loadIMGTimeout : 3, | ||
+ | delay : 100, | ||
+ | autoZoom : true, | ||
+ | __focusConstr__ : true | ||
+ | }, | ||
+ | constr : function(settings) { | ||
+ | var e = settings, len = e && e.length; | ||
+ | if ( e instanceof myFocus.constr) | ||
+ | return e; | ||
+ | this.length = 0; | ||
+ | if (!e || (e.sort && !len) || (e.item && !len)) { | ||
+ | Array.prototype.push.call(this) | ||
+ | } else if (e.__focusConstr__) { | ||
+ | e = $id(e.id); | ||
+ | Array.prototype.push.call(this, e); | ||
+ | this.settings = settings; | ||
+ | this.HTMLUList = $tag('li', $tag('ul', e)[0]); | ||
+ | this.HTMLUListLength = this.HTMLUList.length | ||
+ | } else if (len) { | ||
+ | for (var i = 0; i < len; i++) | ||
+ | Array.prototype.push.call(this, e[i]) | ||
+ | } else { | ||
+ | Array.prototype.push.call(this, e) | ||
+ | } | ||
+ | return this | ||
+ | }, | ||
+ | fn : { | ||
+ | splice : [].splice | ||
+ | }, | ||
+ | pattern : {}, | ||
+ | config : { | ||
+ | 'momo' : { | ||
+ | duration : 400, | ||
+ | txtHeight : 120 | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | myFocus.constr.prototype = myFocus.fn; | ||
+ | myFocus.fn.extend = myFocus.pattern.extend = myFocus.config.extend = myFocus.extend; | ||
+ | myFocus.fn.extend({ | ||
+ | find : function(selector) { | ||
+ | var parent = this, isChild = false, $ = myFocus; | ||
+ | var arr = this.parseSelector(selector); | ||
+ | if (this.length) | ||
+ | for (var i = 0, len = arr.length; i < len; i++) { | ||
+ | var dom = [], s = arr[i]; | ||
+ | switch (s.charAt(0)) { | ||
+ | case '>': | ||
+ | isChild = true; | ||
+ | break; | ||
+ | case '.': | ||
+ | var cls = s.slice(1); | ||
+ | var fn = isChild ? $class_ : $class; | ||
+ | $(parent).each(function() { | ||
+ | dom = dom.concat(fn(cls, this)) | ||
+ | }); | ||
+ | isChild = false; | ||
+ | break; | ||
+ | case '#': | ||
+ | var id = s.slice(1), e = $id(id); | ||
+ | if (e) | ||
+ | dom.push($id(id)); | ||
+ | isChild = false; | ||
+ | break; | ||
+ | default: | ||
+ | var fn = isChild ? $tag_ : $tag, sArr = s.split('.'); | ||
+ | var tag = sArr[0], cls = sArr[1]; | ||
+ | $(parent).each(function() { | ||
+ | var arr = fn(tag, this); | ||
+ | for (var i = 0, len = arr.length; i < len; i++) { | ||
+ | if (cls && !hasClass(cls, arr[i])) | ||
+ | continue; | ||
+ | dom.push(arr[i]) | ||
+ | } | ||
+ | }); | ||
+ | isChild = false | ||
+ | } | ||
+ | if (!isChild) | ||
+ | parent = dom | ||
+ | } | ||
+ | return $(parent) | ||
+ | }, | ||
+ | parent : function() { | ||
+ | return myFocus(this[0].parentNode) | ||
+ | }, | ||
+ | html : function(s) { | ||
+ | if ( typeof s !== 'undefined') { | ||
+ | this[0].innerHTML = s; | ||
+ | return this | ||
+ | } else | ||
+ | return this[0].innerHTML | ||
+ | }, | ||
+ | each : function(fn) { | ||
+ | var doms = this; | ||
+ | for (var i = 0, len = doms.length; i < len; i++) { | ||
+ | var flag = fn.call(doms[i], i); | ||
+ | if (flag === false) | ||
+ | break; | ||
+ | if (flag === true) | ||
+ | continue | ||
+ | } | ||
+ | return this | ||
+ | }, | ||
+ | eq : function(n) { | ||
+ | return myFocus(this[n]) | ||
+ | }, | ||
+ | parseSelector : function(selector) { | ||
+ | var chunker = /(([^[\]'"]+)+\]|\\.|([^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g; | ||
+ | var parts = [], m; | ||
+ | while (( m = chunker.exec(selector)) !== null) { | ||
+ | parts.push(m[1]) | ||
+ | } | ||
+ | return parts | ||
+ | }, | ||
+ | wrap : function(html) { | ||
+ | var o = this[0], e = document.createElement('div'); | ||
+ | e.innerHTML = html; | ||
+ | var wrap = e.firstChild; | ||
+ | o.parentNode.replaceChild(wrap, o); | ||
+ | wrap.appendChild(o); | ||
+ | return this | ||
+ | }, | ||
+ | addHtml : function(html) { | ||
+ | var parent = this[0]; | ||
+ | var e = document.createElement('div'); | ||
+ | e.innerHTML = html; | ||
+ | var dom = e.childNodes[0]; | ||
+ | parent.appendChild(dom); | ||
+ | return myFocus(dom) | ||
+ | }, | ||
+ | addList : function(className, type) { | ||
+ | var li = this.HTMLUList, n = this.HTMLUListLength; | ||
+ | var strArr = ['<div class="' + className + '"><ul>']; | ||
+ | for (var i = 0; i < n; i++) { | ||
+ | var img = $tag('img', li[i])[0], html; | ||
+ | switch (type) { | ||
+ | case 'num': | ||
+ | html = '<a>' + (i + 1) + '</a><b></b>'; | ||
+ | break; | ||
+ | case 'txt': | ||
+ | html = img ? li[i].innerHTML.replace(/\<img(.|\n|\r)*?\>/i, img.alt) + '<p>' + img.getAttribute("text") + '</p><b></b>' : ''; | ||
+ | break; | ||
+ | case 'thumb': | ||
+ | html = img ? '<a><img src=' + (img.getAttribute("thumb") || img.src) + ' /></a><b></b>' : ''; | ||
+ | break; | ||
+ | default: | ||
+ | html = '<a></a><b></b>' | ||
+ | } | ||
+ | strArr.push('<li>' + html + '</li>') | ||
+ | } | ||
+ | strArr.push('</ul></div>'); | ||
+ | return this.addHtml(strArr.join('')) | ||
+ | }, | ||
+ | addListNum : function(className) { | ||
+ | return this.addList(className || 'num', 'num') | ||
+ | }, | ||
+ | addListTxt : function(className) { | ||
+ | return this.addList(className || 'txt', 'txt') | ||
+ | }, | ||
+ | addListThumb : function(className) { | ||
+ | return this.addList(className || 'thumb', 'thumb') | ||
+ | }, | ||
+ | remove : function() { | ||
+ | var o = this[0]; | ||
+ | if (o) | ||
+ | o.parentNode.removeChild(o) | ||
+ | }, | ||
+ | repeat : function(n) { | ||
+ | var n = n || 2, pNode = this[0].parentNode, html = pNode.innerHTML, s = []; | ||
+ | for (var i = 0; i < n; i++) | ||
+ | s.push(html); | ||
+ | pNode.innerHTML = s.join(''); | ||
+ | return myFocus(pNode).find(this[0].nodeName) | ||
+ | } | ||
+ | }); | ||
+ | myFocus.fn.extend({ | ||
+ | css : function(css) { | ||
+ | var o = this[0], value, arr = [';'], isIE = myFocus.isIE; | ||
+ | if (!o) | ||
+ | return this; | ||
+ | if ( typeof css === 'string') { | ||
+ | if (css === 'float') | ||
+ | css = isIE ? 'styleFloat' : 'cssFloat'; | ||
+ | if (!( value = o.style[css])) | ||
+ | value = (isIE ? o.currentStyle: getComputedStyle(o, ''))[css]; | ||
+ | if (css === 'opacity' && value === undefined) | ||
+ | value = 1; | ||
+ | if (value === 'auto' && (css === 'width' || css === 'height')) | ||
+ | value = o['offset' + css.replace(/\w/i, function(a) { | ||
+ | return a.toUpperCase() | ||
+ | })]; | ||
+ | var numVal = parseFloat(value); | ||
+ | return isNaN(numVal) ? value : numVal | ||
+ | } else { | ||
+ | for (var p in css) { | ||
+ | if ( typeof css[p] === 'number' && !this.cssNumber[p]) | ||
+ | css[p] += 'px'; | ||
+ | arr.push(p.replace(/([A-Z])/g, '-$1') + ':' + css[p] + ';'); | ||
+ | if (p === 'opacity') | ||
+ | arr.push('filter:alpha(opacity=' + css[p] * 100 + ')') | ||
+ | } | ||
+ | o.style.cssText += arr.join(''); | ||
+ | return this | ||
+ | } | ||
+ | }, | ||
+ | setOpacity : function(value) { | ||
+ | this[0].style.opacity = value, this[0].style.filter = 'alpha(opacity=' + value * 100 + ')' | ||
+ | }, | ||
+ | setAnimateStyle : function(value, prop, m) { | ||
+ | this[0].style[prop] = Math[m](value) + 'px' | ||
+ | }, | ||
+ | addClass : function(className) { | ||
+ | this[0].className += ' ' + className; | ||
+ | return this | ||
+ | }, | ||
+ | removeClass : function(className) { | ||
+ | var o = this[0], cls = className && o.className, reg = "/\\s*\\b" + className + "\\b/g"; | ||
+ | o.className = cls ? cls.replace(eval(reg), '') : ''; | ||
+ | return this | ||
+ | }, | ||
+ | cssNumber : { | ||
+ | fillOpacity : true, | ||
+ | fontWeight : true, | ||
+ | lineHeight : true, | ||
+ | opacity : true, | ||
+ | orphans : true, | ||
+ | widows : true, | ||
+ | zIndex : true, | ||
+ | zoom : true | ||
+ | } | ||
+ | }); | ||
+ | myFocus.fn.extend({ | ||
+ | animate : function(attr, value, time, type, funcBefore, funcAfter) { | ||
+ | var $o = this, o = $o[0], isOpacity = attr === 'opacity', diffValue = false; | ||
+ | funcBefore && funcBefore.call(o); | ||
+ | if ( typeof value === 'string') { | ||
+ | if (/^[+-]=\d+/.test(value)) | ||
+ | value = value.replace('=', ''), diffValue = true; | ||
+ | value = parseFloat(value) | ||
+ | } | ||
+ | var oriVal = $o.css(attr), b = isNaN(oriVal) ? 0 : oriVal, c = diffValue ? value : value - b, d = time, e = this.easing[type], m = c > 0 ? 'ceil' : 'floor', timerId = '__myFocusTimer__' + attr, setProperty = $o[ isOpacity ? 'setOpacity' : 'setAnimateStyle'], origTime = (new Date) * 1; | ||
+ | o[timerId] && clearInterval(o[timerId]); | ||
+ | o[timerId] = setInterval(function() { | ||
+ | var t = (new Date) - origTime; | ||
+ | if (t <= d) { | ||
+ | setProperty.call($o, e(t, b, c, d), attr, m) | ||
+ | } else { | ||
+ | setProperty.call($o, b + c, attr, m); | ||
+ | clearInterval(o[timerId]), o[timerId] = null; | ||
+ | funcAfter && funcAfter.call(o) | ||
+ | } | ||
+ | }, 13); | ||
+ | return this | ||
+ | }, | ||
+ | fadeIn : function(time, type, fn) { | ||
+ | if ( typeof time !== 'number') | ||
+ | fn = time, time = 400; | ||
+ | if ( typeof type === 'function') | ||
+ | fn = type, type = ''; | ||
+ | this.animate('opacity', 1, time, type || 'linear', function() { | ||
+ | myFocus(this).css({ | ||
+ | display : 'block', | ||
+ | opacity : 0 | ||
+ | }) | ||
+ | }, fn); | ||
+ | return this | ||
+ | }, | ||
+ | fadeOut : function(time, type, fn) { | ||
+ | if ( typeof time !== 'number') | ||
+ | fn = time, time = 400; | ||
+ | if ( typeof type === 'function') | ||
+ | fn = type, type = ''; | ||
+ | this.animate('opacity', 0, time, type || 'linear', null, function() { | ||
+ | this.style.display = 'none'; | ||
+ | fn && fn.call(this) | ||
+ | }); | ||
+ | return this | ||
+ | }, | ||
+ | slide : function(params, time, type, fn) { | ||
+ | if ( typeof time !== 'number') | ||
+ | fn = time, time = 800; | ||
+ | if ( typeof type === 'function') | ||
+ | fn = type, type = ''; | ||
+ | for (var p in params) | ||
+ | this.animate(p, params[p], time, type || 'easeOut', null, fn); | ||
+ | return this | ||
+ | }, | ||
+ | stop : function() { | ||
+ | var o = this[0]; | ||
+ | for (var p in o) | ||
+ | if (p.indexOf('__myFocusTimer__') !== -1) | ||
+ | o[p] && clearInterval(o[p]); | ||
+ | return this | ||
+ | }, | ||
+ | easing : { | ||
+ | linear : function(t, b, c, d) { | ||
+ | return c * t / d + b | ||
+ | }, | ||
+ | swing : function(t, b, c, d) { | ||
+ | return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b | ||
+ | }, | ||
+ | easeIn : function(t, b, c, d) { | ||
+ | return c * (t /= d) * t * t * t + b | ||
+ | }, | ||
+ | easeOut : function(t, b, c, d) { | ||
+ | return -c * (( t = t / d - 1) * t * t * t - 1) + b | ||
+ | }, | ||
+ | easeInOut : function(t, b, c, d) { | ||
+ | return ((t /= d / 2) < 1) ? (c / 2 * t * t * t * t + b) : (-c / 2 * ((t -= 2) * t * t * t - 2) + b) | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | myFocus.fn.extend({ | ||
+ | bind : function(type, fn) { | ||
+ | myFocus.addEvent(this[0], type, fn); | ||
+ | return this | ||
+ | }, | ||
+ | play : function(funcLastFrame, funcCurrentFrame, seamless) { | ||
+ | var this_ = this, p = this_.settings, n = this_.HTMLUListLength, t = p.time * 1000, seamless = seamless || false, float = myFocus(this_.HTMLUList).css('float'), isLevel = float === 'left', direction = isLevel ? 'left' : 'top', distance = isLevel ? p.width : p.height, indexLast = 0, indexCurrent = p.index; | ||
+ | this_.find('.loading').remove(); | ||
+ | this_.run = function(value) { | ||
+ | funcLastFrame && funcLastFrame(indexLast, n); | ||
+ | indexCurrent = typeof value === 'string' ? indexLast + parseInt(value.replace('=', '')) : value; | ||
+ | if (indexCurrent <= -1) { | ||
+ | indexCurrent = n - 1; | ||
+ | if (seamless) | ||
+ | this_.HTMLUList[0].parentNode.style[direction] = -n * distance + 'px' | ||
+ | } | ||
+ | if (indexCurrent >= n) { | ||
+ | if (!seamless) | ||
+ | indexCurrent = 0; | ||
+ | if (indexCurrent >= 2 * n) { | ||
+ | this_.HTMLUList[0].parentNode.style[direction] = -(n - 1) * distance + 'px'; | ||
+ | indexCurrent = n | ||
+ | } | ||
+ | } | ||
+ | if (seamless && indexLast >= n && indexCurrent < n) | ||
+ | indexCurrent += n; | ||
+ | funcCurrentFrame && funcCurrentFrame(indexCurrent, n, indexLast); | ||
+ | this_.runIndex = indexLast = indexCurrent | ||
+ | }; | ||
+ | try { | ||
+ | this_.run(indexCurrent) | ||
+ | } catch(e) { | ||
+ | setTimeout(function() { | ||
+ | this_.run(indexCurrent) | ||
+ | }, 0) | ||
+ | }; | ||
+ | if (p.auto && n > 1) { | ||
+ | this_.runTimer = setInterval(function() { | ||
+ | this_.run('+=1') | ||
+ | }, t); | ||
+ | this_.bind('mouseover', function() { | ||
+ | clearInterval(this_.runTimer) | ||
+ | }).bind('mouseout', function() { | ||
+ | if (!this_.isStop) | ||
+ | this_.runTimer = setInterval(function() { | ||
+ | this_.run('+=1') | ||
+ | }, t) | ||
+ | }) | ||
+ | } | ||
+ | this_.find('a').each(function() { | ||
+ | this.onfocus = function() { | ||
+ | this.blur() | ||
+ | } | ||
+ | }) | ||
+ | }, | ||
+ | bindControl : function($btnList, params) { | ||
+ | var this_ = this, p = this_.settings, type = p.trigger, delay = p.delay, par = params || {}, tsNum = par.thumbShowNum || p.thumbShowNum; | ||
+ | var run = function() { | ||
+ | if (this.index !== this_.runIndex && !par.isRunning) { | ||
+ | this_.run(this.index); | ||
+ | return false | ||
+ | } | ||
+ | }; | ||
+ | $btnList.each(function(i) { | ||
+ | this.index = i; | ||
+ | var o = this, $o = myFocus(o); | ||
+ | if (type === 'click') { | ||
+ | $o.bind('mouseover', function() { | ||
+ | $o.addClass('hover') | ||
+ | }).bind('mouseout', function() { | ||
+ | $o.removeClass('hover') | ||
+ | }).bind('click', run) | ||
+ | } else if (type === 'mouseover') { | ||
+ | $o.bind('mouseover', function() { | ||
+ | if (delay === 0) | ||
+ | run.call(o); | ||
+ | else | ||
+ | $btnList.mouseoverTimer = setTimeout(function() { | ||
+ | run.call(o) | ||
+ | }, delay) | ||
+ | }).bind('mouseout', function() { | ||
+ | $btnList.mouseoverTimer && clearTimeout($btnList.mouseoverTimer) | ||
+ | }) | ||
+ | } else { | ||
+ | alert('myFocus Error Setting(trigger) : \"' + type + '\"'); | ||
+ | return false | ||
+ | } | ||
+ | }); | ||
+ | if (tsNum) { | ||
+ | var float = $btnList.css('float'), isLevel = float === 'left' || float === 'right'; | ||
+ | $btnList.dir = isLevel ? 'left' : 'top'; | ||
+ | $btnList.n = this_.HTMLUListLength; | ||
+ | $btnList.showNum = tsNum; | ||
+ | $btnList.showStart = p.index; | ||
+ | $btnList.showEnd = $btnList.showStart + tsNum - 1; | ||
+ | $btnList.distance = $btnList.css( isLevel ? 'width' : 'height'); | ||
+ | $btnList.slideBody = $btnList.parent() | ||
+ | } | ||
+ | }, | ||
+ | scrollTo : function(i, time) { | ||
+ | var n = this.n, dir = this.dir, $ul = this.slideBody, css = {}; | ||
+ | if (i >= this.showEnd) { | ||
+ | this.showEnd = i < n - 1 ? i + 1 : i; | ||
+ | this.showStart = this.showEnd - this.showNum + 1 | ||
+ | } else if (i <= this.showStart) { | ||
+ | this.showStart = i > 0 ? i - 1 : 0; | ||
+ | this.showEnd = this.showStart + this.showNum - 1 | ||
+ | } | ||
+ | css[dir] = -this.showStart * this.distance; | ||
+ | $ul.slide(css, time || 500, 'easeOut'); | ||
+ | return this | ||
+ | } | ||
+ | }); | ||
+ | myFocus.extend({ | ||
+ | set : function(p, callback) { | ||
+ | var F = this, id = p.id, oStyle = F.initBaseCSS(id); | ||
+ | p.pattern = p.pattern || F.defConfig.pattern; | ||
+ | p.__clsName = p.pattern + '_' + id; | ||
+ | F.addEvent(window, 'load', function() { | ||
+ | F.onloadWindow = true | ||
+ | }); | ||
+ | F.loadPattern(p, function() { | ||
+ | p = F.extend({}, F.defConfig, F.config[p.pattern], p); | ||
+ | F.getBoxReady(p, function() { | ||
+ | var $o = F($id(id)); | ||
+ | p.width = p.width || $o.css('width'), p.height = p.height || $o.css('height'); | ||
+ | F.initCSS(p, $o, oStyle); | ||
+ | F.initHTML($o); | ||
+ | $o.addClass(p.pattern + ' ' + p.__clsName); | ||
+ | F.getIMGReady(p, function() { | ||
+ | if (p.autoZoom) | ||
+ | F.zoomIMG(p, $o); | ||
+ | F.pattern[p.pattern](p, F); | ||
+ | callback && callback() | ||
+ | }) | ||
+ | }) | ||
+ | }) | ||
+ | }, | ||
+ | onloadWindow : false, | ||
+ | loadPattern : function(p, callback) { | ||
+ | myFocus.pattern.extend({ | ||
+ | 'momo' : function(settings, $) { | ||
+ | var $focus = $(settings); | ||
+ | var $picList = $focus.find('.pic li'); | ||
+ | var $txtList = $focus.addListTxt().find('li'); | ||
+ | var $numList = $focus.addListNum().find('li'); | ||
+ | var txtH = settings.txtHeight; | ||
+ | $focus[0].style.height = settings.height + txtH + 'px'; | ||
+ | $focus.play(function(i) { | ||
+ | $picList[i].style.display = 'none'; | ||
+ | $txtList[i].style.display = 'none'; | ||
+ | $numList[i].className = ''; | ||
+ | }, function(i) { | ||
+ | $picList.eq(i).fadeIn(settings.duration); | ||
+ | $txtList[i].style.display = 'block'; | ||
+ | $numList[i].className = 'current'; | ||
+ | }); | ||
+ | $focus.bindControl($numList); | ||
+ | } | ||
+ | }); | ||
+ | callback() | ||
+ | }, | ||
+ | getFilePath : function() { | ||
+ | var path = ''; | ||
+ | var scripts = $tag("script"); | ||
+ | for (var i = 0, len = scripts.length; i < len; i++) { | ||
+ | var src = scripts[i].src; | ||
+ | if (src && /myfocus([\.-].*)?\.js/i.test(src)) { | ||
+ | path = src; | ||
+ | break | ||
+ | } | ||
+ | }; | ||
+ | return path.slice(0, path.lastIndexOf('/') + 1) | ||
+ | }, | ||
+ | getBoxReady : function(p, fn) { | ||
+ | var F = this; | ||
+ | (function() { | ||
+ | try { | ||
+ | if (F.isIE) | ||
+ | $id(p.id).doScroll(); | ||
+ | else | ||
+ | $id(p.id).innerHTML | ||
+ | fn() | ||
+ | } catch(e) { | ||
+ | if (!F.onloadWindow) | ||
+ | setTimeout(arguments.callee, 0) | ||
+ | } | ||
+ | })() | ||
+ | }, | ||
+ | getIMGReady : function(p, callback) { | ||
+ | var t = p.loadIMGTimeout; | ||
+ | var box = $id(p.id), img = $tag('img', box), len = img.length, count = 0, done = false; | ||
+ | if (!t || !len) { | ||
+ | callback(); | ||
+ | return | ||
+ | } | ||
+ | for (var i = 0; i < len; i++) { | ||
+ | img[i].onload = function() { | ||
+ | count += 1; | ||
+ | if (count == len && !done) { | ||
+ | done = true, callback() | ||
+ | } | ||
+ | }; | ||
+ | if (this.isIE) | ||
+ | img[i].src = img[i].src | ||
+ | }; | ||
+ | var t = t * 1000; | ||
+ | setTimeout(function() { | ||
+ | if (!done) { | ||
+ | done = true, callback() | ||
+ | } | ||
+ | }, t) | ||
+ | }, | ||
+ | zoomIMG : function(p, $o) { | ||
+ | var imgs = $tag('img', $tag('ul', $o[0])[0]), len = imgs.length, boxWidth = p.width, boxHeight = p.height; | ||
+ | for (var i = 0; i < len; i++) { | ||
+ | var IMG = new Image(); | ||
+ | IMG.src = imgs[i].src; | ||
+ | if (IMG.width / IMG.height >= boxWidth / boxHeight) { | ||
+ | imgs[i].style.width = boxWidth + 'px'; | ||
+ | imgs[i].style.marginTop = (boxHeight - boxWidth / IMG.width * IMG.height) / 2 + 'px' | ||
+ | } else { | ||
+ | imgs[i].style.height = boxHeight + 'px' | ||
+ | } | ||
+ | } | ||
+ | }, | ||
+ | initCSS : function(p, $o, oStyle) { | ||
+ | var css = [], w = p.width || '', h = p.height || ''; | ||
+ | if (p.wrap) | ||
+ | $o.wrap('<div class="' + p.pattern + '_wrap"></div>'); | ||
+ | css.push('.' + p.__clsName + ' *{margin:0;padding:0;border:0;list-style:none;}.' + p.__clsName + '{position:relative;width:' + w + 'px;height:' + h + 'px;overflow:hidden;font:12px/1.5 Verdana;text-align:left;background:#fff;visibility:visible!important;}.' + p.__clsName + ' .loading{position:absolute;z-index:9999;width:100%;height:100%;color:#666;text-align:center;padding-top:' + 0.26 * h + 'px;background:#fff;}.' + p.__clsName + ' .pic{position:relative;width:' + w + 'px;height:' + h + 'px;overflow:hidden;}.' + p.__clsName + ' .txt li{width:' + w + 'px;height:' + p.txtHeight + 'px!important;overflow:hidden;}'); | ||
+ | if (p.autoZoom) | ||
+ | css.push('.' + p.__clsName + ' .pic li{text-align:center;width:' + w + 'px;height:' + h + 'px;}'); | ||
+ | try { | ||
+ | oStyle.styleSheet.cssText = css.join('') | ||
+ | } catch(e) { | ||
+ | oStyle.innerHTML = css.join('') | ||
+ | } | ||
+ | }, | ||
+ | initBaseCSS : function(id) { | ||
+ | var s = '#' + id + ' *{display:none}', oStyle = document.createElement('style'); | ||
+ | oStyle.type = 'text/css'; | ||
+ | try { | ||
+ | oStyle.styleSheet.cssText = s | ||
+ | } catch(e) { | ||
+ | oStyle.innerHTML = s | ||
+ | } | ||
+ | var oHead = $tag('head', document)[0]; | ||
+ | oHead.insertBefore(oStyle, oHead.firstChild); | ||
+ | return oStyle | ||
+ | }, | ||
+ | initHTML : function($o) { | ||
+ | var $load = $o.find('.loading'), $img = $load.find('img'), img = $img[0]; | ||
+ | if ($img.length) { | ||
+ | $load.addHtml('<p>' + img.alt + '</p>'); | ||
+ | if (!img.getAttribute('src')) | ||
+ | img.style.display = 'none' | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | myFocus.extend({ | ||
+ | isIE : !!(document.all && navigator.userAgent.indexOf('Opera') === -1), | ||
+ | addEvent : function(o, type, fn) { | ||
+ | var ie = this.isIE, e = ie ? 'attachEvent' : 'addEventListener', t = ( ie ? 'on' : '') + type; | ||
+ | o[e](t, function(e) { | ||
+ | var e = e || window.event, flag = fn.call(o, e); | ||
+ | if (flag === false) { | ||
+ | if (ie) | ||
+ | e.cancelBubble = true, e.returnValue = false; | ||
+ | else | ||
+ | e.stopPropagation(), e.preventDefault() | ||
+ | } | ||
+ | }, false) | ||
+ | } | ||
+ | }); | ||
+ | if ( typeof jQuery !== 'undefined') { | ||
+ | jQuery.fn.extend({ | ||
+ | myFocus : function(p, fn) { | ||
+ | if (!p) | ||
+ | p = {}; | ||
+ | p.id = this[0].id; | ||
+ | if (!p.id) | ||
+ | p.id = this[0].id = 'mF__ID__'; | ||
+ | myFocus.set(p, fn) | ||
+ | } | ||
+ | }) | ||
+ | } | ||
+ | })(); | ||
+ | $(function(){ | ||
+ | $('li.nav-outerLi').hover(function(){ | ||
+ | $(this).find('ul.nav-innerUl').slideDown(300); | ||
+ | },function(){ | ||
+ | $(this).find('ul.nav-innerUl').slideUp(300); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
</html> | </html> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- |
Revision as of 11:08, 24 September 2012