以下是 jQuery显示字幕插件Captall js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<title>jQuery��ʾ��Ļ���Captall</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<a href="#animation">animation</a>,
<a href="#backgroundColor">backgroundColor</a>,
<a href="#caption">caption</a>, <a href="#delay">delay</a>,
<a href="#delayHide">delayHide</a>,
<a href="#delayShow">delayShow</a>,
<a href="#easing">easing</a>,
<a href="#easingIn">easingIn</a>,
<a href="#easingOut">easingOut</a>,
<a href="#fadeOutAfter">fadeOutAfter</a>,
<a href="#fontColor">fontColor</a>,
<a href="#fontSize">fontSize</a>,
<a href="#height">height</a>,
<a href="#inTime">intTime</a>,
<a href="#left">left</a>,
<a href="#opacity">opactiy</a>,
<a href="#outTime">outTime</a>,
<a href="#padding">padding</a>,
<a href="#paddingTop">paddingTop</a>,
<a href="#paddingRight">paddingRight</a>,
<a href="#paddingBottom">paddingBottom</a>,
<a href="#paddingLeft">paddingLeft</a>,
<a href="#slideFrom">slideFrom</a>,
<a href="#slideTo">slideTo</a>,
<a href="#textAlign">textAlign</a>,
<a href="#time">time</a>
, <a href="#top">top</a>,
<a href="#width">width</a>
<br /><br />
<a id="animation"></a><h2>animation</h2><br />
Default: slide<br /><br />
<ul>
<li>
animation: 'fade'
<img id="captall-animation1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
animation: 'float'
<img id="captall-animation4" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
animation: 'fixed'
<img id="captall-animation2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<ul>
<li>
animation: 'slide'
<img id="captall-animation3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br />
<br /><br />
<a id="backgroundColor"></a><h2>backgroundColor</h2><br />
Default: white<br /><br />
<ul>
<li>
backgroundColor: '#00f'
<img id="captall-backgroundColor1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
backgroundColor: 'rgb(255, 0, 0)'
<img id="captall-backgroundColor2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
backgroundColor: 'rgba(255,0,0,0.5)'
<img id="captall-backgroundColor3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="caption"></a><h2>caption</h2><br />
Default: empty<br />
When set it overides the text in the alt attribute.<br /><br />
<ul>
<li>
caption: 'Hello there'
<img id="captall-caption1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="delay"></a><h2>delay</h2><br />
Default: 0 millisecond<br /><br />
<ul>
<li>
delay: 0
<img id="captall-delay1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
delay: 500
<img id="captall-delay2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
delay: 1000
<img id="captall-delay3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul><br /><br /><br /><br />
<a id="delayHide"></a><h2>delayHide</h2><br />
Default: 0 millisecond<br /><br />
<ul>
<li>
delayHide: 0
<img id="captall-delayHide1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
delayHide: 500
<img id="captall-delayHide2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
delayHide: 1000
<img id="captall-delayHide3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul><br /><br /><br /><br />
<a id="delayShow"></a><h2>delayShow</h2><br />
Default: 0 millisecond<br /><br />
<ul>
<li>
delayShow: 0
<img id="captall-delayShow1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
delayShow: 500
<img id="captall-delayShow2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
delayShow: 1000
<img id="captall-delayShow3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
</ul><br /><br /><br /><br />
<a id="easing"></a><h2>easing</h2><br />
Default: ''<br />
For these examples there's an extra option : time: 500<br /><br />
<ul>
<li>
easing: 'easeInOutBack'
<img id="captall-easing1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
easing: 'easeInQuint'
<img id="captall-easing2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
easing: 'easeInOutElastic'
<img id="captall-easing3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
</ul><br /><br /><br /><br />
<a id="easingIn"></a><h2>easingIn</h2><br />
Default: ''<br />
For these examples there's an extra option : time: 500<br /><br />
<ul>
<li>
easingIn: 'easeInElastic'
<img id="captall-easingIn1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
easingIn: 'easeInBounce'
<img id="captall-easingIn2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
easingIn: 'easeInOutBack'
<img id="captall-easingIn3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
</ul><br /><br /><br /><br />
<a id="easingOut"></a><h2>easingOut</h2><br />
Default: ''<br />
For these examples there's an extra option : time: 500<br /><br />
<ul>
<li>
easingOut: 'easeOutElastic'
<img id="captall-easingOut1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
easingOut: 'easeOutBounce'
<img id="captall-easingOut2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
easingOut: 'easeOutBack'
<img id="captall-easingOut3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
</ul><br /><br /><br /><br />
<a id="fadeOutAfter"></a><h2>fadeOutAfter</h2><br />
Default: ''<br />
For these examples there's an extra option : animation: 'fixed'<br /><br />
<ul>
<li>
fadeOutAfter: ''
<img id="captall-fadeOutAfter1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
fadeOutAfter: 500
<img id="captall-fadeOutAfter2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
fadeOutAfter: 1000
<img id="captall-fadeOutAfter3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="fontColor"></a><h2>fontColor</h2><br />
Default: black<br /><br />
<ul>
<li>
fontColor: '#00f'
<img id="captall-fontColor1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
fontColor: 'rgb(255, 0, 0)'
<img id="captall-fontColor2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
fontColor: 'rgba(255,0,0,0.5)'
<img id="captall-fontColor3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="fontSize"></a><h2>fontSize</h2><br />
Default: 16px<br /><br />
<ul>
<li>
fontSize: '24px'
<img id="captall-fontSize1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
fontSize: '0.5em'
<img id="captall-fontSize2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
fontSize: '24pt'
<img id="captall-fontSize3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="height"></a><h2>height</h2><br />
Default: 30 pixels<br /><br />
<ul>
<li>
height: 50
<img id="captall-height1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
height: 'half'
<img id="captall-height2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
height: 'full'
<img id="captall-height3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<li>
height: '30%'
<img id="captall-height4" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
height: '2/3'
<img id="captall-height5" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
height: '100%'
<img id="captall-height6" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="inTime"></a><h2>inTime</h2><br />
Default: 200 milliseconds<br /><br />
<ul>
<li>
inTime: 0
<img id="captall-inTime1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
inTime: 800
<img id="captall-inTime2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
inTime: 2000
<img id="captall-inTime3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="left"></a><h2>left</h2><br />
Default: 0 pixels<br />
Can only be used with animation: 'fade' or animation: 'fixed', for animation: 'slide' use <a href="#slideTo">slideTo</a><br /><br />
<ul>
<li>
left: 50
<img id="captall-left1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
left: 'center'
<img id="captall-left2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
left: 260
<img id="captall-left3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="opacity"></a><h2>opacity</h2><br />
Default: .7<br /><br />
<ul>
<li>
opacity: 0
<img id="captall-opacity1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
opacity: 0.5
<img id="captall-opacity2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
opacity: 1
<img id="captall-opacity3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="outTime"></a><h2>outTime</h2><br />
Default: 200 milliseconds<br /><br />
<ul>
<li>
outTime: 0
<img id="captall-outTime1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
outTime: 800
<img id="captall-outTime2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
outTime: 2000
<img id="captall-outTime3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="padding"></a><h2>padding</h2><br />
Default: 0 pixels<br /><br />
<ul>
<li>
padding: [10]
<img id="captall-padding1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
padding: [10, 5]
<img id="captall-padding2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
padding: [10, 0, 5, 20]
<img id="captall-padding3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="paddingTop"></a><h2>paddingTop</h2><br />
Default: 0 pixels<br /><br />
<ul>
<li>
paddingTop: 10
<img id="captall-paddingTop1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
paddingTop: 30
<img id="captall-paddingTop2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
paddingTop: 50
<img id="captall-paddingTop3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="paddingRight"></a><h2>paddingRight</h2><br />
Default: 0 pixels<br />
For these examples there's an extra option : textAlign: 'right'<br /><br />
<ul>
<li>
paddingRight: 10
<img id="captall-paddingRight1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
paddingRight: 30
<img id="captall-paddingRight2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
paddingRight: 200
<img id="captall-paddingRight3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="paddingBottom"></a><h2>paddingBottom</h2><br />
Default: 0 pixels<br /><br />
<ul>
<li>
paddingBottom: 10
<img id="captall-paddingBottom1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
paddingBottom: 30
<img id="captall-paddingBottom2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
paddingBottom: 200
<img id="captall-paddingBottom3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="paddingLeft"></a><h2>paddingLeft</h2><br />
Default: 0 pixels<br /><br />
<ul>
<li>
paddingLeft: 10
<img id="captall-paddingLeft1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
paddingLeft: 30
<img id="captall-paddingLeft2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
paddingLeft: 200
<img id="captall-paddingLeft3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="slideFrom"></a><h2>slideFrom</h2><br />
Default: topleft<br />
For these examples there's an extra option : width: 200<br /><br />
<ul>
<li>
slideFrom: 'topleft'
<img id="captall-slideFrom1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideFrom: 'topcenter'
<img id="captall-slideFrom2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideFrom: 'topright'
<img id="captall-slideFrom3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<li>
slideFrom: 'righttop'
<img id="captall-slideFrom4" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideFrom: 'rightcenter'
<img id="captall-slideFrom5" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideFrom: 'rightbottom'
<img id="captall-slideFrom6" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<li>
slideFrom: 'bottomleft'
<img id="captall-slideFrom7" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideFrom: 'bottomcenter'
<img id="captall-slideFrom8" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideFrom: 'bottomright'
<img id="captall-slideFrom9" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<li>
slideFrom: 'lefttop'
<img id="captall-slideFrom10" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideFrom: 'leftcenter'
<img id="captall-slideFrom11" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideFrom: 'leftbottom'
<img id="captall-slideFrom12" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<a id="slideTo"></a><h2>slideTo</h2><br />
Default: bottomleft<br /><br />
<ul>
<li>
slideTo: 'top'
<img id="captall-slideTo1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideTo: 'center'
<img id="captall-slideTo2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideTo: 'bottom'
<img id="captall-slideTo3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br />
For these examples there are 2 extra options : width: 200 and slideFrom: 'leftcenter'<br /><br />
<ul>
<li>
slideTo: 'left'
<img id="captall-slideTo4" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideTo: 'center'
<img id="captall-slideTo5" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
slideTo: 'right'
<img id="captall-slideTo6" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<h2>textAlign</h2><a id="textAlign"></a><br />
Default: left<br /><br />
<ul>
<li>
textAlign: 'left'
<img id="captall-textAlign1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
textAlign: 'center'
<img id="captall-textAlign2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
textAlign: 'right
<img id="captall-textAlign3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="time"></a><h2>time</h2><br />
Default: 200 millisecond<br /><br />
<ul>
<li>
time: 0
<img id="captall-time1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
time: 800
<img id="captall-time2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
time: 2000
<img id="captall-time3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="top"></a><h2>top</h2><br />
Default: 0 pixels<br />
Can only be used with animation: 'fade' or animation: 'fixed', for animation: 'slide' use <a href="#slideTo">slideTo</a><br /><br />
<ul>
<li>
top: 10
<img id="captall-top1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
top: 'center'
<img id="captall-top2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
top: 150
<img id="captall-top3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br />
<a id="width"></a><h2>width</h2><br />
Default: full<br /><br />
<ul>
<li>
width: 50
<img id="captall-width1" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
width: 'half'
<img id="captall-width2" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
width: 'full'
<img id="captall-width3" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<li>
width: '30%'
<img id="captall-width4" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
width: '2/3'
<img id="captall-width5" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
<li>
width: '100%'
<img id="captall-width6" src="images/sea.jpg" alt="Hi I'm a caption" width="300" height="198"/>
</li>
</ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<script src='js/jquery.min.js' type='text/javascript'></script>
<script src='js/jquery.captall.min.js' type='text/javascript'></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#captall-animation1').captall({
animation: 'fade'
});
$('#captall-animation2').captall({
animation: 'fixed'
});
$('#captall-animation3').captall({
animation: 'slide'
});
$('#captall-animation4').captall({
animation: 'float',
slideTo: 'top'
});
$('#captall-backgroundColor1').captall({
backgroundColor: '#00f'
});
$('#captall-backgroundColor2').captall({
backgroundColor: 'rgb(255, 0, 0)'
});
$('#captall-backgroundColor3').captall({
backgroundColor: 'rgba(255,0,0,0.5)'
});
$('#captall-caption1').captall({
caption: 'Hello there'
});
$('#captall-delay1').captall({
delay: 0
});
$('#captall-delay2').captall({
animation: 'fade',
delay: 500
});
$('#captall-delay3').captall({
delay: 1000
});
$('#captall-delayHide1').captall({
delayHide: 0
});
$('#captall-delayHide2').captall({
animation: 'fade',
delayHide: 500
});
$('#captall-delayHide3').captall({
delayHide: 1000
});
$('#captall-delayShow1').captall({
delayShow: 0
});
$('#captall-delayShow2').captall({
animation: 'fade',
delayShow: 500
});
$('#captall-delayShow3').captall({
delayShow: 1000
});
$('#captall-easing1').captall({
time: 500,
easing: 'easeInOutBack'
});
$('#captall-easing2').captall({
time: 500,
easing: 'easeInQuint'
});
$('#captall-easing3').captall({
time: 500,
easing: 'easeInOutElastic'
});
$('#captall-easingIn1').captall({
time: 500,
easingIn: 'easeInElastic'
});
$('#captall-easingIn2').captall({
time: 500,
easingIn: 'easeInBounce'
});
$('#captall-easingIn3').captall({
time: 500,
easingIn: 'easeInOutBack'
});
$('#captall-easingOut1').captall({
time: 500,
easingOut: 'easeOutElastic'
});
$('#captall-easingOut2').captall({
time: 500,
easingOut: 'easeOutBounce'
});
$('#captall-easingOut3').captall({
time: 500,
easingOut: 'easeOutBack'
});
$('#captall-fadeOutAfter1').captall({
animation: 'fixed',
fadeOutAfter: ''
});
$('#captall-fadeOutAfter2').captall({
animation: 'fixed',
fadeOutAfter: 500
});
$('#captall-fadeOutAfter3').captall({
animation: 'fixed',
fadeOutAfter: 1000
});
$('#captall-fontColor1').captall({
fontColor: '#00f'
});
$('#captall-fontColor2').captall({
fontColor: 'rgb(255, 0, 0)'
});
$('#captall-fontColor3').captall({
fontColor: 'rgba(255,0,0,0.5)'
});
$('#captall-fontSize1').captall({
fontSize: '24px'
});
$('#captall-fontSize2').captall({
fontSize: '0.5em'
});
$('#captall-fontSize3').captall({
fontSize: '24pt'
});
$('#captall-height1').captall({
height: 50
});
$('#captall-height2').captall({
height: 'half'
});
$('#captall-height3').captall({
height: 'full'
});
$('#captall-height4').captall({
height: '30%'
});
$('#captall-height5').captall({
height: '2/3'
});
$('#captall-height6').captall({
height: '100%'
});
$('#captall-inTime1').captall({
inTime: 0
});
$('#captall-inTime2').captall({
inTime: 800
});
$('#captall-inTime3').captall({
inTime: 2000
});
$('#captall-left1').captall({
animation: 'fixed',
left: 50,
width: 200
});
$('#captall-left2').captall({
animation: 'fade',
left: 'center',
width: 200
});
$('#captall-left3').captall({
animation: 'fixed',
left: 260,
width: 200
});
$('#captall-opacity1').captall({
opacity: 0
});
$('#captall-opacity2').captall({
opacity: .5
});
$('#captall-opacity3').captall({
opacity: 1
});
$('#captall-outTime1').captall({
outTime: 0
});
$('#captall-outTime2').captall({
outTime: 800
});
$('#captall-outTime3').captall({
outTime: 2000
});
$('#captall-padding1').captall({
padding: [10]
});
$('#captall-padding2').captall({
padding: [10, 5]
});
$('#captall-padding3').captall({
padding: [10, 0, 5, 20]
});
$('#captall-paddingTop1').captall({
paddingTop: 10
});
$('#captall-paddingTop2').captall({
paddingTop: 30
});
$('#captall-paddingTop3').captall({
paddingTop: 50
});
$('#captall-paddingRight1').captall({
paddingRight: 10,
textAlign: 'right'
});
$('#captall-paddingRight2').captall({
paddingRight: 30,
textAlign: 'right'
});
$('#captall-paddingRight3').captall({
paddingRight: 200,
textAlign: 'right'
});
$('#captall-paddingBottom1').captall({
paddingBottom: 10
});
$('#captall-paddingBottom2').captall({
paddingBottom: 30
});
$('#captall-paddingBottom3').captall({
paddingBottom: 200
});
$('#captall-paddingLeft1').captall({
paddingLeft: 10
});
$('#captall-paddingLeft2').captall({
paddingLeft: 30
});
$('#captall-paddingLeft3').captall({
paddingLeft: 200
});
$('#captall-slideFrom1').captall({
width: 200,
slideFrom: 'topleft'
});
$('#captall-slideFrom2').captall({
width: 200,
slideFrom: 'topcenter'
})
;$('#captall-slideFrom3').captall({
width: 200,
slideFrom: 'topright'
})
;$('#captall-slideFrom4').captall({
width: 200,
slideFrom: 'righttop'
})
;$('#captall-slideFrom5').captall({
width: 200,
slideFrom: 'rightcenter'
})
;$('#captall-slideFrom6').captall({
width: 200,
slideFrom: 'rightbottom'
});
$('#captall-slideFrom7').captall({
width: 200,
slideFrom: 'bottomleft'
});
$('#captall-slideFrom8').captall({
width: 200,
slideFrom: 'bottomcenter'
});
$('#captall-slideFrom9').captall({
width: 200,
slideFrom: 'bottomright'
});
$('#captall-slideFrom10').captall({
width: 200,
slideFrom: 'lefttop'
});
$('#captall-slideFrom11').captall({
width: 200,
slideFrom: 'leftcenter'
});
$('#captall-slideFrom12').captall({
width: 200,
slideFrom: 'leftbottom'
});
$('#captall-slideTo1').captall({
width: 200,
slideFrom: 'topcenter',
slideTo: 'top'
});
$('#captall-slideTo2').captall({
width: 200,
slideFrom: 'topcenter',
slideTo: 'center'
});
$('#captall-slideTo3').captall({
width: 200,
slideFrom: 'topcenter',
slideTo: 'bottom'
});
$('#captall-slideTo4').captall({
width: 200,
slideFrom: 'leftcenter',
slideTo: 'left'
});
$('#captall-slideTo5').captall({
width: 200,
slideFrom: 'leftcenter',
slideTo: 'center'
});
$('#captall-slideTo6').captall({
width: 200,
slideFrom: 'leftcenter',
slideTo: 'right'
});
$('#captall-textAlign1').captall({
textAlign: 'left'
});
$('#captall-textAlign2').captall({
textAlign: 'center'
});
$('#captall-textAlign3').captall({
textAlign: 'right'
});
$('#captall-time1').captall({
time: 0
});
$('#captall-time2').captall({
time: 800
});
$('#captall-time3').captall({
time: 2000
});
$('#captall-top1').captall({
animation: 'fixed',
top: 10
});
$('#captall-top2').captall({
animation: 'fade',
top: 80
});
$('#captall-top3').captall({
animation: 'fixed',
top: 150
});
$('#captall-width1').captall({
width: 50
});
$('#captall-width2').captall({
width: 'half'
});
$('#captall-width3').captall({
width: 'full'
});
$('#captall-width4').captall({
width: '30%'
});
$('#captall-width5').captall({
width: '2/3'
});
$('#captall-width6').captall({
width: '100%'
});
});
</script>
</body>
</html>JS代码(easing.js):
/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
jQuery.easing.jswing=jQuery.easing.swing;
jQuery.extend(jQuery.easing,{
def:"easeOutQuad",swing:function(e,f,a,h,g){
return jQuery.easing[jQuery.easing.def](e,f,a,h,g)}
,easeInQuad:function(e,f,a,h,g){
return h*(f/=g)*f+a}
,easeOutQuad:function(e,f,a,h,g){
return -h*(f/=g)*(f-2)+a}
,easeInOutQuad:function(e,f,a,h,g){
if((f/=g/2)<1){
return h/2*f*f+a}
return -h/2*((--f)*(f-2)-1)+a}
,easeInCubic:function(e,f,a,h,g){
return h*(f/=g)*f*f+a}
,easeOutCubic:function(e,f,a,h,g){
return h*((f=f/g-1)*f*f+1)+a}
,easeInOutCubic:function(e,f,a,h,g){
if((f/=g/2)<1){
return h/2*f*f*f+a}
return h/2*((f-=2)*f*f+2)+a}
,easeInQuart:function(e,f,a,h,g){
return h*(f/=g)*f*f*f+a}
,easeOutQuart:function(e,f,a,h,g){
return -h*((f=f/g-1)*f*f*f-1)+a}
,easeInOutQuart:function(e,f,a,h,g){
if((f/=g/2)<1){
return h/2*f*f*f*f+a}
return -h/2*((f-=2)*f*f*f-2)+a}
,easeInQuint:function(e,f,a,h,g){
return h*(f/=g)*f*f*f*f+a}
,easeOutQuint:function(e,f,a,h,g){
return h*((f=f/g-1)*f*f*f*f+1)+a}
,easeInOutQuint:function(e,f,a,h,g){
if((f/=g/2)<1){
return h/2*f*f*f*f*f+a}
return h/2*((f-=2)*f*f*f*f+2)+a}
,easeInSine:function(e,f,a,h,g){
return -h*Math.cos(f/g*(Math.PI/2))+h+a}
,easeOutSine:function(e,f,a,h,g){
return h*Math.sin(f/g*(Math.PI/2))+a}
,easeInOutSine:function(e,f,a,h,g){
return -h/2*(Math.cos(Math.PI*f/g)-1)+a}
,easeInExpo:function(e,f,a,h,g){
return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a}
,easeOutExpo:function(e,f,a,h,g){
return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a}
,easeInOutExpo:function(e,f,a,h,g){
if(f==0){
return a}
if(f==g){
return a+h}
if((f/=g/2)<1){
return h/2*Math.pow(2,10*(f-1))+a}
return h/2*(-Math.pow(2,-10*--f)+2)+a}
,easeInCirc:function(e,f,a,h,g){
return -h*(Math.sqrt(1-(f/=g)*f)-1)+a}
,easeOutCirc:function(e,f,a,h,g){
return h*Math.sqrt(1-(f=f/g-1)*f)+a}
,easeInOutCirc:function(e,f,a,h,g){
if((f/=g/2)<1){
return -h/2*(Math.sqrt(1-f*f)-1)+a}
return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a}
,easeInElastic:function(f,h,e,l,k){
var i=1.70158;
var j=0;
var g=l;
if(h==0){
return e}
if((h/=k)==1){
return e+l}
if(!j){
j=k*0.3}
if(g<Math.abs(l)){
g=l;
var i=j/4}
else{
var i=j/(2*Math.PI)*Math.asin(l/g)}
return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}
,easeOutElastic:function(f,h,e,l,k){
var i=1.70158;
var j=0;
var g=l;
if(h==0){
return e}
if((h/=k)==1){
return e+l}
if(!j){
j=k*0.3}
if(g<Math.abs(l)){
g=l;
var i=j/4}
else{
var i=j/(2*Math.PI)*Math.asin(l/g)}
return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e}
,easeInOutElastic:function(f,h,e,l,k){
var i=1.70158;
var j=0;
var g=l;
if(h==0){
return e}
if((h/=k/2)==2){
return e+l}
if(!j){
j=k*(0.3*1.5)}
if(g<Math.abs(l)){
g=l;
var i=j/4}
else{
var i=j/(2*Math.PI)*Math.asin(l/g)}
if(h<1){
return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}
return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e}
,easeInBack:function(e,f,a,i,h,g){
if(g==undefined){
g=1.70158}
return i*(f/=h)*f*((g+1)*f-g)+a}
,easeOutBack:function(e,f,a,i,h,g){
if(g==undefined){
g=1.70158}
return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a}
,easeInOutBack:function(e,f,a,i,h,g){
if(g==undefined){
g=1.70158}
if((f/=h/2)<1){
return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}
return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a}
,easeInBounce:function(e,f,a,h,g){
return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a}
,easeOutBounce:function(e,f,a,h,g){
if((f/=g)<(1/2.75)){
return h*(7.5625*f*f)+a}
else{
if(f<(2/2.75)){
return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}
else{
if(f<(2.5/2.75)){
return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}
else{
return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}
}
}
}
,easeInOutBounce:function(e,f,a,h,g){
if(f<g/2){
return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}
return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}
}
);
CSS代码(index.css):
#version{position:absolute;right:5px;top:5px;z-index:999;}
#header{position:absolute;top:0px;left:0px;width:100%;height:300px;background-image:url('../images/header_bg.jpg');margin-bottom:20px;}
#header_logo{position:relative;top:0px;width:600px;height:300px;margin:0px auto;background-image:url('../images/captall_logo_600_300.jpg');}
#menu{position:absolute;top:310px;left:10px;width:200px;height:500px;}
#content,#content-index,#footer{position:relative;width:1000px;margin:20px auto;font-size:22px;margin-left:200px;}
#content{font-size:18px;}
h2{position:relative;left:-10px;text-decoration:underline;}
a{color:#00f;}
a.menu{margin-bottom:10px;width:200px;padding:5px 20px;background-color:#00f;color:#fff;}
ul{height:200px;margin:0px;margin-bottom:10px;padding:0px;}
li{float:left;margin-right:10px;list-style:none;font-size:16px;}
pre.brush{margin:10px 0px;padding:5px 0px;}
#options-left,#options-middle,#options-right{float:left;width:170px;font-size:18px;}
#options-middle{width:450px;margin-left:0px;}
#options-right{width:350px;margin-left:0px;}
#deny{width:200px;height:100px;text-align:center;}
#deny p{margin-top:40px;}
.square{float:left;width:80px;height:80px;margin:10px;background-color:#000;}
#footer{padding-top:10px;}
#footer #wezy{float:right;}
CSS代码(reset.css):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
/* remember to define focus styles! */
:focus{outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}
分享到QQ
分享到微博
微信扫一扫
