|
//--.5 scrollable
/*基本元素
* 两个<a>的向前,向后按钮
* 一个DIV,做为总容器,带有类名,如:scrollable
* 一个DIV,做为item容器,带有类名,如:item
* 若干个任意元素,做为流动列表内容,如图片,flash等
*/
<!-- "previous page" action -->
<a class="prevPage browse left">left</a>
<!-- root element for scrollable -->
<div class="scrollable">
<!-- root element for the items -->
<div class="items">
<!-- 1-5 -->
<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
<img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
<!-- 5-10 -->
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
<!-- 10-15 -->
<img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
<img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
<img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
<img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
<img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
</div>
</div>
<!-- "next page" action -->
<a class="nextPage browse right">right</a>
/*CSS
* 将元素设置到一行或一列,并隐藏不需显示的元素
*/
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable {
/* required settings */
position:relative;
overflow:hidden;
width: 680px;
/* custom decorations */
border:1px solid #ccc;
background:url(/img/global/gradient/h300.png) repeat-x;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
/* single scrollable item */
.scrollable img {
float:left;
margin:20px 5px 20px 21px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
cursor:pointer;
width:100px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
border:2px solid #000;
z-index:9999;
position:relative;
}
a{
display: inline;
}
/*jQuery调用
*
*/
$(document).ready(function() {
var api = $("div.scrollable").scrollable({
api: true,
loop: true //到达末端,返回
});
api.next(); //返回值调用API
api.onSeek(showSize);
api.end();
});
function showSize(){
alert(this.getSize());
}
//--.6 flashembed
/*基本元素
* 一个DIV放置flash
*/
<div id="clock"></div>
/*CSS
* 基本不用做什么,只是控制flash大小,位置
*/
/*jQuery调用
* 需要加载:tools.flashembed-1.0.4.min.js库和jquery-1.4.2.min.js
*/
$(document).ready(function (){
$('#load_button').click(function (){
$('#clock').flashembed("/jQueryOnly/data/flash/clock.swf");
});
});
|
