Team:ZJU-China/Notebook/week1

From 2011.igem.org

(Difference between revisions)
Line 14: Line 14:
<title>jQuery Tools standalone demo</title>  
<title>jQuery Tools standalone demo</title>  
   
   
-
<!-- include the Tools -->
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
-
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>  
+
 
 
   
   
Line 24: Line 23:
<!-- accordion styling -->
<!-- accordion styling -->
<style>
<style>
-
    /* root element for accordion. decorated with rounded borders and gradient background image */
+
  body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,textarea,select,button,th,td{ margin:0; padding:0;}
-
#accordion {
+
img{ border:0;}
-
background:transparent;
+
ul,li,ol{ list-style:none;}
-
width: 140px;
+
body{ font-size:12px; font-family:Tahoma,Arial,Helvetica,sans-serif; color:#111;}
-
-background:#666;
+
-
-moz-border-radius: 3px;
+
/* 首页轮播 */
-
-webkit-border-radius: 3px;
+
-
border-radius: 3px;
+
.slider{ width:1000px; height:272px; overflow:hidden;}
-
}
+
.slider .big{ float:left; width:630px; height:250px; padding:10px; overflow:hidden; border:1px solid #f3f3f3; }
-
 
+
.slider .bigCon{ position:relative; width:630px; height:250px; overflow:hidden;}
-
/* accordion header */
+
.slider .big ul{ position:absolute; top:0; left:0; width:630px; overflow:hidden;}
-
#accordion h2 {
+
.slider .big ul li{ float:left; width:630px; height:250px;}
-
background-color:#f19226;
+
.slider .big a, .slider .big img{ display:block; width:630px; height:250px;}
-
margin:1px;
+
.slider .small{ float:right; width:347px; margin-left:1px; display:inline;}
-
padding:5px 15px;
+
.slider .small li{ float:left; width:339px; margin:4px 0 5px 7px; display:inline; overflow:hidden;}
-
font-size:14px;
+
.slider .small li div{ height:34px; border:1px solid #f3f3f3; padding:5px 6px; overflow:hidden;}
-
font-weight:normal;
+
.slider .small li img{ float:left; width:60px; height:34px;}
-
cursor:pointer;
+
.slider .small li p{ margin-left:72px;}
-
-moz-border-radius: 3px;
+
.slider .small li.on{ margin:4px 0 5px; padding-left:8px; background:url(global_bg.png) -51px -135px no-repeat #edf7ff; }
-
-webkit-border-radius: 3px;
+
.slider .small li.on div{ padding:5px 6px 5px 6px; border:1px solid #cfe9fe; border-left:0;}
-
border-radius: 3px;
+
-
 
+
/* 二级页轮播 */
-
/*shadow!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
+
.slider1{ width:778px; height:254px; padding:5px; background:#f8f8f8; border:1px solid #e6e6e6; }
-
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
+
.slider1 .sliderCon{ position:relative; width:778px; height:254px; overflow:hidden;}
-
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); /* for the Safari browser*/
+
.slider1 #BigImg{ position:absolute; width:778px; }
-
 
+
.slider1 #BigImg img{ width:778px; height:254px;}
-
+
-
}
+
.slider1 #Num{ position:absolute; right:20px; bottom:15px;}
-
 
+
.slider1 #Num li{ float:left; width:18px; height:18px; margin-left:6px; display:inline; text-align:center; background:#ffa800; border:1px solid #FF6600; line-height:18px; color:#fff;}
-
/* currently active header */
+
.slider1 #Num li.on{ background:#FF6600; font-weight:bold;}
-
#accordion h2.current {
+
-
cursor:default;
+
-
background-color:#CCC;
+
-
}
+
-
 
+
-
/* accordion pane */
+
-
#accordion .pane {
+
-
display:none;
+
-
height:40px;
+
-
padding:15px;
+
-
color:white;
+
-
font-size:12px;
+
-
-moz-border-radius: 3px;
+
-
-webkit-border-radius: 3px;
+
-
border-radius: 3px;
+
-
 
+
-
}
+
-
 
+
-
/* a title inside pane */
+
-
#accordion .pane h3 {
+
-
font-weight:normal;
+
-
margin:0 0 -5px 0;
+
-
font-size:16px;
+
-
color:#999;
+
-
}
+
-
 
+
     </style>
     </style>
   
   
Line 85: Line 58:
   
   
<body>
<body>
 +
<script type="text/javascript">
 +
/**
 +
* scroll (Version 1.0)
 +
* http://rockydo.com
 +
* @author Rocky (296456018@qq.com)
 +
*
 +
* Create a Slider
 +
* @example
 +
    $("#Slider").Slider({
 +
        num      : "#SliderSmall",
 +
        bigImg    : "#SliderBig"
 +
    });
 +
* on jQuery
 +
* date: 2011-7-14
 +
*/
   
   
-
<!-- accordion -->
+
(function($) {
-
<div id="accordion">
+
$.fn.Slider = function(options) {
 +
var setting = {
 +
num: "",
 +
bigImg: "",
 +
timeOut: 3000
 +
};
 +
var opts = $.extend({},setting, options);
   
   
-
<h2 class="current">First pane</h2>
+
var runIndex = 0;
-
+
var adHeight = $(opts.bigImg + " li").height();
-
<div class="pane"  style="display:block">
+
var timer;
-
+
-
+
var _showImg = function(index) {
-
<h3>Lorem ipsum dolor</h3>
+
$(opts.bigImg).stop(true, false).animate({
-
+
top: -adHeight * index
-
+
},1000);
-
+
$(opts.num + " li").removeClass("on").eq(index).addClass("on");
-
+
};
-
</div>
+
-
+
-
<h2>Second pane</h2>
+
-
+
-
<div class="pane">
+
-
<h3>Vestibulum ante ipsum</h3>
+
-
+
-
+
-
</div>
+
   
   
-
<h2>Third pane</h2>
+
var _auto = function() {
-
+
timer = setTimeout(function() {
-
<div class="pane" >
+
runIndex++;
-
<h3>Curabitur vel dolor</h3>
+
if (runIndex == $(opts.bigImg + " li").length) {
-
+
runIndex = 0;
-
+
}
-
</div>
+
_showImg(runIndex);
 +
_auto();
 +
},opts.timeOut);
 +
};
   
   
-
</div>
+
var _stop = function() {
 +
clearTimeout(timer);
 +
};
 +
 +
return this.each(function() {
 +
_auto();
 +
$(opts.bigImg).hover(function() {
 +
_stop();
 +
},function() {
 +
_auto();
 +
});
   
   
-
<!-- activate tabs with JavaScript -->
+
$(opts.num + " li").hover(function() {
-
<script>
+
_stop();
-
$(function() {  
+
runIndex = $(opts.num + " li").index(this);
 +
_showImg(runIndex);
 +
},function() {
 +
_auto();
 +
}).eq(0).hover().addClass("on");
 +
});
 +
};
 +
})(jQuery);
   
   
-
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
+
//实例化
 +
$(function() {
 +
//轮播样式1
 +
$("#Slider").Slider({
 +
num:    "#SliderSmall",
 +
bigImg: "#SliderBig",
 +
timeOut: 5000
 +
});
 +
 +
//轮播样式2
 +
$("#Slider1").Slider({
 +
num:    "#Num",
 +
bigImg: "#BigImg"
 +
});
});
});
</script>  
</script>  
 +
<h2>&nbsp;&nbsp;&nbsp;&nbsp;效果一</h2>
 +
<div class="slider" id="Slider">
 +
<div class="big">
 +
<div class="bigCon">
 +
<ul id="SliderBig">
 +
<li><a href=""><img src="http://img04.taobaocdn.com/tps/i4/T1ymNIXglAXXXXXXXX-540-290.jpg" /></a></li>
 +
<li><a href=""><img src="http://img01.taobaocdn.com/tps/i1/T1xXVJXclzXXXXXXXX-540-290.jpg" /></a></li>
 +
<li><a href=""><img src="http://img03.taobaocdn.com/tps/i3/T1L.lIXjFyXXXXXXXX-540-290.jpg" /></a></li>
 +
<li><a href=""><img src="http://img03.taobaocdn.com/tps/i3/T1tc9iXbhaXXXXXXXX-540-290.png" /></a></li>
 +
<li><a href=""><img src="http://img04.taobaocdn.com/tps/i4/T10LpzXcBsXXXXXXXX-540-290.jpg" /></a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<ul class="small" id="SliderSmall">
 +
<li>
 +
<div>
 +
    <img src="http://img04.taobaocdn.com/tps/i4/T1ymNIXglAXXXXXXXX-540-290.jpg" />
 +
<p>十日美国东西海岸畅销名城+名胜套餐B(豪华团)(纽约接机,洛杉矶送机)</p>
 +
</div>
 +
</li>
 +
<li>
 +
<div>
 +
<img src="http://img01.taobaocdn.com/tps/i1/T1xXVJXclzXXXXXXXX-540-290.jpg" />
 +
<p>十日特别推荐轻松畅游东西海岸家庭欢乐套餐(超值团)(纽约接机,洛杉矶送机)</p>
 +
</div>
 +
</li>
 +
<li>
 +
<div>
 +
    <img src="http://img03.taobaocdn.com/tps/i3/T1L.lIXjFyXXXXXXXX-540-290.jpg" />
 +
<p>十一日美国东海岸四大名城+西海岸主题乐园热销推荐团</p>
 +
</div>
 +
</li>
 +
<li>
 +
<div>
 +
<img src="http://img03.taobaocdn.com/tps/i3/T1tc9iXbhaXXXXXXXX-540-290.png" />
 +
<p>十二天美国东、西海岸经典旅游套餐(超值团)(纽约接机,洛杉矶送机)</p>
 +
</div>
 +
</li>
 +
<li>
 +
<div>
 +
<img src="http://img04.taobaocdn.com/tps/i4/T10LpzXcBsXXXXXXXX-540-290.jpg" />
 +
<p>十二天美国东、西海岸经典旅游套餐(超值团)(纽约接机,洛杉矶送机)</p>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
   
   
</body>  
</body>  
   
   
</html>
</html>

Revision as of 06:49, 4 October 2011

jQuery Tools standalone demo

    效果一

  • 十日美国东西海岸畅销名城+名胜套餐B(豪华团)(纽约接机,洛杉矶送机)

  • 十日特别推荐轻松畅游东西海岸家庭欢乐套餐(超值团)(纽约接机,洛杉矶送机)

  • 十一日美国东海岸四大名城+西海岸主题乐园热销推荐团

  • 十二天美国东、西海岸经典旅游套餐(超值团)(纽约接机,洛杉矶送机)

  • 十二天美国东、西海岸经典旅游套餐(超值团)(纽约接机,洛杉矶送机)

Retrieved from "http://2011.igem.org/Team:ZJU-China/Notebook/week1"