经验分享程序开发文档资料数据资源其它资源

jquery书架式图片展示特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery书架式图片展示特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery书架式图片展示特效代码

HTML代码(index.html):

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
<title>jquery书架式图片展示特效</title> 
<link rel="stylesheet" href="css/sti_style.css" type="text/css" media="screen"> 
<link rel="stylesheet" href="css/mediaelementplayer.css"> 
 
<style> 
body { margin:0; }
</style> 
    
<script src="js/jquery-1.7.min.js"></script> 
<script src="js/jquery.touchSwipe.min.js"></script> 
<script src="js/jquery.versatileTouchSlider.min.js"></script> 
<script src="js/mediaelement-and-player.min.js"></script> 
 
<script> 
jQuery(document).ready(function() {
 
	$.versatileTouchSlider('#ex_shelf_full', {
			slideWidth: 960, // some number. ex: 960 or '100%'
			slideHeight: 'auto', // some number. ex: 220 or 'auto'
			showPreviousNext: true,
			currentSlide: 0,
			scrollSpeed: 600,
			autoSlide: false,
			autoSlideDelay: 3000,
			showPlayPause: true,
			showPagination: true,
			alignPagination: 'left',
			alignMenu: 'left',
			swipeDrag: true,
			sliderType: 'image_shelf', // image_shelf, image_banner, image_text, image_gallery
			pageStyle: 'numbers', // numbers, bullets, thumbnails
			orientation: 'horizontal', // horizontal, vertical (if vertical, the "slideHeight" option must be a number, not 'auto')
			onScrollEvent: function() {},
			ajaxEvent: function() {}
		}
	);
	
});
</script> 
 
</head> 
	
<body> 
 
 
<div class="sti_container" id="ex_shelf_full" style="margin-top:50px;"> 
 
	<div class="slider_description"><strong>jquery书架式图片展示特效</strong></div> 
 
    <div class="sti_slider"> 
        <div class="sti_items"> 
        
        	<!-- SLIDE GROUP 1 --> 
        
            <div class="sti_slide"> 
            	<div class="sti_shelf_divider"></div> 
                
                <div class="sti_prod"> 
                	<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150"> 
                    <a href="#/ad/h1.jpg" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Lamborghini Aventador"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150"> 
                    <a href="#/ad/h2.jpg" class="link video sti_lightbox" data-type="video-youtube" data-size="700x420" title="Youtube Video (For The Birds / PIXAR)"></a> 
                    <a href="#" class="ribbon ribbon_green" title="Ribbon"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_3_thumb.jpg" alt="" width="110" height="150"> 
                    <a href="#/ad/h3.jpg" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Vimeo Video"></a> 
                    <a href="#" class="ribbon ribbon_red" title="Ribbon"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_4_thumb.jpg" alt="" width="110" height="150"> 
                	<a href="#/ad/h4.jpg" class="link audio sti_lightbox"  data-type="audio" data-size="450x50" title="Audio Example. HTML5 Support / Flash Fallback"></a> 
                    <a href="#" class="ribbon ribbon_green" title="Ribbon"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_5_thumb.jpg" alt="" width="110" height="150"> 
                    <a href="#/ad/h5.jpg" class="link video sti_lightbox" data-type="video" data-size="540x303" title="MP4 Video. HTML5 Support / Flash Fallback"></a> 
                    <a href="#" class="ribbon ribbon_orange" title="Ribbon"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150"> 
                    <a href="#/ad/h1.jpg" class="link zoom sti_lightbox" data-type="image" title="Lightbox image example"></a> 
                    <a href="#" class="ribbon ribbon_blue" title="Ribbon"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150"> 
                	<a href="#/ad/v1.jpg" class="link audio sti_lightbox"  data-type="audio" data-size="450x50" title="Audio Example 2. HTML5 Support / Flash Fallback"></a> 
                </div> 
                
                <div class="sti_shelf_divider_bottom"></div> 
            </div> 
            
            <!-- SLIDE GROUP 2 --> 
 
            <div class="sti_slide"> 
            	<div class="sti_shelf_divider"></div> 
                
                <div class="sti_prod"> 
                	<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150"> 
                    <a href="#" class="link more" title="Title"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150"> 
                	<a href="content/audio/AirReview-Landmarks-02-ChasingCorporate.mp3" class="link audio sti_lightbox"  data-type="audio" data-size="450x50" title="Audio Example. HTML5 Support / Flash Fallback"></a> 
                    <a href="#" class="ribbon ribbon_green" title="Ribbon"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_3_thumb.jpg" alt="" width="110" height="150"> 
                	<a href="#" class="link more" title="Title"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_4_thumb.jpg" alt="" width="110" height="150"> 
                    <a href="http://vimeo.com/53327926" class="link video sti_lightbox" data-type="video-vimeo" data-size="700x394" title="Vimeo Video"></a> 
                </div> 
				<div class="sti_prod"> 
                	<img src="image/banner_full_5_thumb.jpg" alt="" width="110" height="150"> 
                    <a href="content/html/html_content.html" class="link content sti_lightbox"  data-type="html-content" data-size="550x450" title="HTML Content"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_1_thumb.jpg" alt="" width="110" height="150"> 
                    <a href="#" class="link more" title="Title"></a> 
                    <a href="#" class="ribbon ribbon_red" title="Ribbon"></a> 
                </div> 
                <div class="sti_prod"> 
                	<img src="image/banner_full_2_thumb.jpg" alt="" width="110" height="150"> 
                    <a href="#" class="link more" title="Title"></a> 
                </div> 
                
                <div class="sti_shelf_divider_bottom"></div> 
            </div> 
 
            <!-- SLIDE GROUP 3 --> 
        	
           
            
        </div><!-- sti_items --> 
    </div><!-- sti_slider --> 
    
    <div class="sti_paginate"> 
    	<div class="sti_page"></div> 
        
        <div class="sti_control"> 
        	<a href="#" class="sti_btn sti_play"><img src="img/play.png" alt=""></a> 
            <a href="#" class="sti_btn sti_pause"><img src="img/pause.png" alt=""></a> 
        </div> 
    </div> 
 
</div>
</body> 
</html>

JS代码(jquery.touchSwipe.min.js):

/** touchSwipe - jQuery Plugin* https://github.com/mattbryson/TouchSwipe-Jquery-Plugin* http://labs.skinkers.com/touchSwipe/* http://plugins.jquery.com/project/touchSwipe** Copyright (c) 2010 Matt Bryson (www.skinkers.com)* Dual licensed under the MIT or GPL Version 2 licenses.** $version:1.3.3*/
(function(e){
	function g(t){
	if(t&&t.allowPageScroll===undefined&&(t.swipe!==undefined||t.swipeStatus!==undefined)){
	t.allowPageScroll=s}
if(!t){
	t={
}
}
t=e.extend({
}
,e.fn.swipe.defaults,t);
	return this.each(function(){
	var n=e(this);
	var r=n.data(v);
	if(!r){
	r=new y(this,t);
	n.data(v,r)}
}
)}
function y(m,g){
	function H(t){
	t=t.originalEvent;
	var n,r=d?t.touches[0]:t;
	k=l;
	if(d){
	L=t.touches.length}
else{
	if(t.preventDefault){
	t.preventDefault()}
else{
	t.returnValue=false}
}
x=0;
	T=null;
	N=0;
	if(!d||L===g.fingers||g.fingers===f){
	A.x=O.x=e.browser.msie&&e.browser.version<="8.0"?r.clientX:r.pageX;
	A.y=O.y=e.browser.msie&&e.browser.version<="8.0"?r.clientY:r.pageY;
	_=J();
	if(g.swipeStatus){
	n=I(t,k)}
}
else{
	F(t)}
if(n===false){
	k=p;
	I(t,k);
	return n}
else{
	C.bind(w,B);
	C.bind(E,j)}
}
function B(t){
	t=t.originalEvent;
	if(k===h||k===p)return;
	var n,r=d?t.touches[0]:t;
	O.x=e.browser.msie&&e.browser.version<="8.0"?r.clientX:r.pageX;
	O.y=e.browser.msie&&e.browser.version<="8.0"?r.clientY:r.pageY;
	D=J();
	T=V();
	if(d){
	L=t.touches.length}
k=c;
	U(t,T);
	if(L===g.fingers||g.fingers===f||!d){
	x=W();
	N=z();
	if(g.swipeStatus){
	n=I(t,k,T,x,N)}
if(!g.triggerOnTouchEnd){
	var i=!R();
	if(q()===true){
	k=h;
	n=I(t,k)}
else if(i){
	k=p;
	I(t,k)}
}
}
else{
	k=p;
	I(t,k)}
if(n===false){
	k=p;
	I(t,k)}
}
function j(e){
	e=e.originalEvent;
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
D=J();
	x=W();
	T=V();
	N=z();
	if(g.triggerOnTouchEnd||g.triggerOnTouchEnd===false&&k===c){
	k=h;
	if((L===g.fingers||g.fingers===f||!d)&&O.x!==0){
	var t=!R();
	if((q()===true||q()===null)&&!t){
	I(e,k)}
else if(t||q()===false){
	k=p;
	I(e,k)}
}
else{
	k=p;
	I(e,k)}
}
else if(k===c){
	k=p;
	I(e,k)}
C.unbind(w,B,false);
	C.unbind(E,j,false)}
function F(){
	L=0;
	A.x=0;
	A.y=0;
	O.x=0;
	O.y=0;
	M.x=0;
	M.y=0;
	D=0;
	_=0}
function I(e,s){
	var o=undefined;
	if(g.swipeStatus){
	o=g.swipeStatus.call(C,e,s,T||null,x||0,N||0,L)}
if(s===p){
	if(g.click&&(L===1||!d)&&(isNaN(x)||x===0)){
	o=g.click.call(C,e,e.target)}
}
if(s==h){
	if(g.swipe){
	o=g.swipe.call(C,e,T,x,N,L)}
switch(T){
	case t:if(g.swipeLeft){
	o=g.swipeLeft.call(C,e,T,x,N,L)}
break;
	case n:if(g.swipeRight){
	o=g.swipeRight.call(C,e,T,x,N,L)}
break;
	case r:if(g.swipeUp){
	o=g.swipeUp.call(C,e,T,x,N,L)}
break;
	case i:if(g.swipeDown){
	o=g.swipeDown.call(C,e,T,x,N,L)}
break}
}
if(s===p||s===h){
	F(e)}
return o}
function q(){
	if(g.threshold!==null){
	return x>=g.threshold}
return null}
function R(){
	var e;
	if(g.maxTimeThreshold){
	if(N>=g.maxTimeThreshold){
	e=false}
else{
	e=true}
}
else{
	e=true}
return e}
function U(e,f){
	if(g.allowPageScroll===s){
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
}
else{
	var l=g.allowPageScroll===o;
	switch(f){
	case t:if(g.swipeLeft&&l||!l&&g.allowPageScroll!=u){
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
}
break;
	case n:if(g.swipeRight&&l||!l&&g.allowPageScroll!=u){
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
}
break;
	case r:if(g.swipeUp&&l||!l&&g.allowPageScroll!=a){
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
}
break;
	case i:if(g.swipeDown&&l||!l&&g.allowPageScroll!=a){
	if(e.preventDefault){
	e.preventDefault()}
else{
	e.returnValue=false}
}
break}
}
}
function z(){
	return D-_}
function W(){
	return Math.round(Math.sqrt(Math.pow(O.x-A.x,2)+Math.pow(O.y-A.y,2)))}
function X(){
	var e=A.x-O.x;
	var t=O.y-A.y;
	var n=Math.atan2(t,e);
	var r=Math.round(n*180/Math.PI);
	if(r<0){
	r=360-Math.abs(r)}
return r}
function V(){
	var e=X();
	if(e<=45&&e>=0){
	return t}
else if(e<=360&&e>=315){
	return t}
else if(e>=135&&e<=225){
	return n}
else if(e>45&&e<135){
	return i}
else{
	return r}
}
function J(){
	var e=new Date;
	return e.getTime()}
function K(){
	C.unbind(b,H);
	C.unbind(S,F);
	C.unbind(w,B);
	C.unbind(E,j)}
var y=d||!g.fallbackToMouseEvents,b=y?"touchstart":"mousedown",w=y?"touchmove":"mousemove",E=y?"touchend":"mouseup",S="touchcancel";
	var x=0;
	var T=null;
	var N=0;
	var C=e(m);
	var k="start";
	var L=0;
	var A={
	x:0,y:0}
;
	var O={
	x:0,y:0}
;
	var M={
	x:0,y:0}
;
	var _=0;
	var D=0;
	try{
	C.bind(b,H);
	C.bind(S,F)}
catch(P){
	e.error("events not supported "+b+","+S+" on jQuery.swipe")}
this.enable=function(){
	C.bind(b,H);
	C.bind(S,F);
	return C}
;
	this.disable=function(){
	K();
	return C}
;
	this.destroy=function(){
	K();
	C.data(v,null);
	return C}
;
}
var t="left",n="right",r="up",i="down",s="none",o="auto",u="horizontal",a="vertical",f="all",l="start",c="move",h="end",p="cancel",d="ontouchstart"in window,v="TouchSwipe";
	var m={
	fingers:1,threshold:50,maxTimeThreshold:null,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,click:null,triggerOnTouchEnd:true,allowPageScroll:"auto",fallbackToMouseEvents:true}
;
	e.fn.swipe=function(t){
	var n=e(this),r=n.data(v);
	if(r&&typeof t==="string"){
	if(r[t]){
	return r[t].apply(this,Array.prototype.slice.call(arguments,1))}
else{
	e.error("Method "+t+" does not exist on jQuery.swipe")}
}
else if(!r&&(typeof t==="object"||!t)){
	return g.apply(this,arguments)}
return n}
;
	e.fn.swipe.defaults=m;
	e.fn.swipe.phases={
	PHASE_START:l,PHASE_MOVE:c,PHASE_END:h,PHASE_CANCEL:p}
;
	e.fn.swipe.directions={
	LEFT:t,RIGHT:n,UP:r,DOWN:i}
;
	e.fn.swipe.pageScroll={
	NONE:s,HORIZONTAL:u,VERTICAL:a,AUTO:o}
;
	e.fn.swipe.fingers={
	ONE:1,TWO:2,THREE:3,ALL:f}
}
)(jQuery);

CSS代码(mediaelementplayer.css):

.mejs-container{position:relative;min-width:150px;background:none;font-family:sans-serif;text-align:left;vertical-align:top;}
.me-plugin{position:absolute;}
.mejs-embed,.mejs-embed body{width:100%;height:100%;margin:0;padding:0;background:#000;overflow:hidden;}
.mejs-container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:1000;}
.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video{width:100%;height:100%;}
/* Start:LAYERS */
.mejs-background{position:absolute;top:0;left:0;}
.mejs-mediaelement{position:absolute;top:0;left:0;width:100%;height:100%;}
.mejs-poster{position:absolute;top:0;left:0;overflow:hidden;}
.mejs-poster img{border:0;padding:0;border:0;display:block;width:auto;height:100%;}
.mejs-overlay{position:absolute;top:0;left:0;}
.mejs-overlay-play{cursor:pointer;}
.mejs-overlay-button{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px;background:url(skin/bigplay.png) no-repeat;}
.mejs-overlay:hover .mejs-overlay-button{background-position:0 -100px;}
.mejs-overlay-loading{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;}
.mejs-overlay-loading span{display:block;width:80px;height:80px;background:#3A3C3D url(skin/loading.gif) 50% 50% no-repeat;border-radius:40px;}
/* End:LAYERS */
/* Start:CONTROL BAR */
.mejs-container .mejs-controls{position:absolute;margin:0;padding:0;bottom:0;left:0;height:30px;width:100%;background:#3a3c3d url(skin/background.png);background:-webkit-linear-gradient(#4a4c4d,#2b2d2d);background:-moz-linear-gradient(#4a4c4d,#2b2d2d);background:-o-linear-gradient(#4a4c4d,#2b2d2d);background:-ms-linear-gradient(#4a4c4d,#2b2d2d);background:linear-gradient(#4a4c4d,#2b2d2d);list-style:none;}
.mejs-audio .mejs-controls{border-radius:3px;margin:10px;}
.mejs-container .mejs-controls div{list-style-type:none;display:block;float:left;margin:0;padding:0;width:32px;height:30px;font-size:11px;line-height:11px;font-family:sans-serif;background:url(skin/sep.png) left no-repeat;border:0;}
.mejs-controls .mejs-button button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:7px 7px 0 9px;padding:0;position:absolute;height:16px;width:16px;border:0;background:transparent url(skin/controls.png) no-repeat;}
/*:focus for accessibility */
.mejs-controls .mejs-button button:focus{outline:solid 1px yellow;}
/* End:CONTROL BAR */
/* Start:Time (current / duration) */
.mejs-container .mejs-controls .mejs-time{color:#fff;display:block;height:17px;width:auto;padding:8px 8px 5px 10px;overflow:hidden;text-align:center;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
.mejs-container .mejs-controls .mejs-time span{font-size:11px;color:#fff;line-height:12px;display:block;float:left;width:auto;}
/* End:Time (current / duration) */
/* Start:Play/pause */
.mejs-container .mejs-controls .mejs-playpause-button{cursor:pointer;background:none;width:30px;}
.mejs-controls .mejs-playpause-button button{margin:7px 8px;}
.mejs-controls .mejs-play button{background-position:0 0;}
.mejs-controls .mejs-play:hover button{background-position:0 -32px;}
.mejs-controls .mejs-pause button{background-position:0 -16px;}
.mejs-controls .mejs-pause:hover button{background-position:0 -48px;}
/* End:Play/pause */
/* Stop */
.mejs-controls .mejs-stop button{background-position:-112px 0;}
.mejs-controls .mejs-stop:hover button{background-position:-112px -32px;}
/* End:Play/pause */
/* Start:Progress bar */
.mejs-controls div.mejs-time-rail{width:200px;}
.mejs-controls .mejs-time-rail span{display:block;position:absolute;width:180px;height:5px;cursor:pointer;}
.mejs-controls .mejs-time-rail .mejs-time-total{padding:1px;margin:11px 8px 0 10px;background:#262929;border-bottom:#3d3f40 1px solid;box-shadow:inset 1px 1px rgba(0,0,0,.4);}
.mejs-controls .mejs-time-rail .mejs-time-buffering{width:100%;background:#464849;background-image:-webkit-linear-gradient(-45deg,#464849 25%,#262929 25%,#262929 50%,#464849 50%,#464849 75%,#262929 75%,#262929);background-image:-moz-linear-gradient(-45deg,#464849 25%,#262929 25%,#262929 50%,#464849 50%,#464849 75%,#262929 75%,#262929);background-image:-o-linear-gradient(-45deg,#464849 25%,#262929 25%,#262929 50%,#464849 50%,#464849 75%,#262929 75%,#262929);background-image:-ms-linear-gradient(-45deg,#464849 25%,#262929 25%,#262929 50%,#464849 50%,#464849 75%,#262929 75%,#262929);background-image:linear-gradient(-45deg,#464849 25%,#262929 25%,#262929 50%,#464849 50%,#464849 75%,#262929 75%,#262929);-moz-background-size:6px 6px;background-size:6px 5px;-webkit-background-size:6px 5px;-webkit-animation:buffering-stripes 2s linear infinite;-moz-animation:buffering-stripes 2s linear infinite;-ms-animation:buffering-stripes 2s linear infinite;-o-animation:buffering-stripes 2s linear infinite;animation:buffering-stripes 2s linear infinite;z-index:1;}
@-webkit-keyframes buffering-stripes{from{background-position:0 0;}
to{background-position:30px 0;}
}
@-moz-keyframes buffering-stripes{from{background-position:0 0;}
to{background-position:30px 0;}
}
@-ms-keyframes buffering-stripes{from{background-position:0 0;}
to{background-position:30px 0;}
}
@-o-keyframes buffering-stripes{from{background-position:0 0;}
to{background-position:30px 0;}
}
@keyframes buffering-stripes{from{background-position:0 0;}
to{background-position:30px 0;}
}
.mejs-controls .mejs-time-rail .mejs-time-loaded{background:#464849;width:0;}
.mejs-controls .mejs-time-rail .mejs-time-current{width:0;background:#feac2c;background-image:-webkit-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:-moz-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:-o-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:-ms-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);-moz-background-size:6px 6px;background-size:6px 6px;-webkit-background-size:6px 5px;z-index:1;}
.mejs-controls .mejs-time-rail .mejs-time-handle{display:none;position:absolute;margin:0;width:5px;background:transparent;cursor:pointer;top:1px;z-index:1;text-align:center;}
.mejs-controls .mejs-time-rail .mejs-time-float{position:absolute;display:none;background:#C2C8CF;background:-webkit-linear-gradient(#E3E6E9,#C2C8CF);background:-moz-linear-gradient(#E3E6E9,#C2C8CF);background:-o-linear-gradient(#E3E6E9,#C2C8CF);background:-ms-linear-gradient(#E3E6E9,#C2C8CF);background:linear-gradient(#E3E6E9,#C2C8CF);width:36px;height:17px;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.4);top:-26px;margin-left:-18px;text-align:center;color:#111;}
.mejs-controls .mejs-time-rail .mejs-time-float-current{margin:3px;width:30px;display:block;text-align:center;left:0;}
.mejs-controls .mejs-time-rail .mejs-time-float-corner{position:absolute;display:block;width:0;height:0;line-height:0;border:solid 4px #C2C8CF;border-color:#C2C8CF transparent transparent transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:17px;left:13px;}
/*.mejs-controls .mejs-time-rail:hover .mejs-time-handle{visibility:visible;}
*/
/* End:Progress bar */
/* Start:Fullscreen */
.mejs-controls .mejs-fullscreen-button button{background-position:-32px 0;}
.mejs-controls .mejs-unfullscreen button{background-position:-32px -16px;}
/* End:Fullscreen */
/* Start:Mute/Volume */
.mejs-controls .mejs-volume-button{}
.mejs-controls .mejs-mute button{background-position:-16px -16px;}
.mejs-controls .mejs-mute button:hover{background-position:-16px -48px;}
.mejs-controls .mejs-unmute button{background-position:-16px 0;}
.mejs-controls .mejs-unmute button:hover{background-position:-16px -32px;}
.mejs-controls .mejs-volume-button{position:relative;}
.mejs-controls .mejs-volume-button .mejs-volume-slider{display:none;height:68px;width:31px;background:#3A3C3D;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:-68px;left:1px;z-index:1;position:absolute;margin:0;}
.mejs-controls .mejs-volume-button:hover{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;}
/*.mejs-controls .mejs-volume-button:hover .mejs-volume-slider{display:block;}
*/
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total{position:absolute;left:13px;top:8px;width:5px;height:50px;background:#262929;border-bottom:#3d3f40 1px solid;box-shadow:inset 1px 1px rgba(0,0,0,.4);margin:0;padding:1px;}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current{position:absolute;left:13px;top:8px;width:5px;height:50px;background:#feac2c;background-image:-webkit-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:-moz-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:-o-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:-ms-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);-moz-background-size:6px 6px;background-size:6px 6px;-webkit-background-size:6px 5px;background-position:bottom;margin:1px;}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle{position:absolute;left:14px;top:16px;width:5px;height:5px;background:transparent;margin:0;}
/* horizontal version */
.mejs-controls div.mejs-horizontal-volume-slider{height:26px;width:62px;position:relative;background:none;}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total{position:absolute;left:0;top:11px;width:50px;height:5px;margin:0;padding:1px;font-size:1px;background:#262929;border-bottom:#3d3f40 1px solid;box-shadow:inset 1px 1px rgba(0,0,0,.4);}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current{position:absolute;left:0;top:11px;width:50px;height:5px;margin:1px;padding:0;font-size:1px;background:#feac2c;background-image:-webkit-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:-moz-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:-o-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:-ms-linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);background-image:linear-gradient(-45deg,#feac2c 25%,#fe842c 25%,#fe842c 50%,#feac2c 50%,#feac2c 75%,#fe842c 75%,#fe842c);-moz-background-size:6px 6px;background-size:6px 6px;-webkit-background-size:6px 5px;}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle{display:none;}
/* End:Mute/Volume */
/* Start:TRACK (Captions and Chapters) */
.mejs-controls .mejs-captions-button{position:relative;}
.mejs-controls .mejs-captions-button button{background-position:-48px 0;}
.mejs-controls .mejs-captions-button:hover button{background-position:-48px -32px;}
.mejs-controls .mejs-captions-button .mejs-captions-selector{visibility:hidden;position:absolute;bottom:30px;right:-10px;width:130px;height:100px;background:#3A3C3D;border:solid 1px transparent;padding:10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
/*.mejs-controls .mejs-captions-button:hover .mejs-captions-selector{visibility:visible;}
*/
.mejs-controls .mejs-captions-button .mejs-captions-selector ul{margin:0;padding:0;display:block;list-style-type:none !important;overflow:hidden;}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li{margin:0 0 6px 0;padding:0;list-style-type:none !important;display:block;color:#fff;overflow:hidden;}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px;}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{width:100px;float:left;padding:4px 0 0 0;line-height:15px;font-family:sans-serif;font-size:10px;}
.mejs-controls .mejs-captions-button .mejs-captions-translations{font-size:10px;margin:0 0 5px 0;}
.mejs-chapters{position:absolute;top:0;left:0;-xborder-right:solid 1px #fff;width:10000px;z-index:1;}
.mejs-chapters .mejs-chapter{position:absolute;float:left;background:#3A3C3D;background:rgba(58,60,61,0.7);background:-webkit-linear-gradient(top,rgba(74,76,77,0.7),rgba(0,0,0,0.7));background:-moz-linear-gradient(top,rgba(74,76,77,0.7),rgba(0,0,0,0.7));background:-o-linear-gradient(top,rgba(74,76,77,0.7),rgba(0,0,0,0.7));background:-ms-linear-gradient(top,rgba(74,76,77,0.7),rgba(0,0,0,0.7));background:linear-gradient(top,rgba(74,76,77,0.7),rgba(0,0,0,0.7));overflow:hidden;border:0;}
.mejs-chapters .mejs-chapter .mejs-chapter-block{font-size:11px;color:#fff;padding:5px;display:block;border-right:solid 1px #313335;border-right:solid 1px rgba(49,51,53,.7);border-bottom:solid 1px #313335;border-bottom:solid 1px rgba(49,51,53,.7);cursor:pointer;}
.mejs-chapters .mejs-chapter .mejs-chapter-block-last{border-right:none;}
.mejs-chapters .mejs-chapter .mejs-chapter-block:hover{background:#333;background:rgba(102,102,102,0.7);background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(102,102,102,0.7)),to(rgba(50,50,50,0.6)));background:-webkit-linear-gradient(top,rgba(102,102,102,0.7),rgba(50,50,50,0.6));background:-moz-linear-gradient(top,rgba(102,102,102,0.7),rgba(50,50,50,0.6));background:-o-linear-gradient(top,rgba(102,102,102,0.7),rgba(50,50,50,0.6));background:-ms-linear-gradient(top,rgba(102,102,102,0.7),rgba(50,50,50,0.6));background:linear-gradient(rgba(102,102,102,0.7),rgba(50,50,50,0.6));}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{font-size:12px;font-weight:bold;display:block;white-space:nowrap;text-overflow:ellipsis;margin:0 0 3px 0;line-height:12px;}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan{font-size:12px;line-height:12px;margin:3px 0 4px 0;display:block;white-space:nowrap;text-overflow:ellipsis;}
.mejs-captions-layer{position:absolute;bottom:0;left:0;text-align:center;/*font-weight:bold;*/
line-height:22px;font-size:12px;color:#fff;}
.mejs-captions-layer a{color:#fff;text-decoration:underline;}
.mejs-captions-layer[lang=ar]{font-size:20px;font-weight:normal;}
.mejs-captions-position{position:absolute;width:100%;bottom:15px;left:0;}
.mejs-captions-position-hover{bottom:45px;}
.mejs-captions-text{padding:5px 7px;background:#3a3c3d;background:rgba(58,60,61,0.8);border-radius:4px;}
/* End:TRACK (Captions and Chapters) */
.mejs-clear{clear:both;}
/* Start:ERROR */
.me-cannotplay{}
.me-cannotplay a{color:#fff;font-weight:bold;}
.me-cannotplay span{padding:15px;display:block;}
/* End:ERROR */
/* Start:Loop */
.mejs-controls .mejs-loop-off button{background-position:-64px -16px;}
.mejs-controls .mejs-loop-off:hover button{background-position:-64px -48px;}
.mejs-controls .mejs-loop-on button{background-position:-64px 0;}
.mejs-controls .mejs-loop-on::hover button{background-position:-64px -32px;}
/* End:Loop */
/* Start:backlight */
.mejs-controls .mejs-backlight-off button{background-position:-80px -16px;}
.mejs-controls .mejs-backlight-off:hover button{background-position:-80px -48px;}
.mejs-controls .mejs-backlight-on button{background-position:-80px 0;}
.mejs-controls .mejs-backlight-on:hover button{background-position:-80px -32px;}
/* End:backlight */
/* Start:picture controls */
.mejs-controls .mejs-picturecontrols-button{background-position:-96px 0;}
.mejs-controls .mejs-picturecontrols-button:hover{background-position:-96px -32px;}
/* End:picture controls */
/* context menu */
.mejs-contextmenu{position:absolute;width:150px;padding:10px;border-radius:4px;top:0;left:0;background:#fff;border:solid 1px #999;z-index:1001;/* make sure it shows on fullscreen */
}
.mejs-contextmenu .mejs-contextmenu-separator{height:1px;font-size:0;margin:5px 6px;background:#333;}
.mejs-contextmenu .mejs-contextmenu-item{font-family:sans-serif;font-size:12px;padding:4px 6px;cursor:pointer;color:#333;}
.mejs-contextmenu .mejs-contextmenu-item:hover{background:#2C7C91;color:#fff;}
/* Start:SourceChooser */
.mejs-controls .mejs-sourcechooser-button{position:relative;}
.mejs-controls .mejs-sourcechooser-button button{background-position:-128px 0;}
.mejs-controls .mejs-sourcechooser-button button{background-position:-128px -32px;}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector{visibility:hidden;position:absolute;bottom:26px;right:-10px;width:130px;height:100px;background:#3A3C3D;border:solid 1px transparent;padding:10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul{margin:0;padding:0;display:block;list-style-type:none !important;overflow:hidden;}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{margin:0 0 6px 0;padding:0;list-style-type:none !important;display:block;color:#fff;overflow:hidden;}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px;}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{width:100px;float:left;padding:4px 0 0 0;line-height:15px;font-family:sans-serif;font-size:10px;}
/* End:SourceChooser */

CSS代码(sti_style.css):

/* ----------------------------------------------------sti slider---------------------------------------------------- */
/* .sti_container{max-width:100%;height:auto;}
*/
.sti_container{font-family:Helvetica,Arial,sans-serif;font-size:12px;line-height:18px;color:#333;margin:0px auto;width:550px;min-height:200px;padding:0px;overflow:hidden;}
.sti_container a{text-decoration:none;color:#2d75cd;}
.ajax_content{clear:both;}
.sti_slider{width:550px;overflow:hidden;position:relative;background:#f4f4f4;margin:0;}
.sti_items{float:left;display:none;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:0.5s;-webkit-transition-timing-function:ease-out;padding:0px;margin:0px;width:15000px;-webkit-transform:translate3d(0px,0px,0px);}
.sti_items img{padding:0px;margin:0px;float:left;-webkit-transform:translate3d(0px,0px,0px);-webkit-transform:translate2d(0px,0px);}
.preload_32{background:#fff url(../img/preload_32.gif) center no-repeat;width:32px;height:32px;padding:5px;position:absolute;z-index:1000;border:#ddd solid 1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:0 0 4px rgba(0,0,0,.3);}
.preload_16{background:#fff url(../img/preload_16.gif) center no-repeat;width:16px;height:16px;padding:5px;position:absolute;z-index:1001;margin-top:28px;left:5px;border:#ddd solid 1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.3);}
.sti_slide{width:550px;height:207px;float:left;padding:0;margin:0;background:#fff url(../img/texture_01.jpg);position:relative;}
.sti_slide img{display:block;border:none !important;margin:0 !important;padding:0 !important;max-width:none !important;max-height:none !important;height:none !important;}
.sti_slide div.banner_title{font-size:13px;background:#000;color:#999;padding:10px;position:absolute;left:0;bottom:30px;opacity:.8;}
.sti_slide div.banner_title a{color:#fff;}
.sti_slide div.banner_title a:hover{text-decoration:underline;}
/* content */
.sti_content_slider{background:#fff;margin:0 auto;color:#777;}
.sti_content_slider .sti_content_inner{padding:0px;}
.sti_content_slider h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;margin-top:0;color:#505050;}
.sti_content_slider h1{font-size:32px;line-height:34px;margin-bottom:20px;clear:both;}
.sti_content_slider h2{font-size:26px;line-height:28px;margin-bottom:20px;clear:both;}
.sti_content_slider h3{font-size:20px;line-height:22px;margin-bottom:20px;clear:both;}
.sti_content_slider h4{font-size:16px;line-height:18px;margin-bottom:20px;clear:both;}
.sti_content_slider h5{font-size:14px;line-height:16px;margin-bottom:20px;clear:both;}
.sti_content_slider h6{font-size:12px;line-height:14px;margin-bottom:20px;clear:both;}
.sti_content_slider p{margin-top:0;margin-bottom:20px;}
.sti_content_slider a:hover{text-decoration:underline;color:#6fa1df;}
.sti_content_slider img{margin:0 0 20px 0 !important;}
.sti_clear{clear:both;}
.sti_line{border-top:#ddd solid 1px;margin-top:20px;clear:both;}
/* ----------------------------------------------------sti product---------------------------------------------------- */
.sti_prod{width:110px;height:150px;display:inline-block;margin:22px 0px -5px 20px;position:relative !important;line-height:30px;/* ie7 fix */
zoom:1;*display:inline;*margin-bottom:0px;}
.sti_prod img{position:absolute !important;bottom:0;display:block !important;border:none !important;margin:0 !important;padding:0 !important;max-width:none !important;max-height:none !important;height:none !important;}
.sti_prod a.link{position:absolute;width:32px;height:32px;background:transparent url(../img/sprite_icons.png) no-repeat;bottom:0;opacity:.8;outline:none;z-index:2;}
.sti_prod a.link.more{background:transparent url(../img/sprite_icons.png) no-repeat 0 0;}
.sti_prod a.link.zoom{background:transparent url(../img/sprite_icons.png) no-repeat -32px 0;}
.sti_prod a.link.video{background:transparent url(../img/sprite_icons.png) no-repeat -64px 0;}
.sti_prod a.link.audio{background:transparent url(../img/sprite_icons.png) no-repeat -96px 0;}
.sti_prod a.link.content{background:transparent url(../img/sprite_icons.png) no-repeat -128px 0;}
.sti_shelf_divider{height:30px;clear:both;background:url(../img/shelf_divider.png) repeat-x;}
.sti_shelf_divider_bottom{width:100%;height:5px;clear:both;background:url(../img/shelf_divider_bottom.png) repeat-x;}
.sti_prod .fx_shadow{width:11px;height:150px;right:-11px;bottom:0;position:absolute;z-index:0;}
.sti_prod .fx_leftside{width:11px;height:150px;left:0;bottom:0;position:absolute;}
/* .sti_prod .ribbon{display:none;}
*/
.sti_prod .ribbon_green{background:url(../img/ribbon_green.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_blue{background:url(../img/ribbon_blue.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_orange{background:url(../img/ribbon_orange.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_red{background:url(../img/ribbon_red.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_black{background:url(../img/ribbon_black.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_gray{background:url(../img/ribbon_gray.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_prod .ribbon_violet{background:url(../img/ribbon_violet.png) no-repeat;width:51px;height:54px;right:-6px;top:-6px;position:absolute;z-index:1;}
.sti_thumb_gallery{margin:12px;margin-top:16px;}
.sti_thumb_gallery img{border:#ddd solid 1px !important;padding:3px !important;box-shadow:0px 0px 3px rgba(0,0,0,.1) !important;}
/* ----------------------------------------------------sti prev/next / paginate---------------------------------------------------- */
.sti_previous{top:44%;left:0;height:40px;width:40px;position:absolute;background:#000 url(../img/nav_next_prev.png) left top no-repeat;opacity:.8;border:#555 solid 1px;box-shadow:3px 3px 5px rgba(0,0,0,.5);cursor:pointer;z-index:2;}
.sti_next{top:44%;right:0;height:40px;width:40px;position:absolute;background:#000 url(../img/nav_next_prev.png) right top no-repeat;opacity:.8;border:#555 solid 1px;box-shadow:-3px 3px 5px rgba(0,0,0,.5);cursor:pointer;z-index:2;}
.sti_paginate{position:relative;display:inline-block;zoom:1;*display:inline;margin-top:20px;min-width:50px;background-color:#fff;text-align:center;overflow:hidden;}
.sti_paginate .sti_page{float:left;}
.sti_paginate .sti_control{float:left;border-left:#eaeaea solid 1px;margin-left:10px;padding-left:8px;}
.sti_paginate .sti_control img{border:none !important;padding:0;}
.sti_paginate .sti_play{padding:0 !important;line-height:0 !important;float:left;margin-left:6px;margin-right:0 !important;}
.sti_paginate .sti_pause{padding:0 !important;line-height:0 !important;float:left;margin-left:6px;margin-right:0 !important;}
.sti_paginate .sti_btn{display:inline-block;zoom:1;*display:inline;padding:4px 11px 4px;margin-right:5px;margin-bottom:5px;font-size:12px;font-family:Arial,Helvetica,sans-serif;line-height:22px;color:#777;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;background-color:whiteSmoke;background-image:-ms-linear-gradient(top,white,#E6E6E6);background-image:-webkit-gradient(linear,0 0,0 100%,from(white),to(#E6E6E6));background-image:-webkit-linear-gradient(top,white,#E6E6E6);background-image:-o-linear-gradient(top,white,#E6E6E6);background-image:linear-gradient(top,white,#E6E6E6);background-image:-moz-linear-gradient(top,white,#E6E6E6);background-repeat:repeat-x;border:1px solid #CCC;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border-color:#E6E6E6 #E6E6E6 #BFBFBF;border-bottom-color:#B3B3B3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;filter:progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);filter:progid:dximagetransform.microsoft.gradient(enabled=false);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);outline:none;}
.sti_paginate .active{color:#222;background-color:#dddddd;background-image:none;background-image:-ms-linear-gradient(top,#dddddd,#c5c5c5);background-image:-webkit-gradient(linear,0 0,0 100%,from(#dddddd),to(#c5c5c5));background-image:-webkit-linear-gradient(top,#dddddd,#c5c5c5);background-image:-o-linear-gradient(top,#dddddd,#c5c5c5);background-image:linear-gradient(top,#dddddd,#c5c5c5);background-image:-moz-linear-gradient(top,#dddddd,#c5c5c5);border:1px solid #999;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);border-color:#D6D6D6 #D6D6D6 #BEBEBE;border-bottom-color:#888;}
.sti_paginate .bullets_page{background:url(../img/page_bullets_sprite.png) no-repeat;width:18px;height:18px;margin:6px 6px 0 0;float:left;border:none;outline:none;}
.sti_paginate .bullets_page_active{background:url(../img/page_bullets_sprite.png) no-repeat -18px 0;width:18px;height:18px;margin:6px 6px 0 0;float:left;border:none;outline:none;}
.sti_paginate .thumbnails_page{margin:0 3px 0 0;float:left;border:#fff solid 1px;outline:none;width:60px;height:40px;padding:0px;background:#fff;}
.sti_paginate .thumbnails_page img{border:none !important;}
.sti_paginate .thumbnails_page_active{margin:0 3px 0 0;float:left;border:#555 solid 1px;outline:none;width:60px;height:40px;padding:0px;background:#fff;opacity:.3}
.sti_paginate .thumbnails_page_active img{border:none !important;}
/* ----------------------------------------------------sti menu---------------------------------------------------- */
.sti_menu{position:relative;display:inline-block;zoom:1;*display:inline;margin:0 auto 15px auto;background-color:#fff;font-weight:300;/*background:url(../img/texture_01.jpg);background-position:0 50px;*/
}
.sti_menu .sti_btn{display:inline-block;zoom:1;*display:inline;padding:0px 8px 0px 2px;margin-bottom:0;font-size:12px;font-family:Arial,Helvetica,sans-serif;line-height:14px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;border-right:#ddd solid 1px;outline:none;}
.sti_menu .sti_btn:last-child{border:none;/* padding-right:0;*/
}
.sti_menu .active{color:#b9b9b9;}
/* ----------------------------------------------------sti cursor---------------------------------------------------- */
.grab_cursor{cursor:move;}
.grab_cursor{cursor:url(../img/cursor/mozgrab.png) 8 8,move;}
.grabbing_cursor{cursor:url(../img/cursor/mozgrabbing.png) 8 8,move;}
/* ----------------------------------------------------sti tooltip---------------------------------------------------- */
.sti_tooltip{background:#000;color:#fff;padding:5px 10px;position:absolute;z-index:1001;top:0;max-width:150px;font-size:11px;font-family:Arial,Helvetica,sans-serif;text-align:center;box-shadow:0 0 14px rgba(0,0,0,.5);border:#444 solid 1px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
/* ----------------------------------------------------sti lightbox---------------------------------------------------- */
#mask_lightbox{position:absolute;left:0;top:0;z-index:1001;background-color:#000;display:none;}
#popup_lightbox{position:fixed;left:0;top:0;width:48px;height:48px;display:block;z-index:9999;background:#000;padding:0px;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;text-align:left;box-shadow:0 0 30px rgba(0,0,0,.8);}
#preload_lightbox{background:#fff url(../img/preload_16.gif) center no-repeat;width:16px;height:16px;padding:5px;position:absolute;z-index:1001;left:10px;top:10px;border:#ddd solid 1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.3);}
#sti_bar_lightbox{position:absolute;color:#888;font-family:Arial,Helvetica,sans-serif;font-size:12px;bottom:0px;text-align:left;height:30px;background-color:#000;padding:0;text-indent:10px;line-height:32px;border-top:#222 solid 1px;display:none;box-shadow:0 10px 20px rgba(0,0,0,.8);}
#close_btn_lightbox{width:30px;height:30px;top:0px;right:0;position:absolute;float:right;cursor:pointer;background:transparent url(../img/btn_close.png) no-repeat;}
#html_content_lightbox{background:#fff;}
#html_content_lightbox html,body{height:100%;}
#sti_previous_lightbox{top:0;left:-40px;height:100%;width:40px;position:absolute;background:#000 url(../img/nav_next_prev.png) left center no-repeat;opacity:.7;box-shadow:-3px 3px 10px rgba(0,0,0,.8);cursor:pointer;z-index:1002;}
#sti_next_lightbox{top:0;right:-40px;height:100%;width:40px;position:absolute;background:#000 url(../img/nav_next_prev.png) right center no-repeat;opacity:.7;box-shadow:3px 3px 10px rgba(0,0,0,.8);cursor:pointer;z-index:1002;}
/* ----------------------------------------------------sliders description---------------------------------------------------- */
.slider_description{margin:0px auto 40px auto;font-size:11px;color:#777;letter-spacing:1px;font-family:Helvetica,Arial,sans-serif;background:#f9f9f9;padding:5px;}
.slider_description strong{color:#222;font-size:12px;}
.marcador{background:#F00;width:10px;height:10px;position:absolute;z-index:100000;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
187.91 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
187.91 KB
立即下载
彭璧云翠
了解
打赏作者 鼓励作者
Html JS 图片特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章