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

CSS3与jQuery结合的动画效果轮播滚动切换特效代码

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

以下是 CSS3与jQuery结合的动画效果轮播滚动切换特效代码 的示例演示效果:

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

部分效果截图:

CSS3与jQuery结合的动画效果轮播滚动切换特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Parallax Content Slider with CSS3 and jQuery_Chinaz</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Parallax Content Slider with CSS3 and jQuery" />
        <meta name="keywords" content="jquery, css3, chinaz" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
		<link href='http://fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
		<noscript>
			<link rel="stylesheet" type="text/css" href="css/nojs.css" />
		</noscript>
    </head>
    <body>
        <div class="container">
			<header>
				<h1>Parallax Content Slider <span>with CSS3 and jQuery</span></h1>
				<h2>A content slider with delayed animations and background parallax effect</h2>
				<p class="codrops-demos">
					<a class="current-demo" href="index.html">Default</a>
					<a href="index2.html">Autoplay</a>
					<a href="index3.html">Parallax off</a>
				</p>
			</header>
			<div id="da-slider" class="da-slider">
				<div class="da-slide">
					<h2>Warm welcome</h2>
					<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/1.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Easy management</h2>
					<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/2.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Revolution</h2>
					<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/3.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Quality Control</h2>
					<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/4.png" alt="image01" /></div>
				</div>
				<nav class="da-arrows">
					<span class="da-arrows-prev"></span>
					<span class="da-arrows-next"></span>
				</nav>
			</div>
        </div>
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.cslider.js"></script>
		<script type="text/javascript">
			$(function() {
			
				$('#da-slider').cslider();
				
			});
		</script>	
    </body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
         <title>Parallax Content Slider with CSS3 and jQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Parallax Content Slider with CSS3 and jQuery" />
        <meta name="keywords" content="slider, animations, parallax, delayed, easing, jquery, css3, kendo UI" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
		<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
		<link href='http://fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
		<noscript>
			<link rel="stylesheet" type="text/css" href="css/nojs.css" />
		</noscript>
    </head>
    <body>
        <div class="container">
			
			<header>
				<h1>Parallax Content Slider <span>with CSS3 and jQuery</span></h1>
				<h2>A content slider with delayed animations and background parallax effect</h2>
				<p class="codrops-demos">
					<a href="index.html">Default</a>
					<a class="current-demo" href="index2.html">Autoplay</a>
					<a href="index3.html">Parallax off</a>
				</p>
			</header>
			<div id="da-slider" class="da-slider">
				<div class="da-slide">
					<h2>Easy management</h2>
					<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/2.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Revolution</h2>
					<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/3.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Warm welcome</h2>
					<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/1.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Quality Control</h2>
					<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/4.png" alt="image01" /></div>
				</div>
				<nav class="da-arrows">
					<span class="da-arrows-prev"></span>
					<span class="da-arrows-next"></span>
				</nav>
			</div>
        </div>
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.cslider.js"></script>
		<script type="text/javascript">
			$(function() {
			
				$('#da-slider').cslider({
					autoplay	: true,
					bgincrement	: 450
				});
			
			});
		</script>	
    </body>
</html>

JS代码(jquery.cslider.js):

(function( $,undefined ){
	/* * Slider object. */
$.Slider= function( options,element ){
	this.$el= $( element );
	this._init( options );
}
;
	$.Slider.defaults={
	current:0,// index of current slidebgincrement:50,// increment the bg position (parallax effect) when slidingautoplay:false,// slideshow on / offinterval:4000 // time between transitions}
;
	$.Slider.prototype={
	_init:function( options ){
	this.options= $.extend( true,{
}
,$.Slider.defaults,options );
	this.$slides= this.$el.children('div.da-slide');
	this.slidesCount= this.$slides.length;
	this.current= this.options.current;
	if( this.current < 0 || this.current >= this.slidesCount ){
	this.current= 0;
}
this.$slides.eq( this.current ).addClass( 'da-slide-current' );
	var $navigation= $( '<nav class="da-dots"/>' );
	for( var i = 0;
	i < this.slidesCount;
	++i ){
	$navigation.append( '<span/>' );
}
$navigation.appendTo( this.$el );
	this.$pages= this.$el.find('nav.da-dots > span');
	this.$navNext= this.$el.find('span.da-arrows-next');
	this.$navPrev= this.$el.find('span.da-arrows-prev');
	this.isAnimating= false;
	this.bgpositer= 0;
	this.cssAnimations= Modernizr.cssanimations;
	this.cssTransitions= Modernizr.csstransitions;
	if( !this.cssAnimations || !this.cssAnimations ){
	this.$el.addClass( 'da-slider-fb' );
}
this._updatePage();
	// load the eventsthis._loadEvents();
	// slideshowif( this.options.autoplay ){
	this._startSlideshow();
}
}
,_navigate:function( page,dir ){
	var $current= this.$slides.eq( this.current ),$next,_self = this;
	if( this.current === page || this.isAnimating ) return false;
	this.isAnimating= true;
	// check dirvar classTo,classFrom,d;
	if( !dir ){
	( page > this.current ) ? d = 'next':d = 'prev';
}
else{
	d = dir;
}
if( this.cssAnimations && this.cssAnimations ){
	if( d === 'next' ){
	classTo= 'da-slide-toleft';
	classFrom= 'da-slide-fromright';
	++this.bgpositer;
}
else{
	classTo= 'da-slide-toright';
	classFrom= 'da-slide-fromleft';
	--this.bgpositer;
}
this.$el.css( 'background-position',this.bgpositer * this.options.bgincrement + '% 0%' );
}
this.current= page;
	$next= this.$slides.eq( this.current );
	if( this.cssAnimations && this.cssAnimations ){
	var rmClasses= 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
	$current.removeClass( rmClasses );
	$next.removeClass( rmClasses );
	$current.addClass( classTo );
	$next.addClass( classFrom );
	$current.removeClass( 'da-slide-current' );
	$next.addClass( 'da-slide-current' );
}
// fallbackif( !this.cssAnimations || !this.cssAnimations ){
	$next.css( 'left',( d === 'next' ) ? '100%':'-100%' ).stop().animate({
	left:'0%'}
,1000,function(){
	_self.isAnimating = false;
}
);
	$current.stop().animate({
	left:( d === 'next' ) ? '-100%':'100%'}
,1000,function(){
	$current.removeClass( 'da-slide-current' );
}
);
}
this._updatePage();
}
,_updatePage:function(){
	this.$pages.removeClass( 'da-dots-current' );
	this.$pages.eq( this.current ).addClass( 'da-dots-current' );
}
,_startSlideshow:function(){
	var _self= this;
	this.slideshow= setTimeout( function(){
	var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1:page = 0;
	_self._navigate( page,'next' );
	if( _self.options.autoplay ){
	_self._startSlideshow();
}
}
,this.options.interval );
}
,page:function( idx ){
	if( idx >= this.slidesCount || idx < 0 ){
	return false;
}
if( this.options.autoplay ){
	clearTimeout( this.slideshow );
	this.options.autoplay= false;
}
this._navigate( idx );
}
,_loadEvents:function(){
	var _self = this;
	this.$pages.on( 'click.cslider',function( event ){
	_self.page( $(this).index() );
	return false;
}
);
	this.$navNext.on( 'click.cslider',function( event ){
	if( _self.options.autoplay ){
	clearTimeout( _self.slideshow );
	_self.options.autoplay= false;
}
var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1:page = 0;
	_self._navigate( page,'next' );
	return false;
}
);
	this.$navPrev.on( 'click.cslider',function( event ){
	if( _self.options.autoplay ){
	clearTimeout( _self.slideshow );
	_self.options.autoplay= false;
}
var page = ( _self.current > 0 ) ? page = _self.current - 1:page = _self.slidesCount - 1;
	_self._navigate( page,'prev' );
	return false;
}
);
	if( this.cssTransitions ){
	if( !this.options.bgincrement ){
	this.$el.on( 'webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider',function( event ){
	if( event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4' ){
	_self.isAnimating= false;
}
}
);
}
else{
	this.$el.on( 'webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider',function( event ){
	if( event.target.id === _self.$el.attr( 'id' ) )_self.isAnimating= false;
}
);
}
}
}
}
;
	var logError= function( message ){
	if ( this.console ){
	console.error( message );
}
}
;
	$.fn.cslider= function( options ){
	if ( typeof options === 'string' ){
	var args = Array.prototype.slice.call( arguments,1 );
	this.each(function(){
	var instance = $.data( this,'cslider' );
	if ( !instance ){
	logError( "cannot call methods on cslider prior to initialization;
	" +"attempted to call method '" + options + "'" );
	return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ){
	logError( "no such method '" + options + "' for cslider instance" );
	return;
}
instance[ options ].apply( instance,args );
}
);
}
else{
	this.each(function(){
	var instance = $.data( this,'cslider' );
	if ( !instance ){
	$.data( this,'cslider',new $.Slider( options,this ) );
}
}
);
}
return this;
}
;
}
)( jQuery );

JS代码(modernizr.custom.28468.js):

/* Modernizr 2.5.3 (Custom Build) | MIT & BSD * Build:http://www.modernizr.com/download/#-cssanimations-csstransitions-shiv-cssclasses-testprop-testallprops-domprefixes-load */
;
	window.Modernizr=function(a,b,c){
	function x(a){
	j.cssText=a}
function y(a,b){
	return x(prefixes.join(a+";
	")+(b||""))}
function z(a,b){
	return typeof a===b}
function A(a,b){
	return!!~(""+a).indexOf(b)}
function B(a,b){
	for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;
	return!1}
function C(a,b,d){
	for(var e in a){
	var f=b[a[e]];
	if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}
return!1}
function D(a,b,c){
	var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+n.join(d+" ")+d).split(" ");
	return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}
var d="2.5.3",e={
}
,f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={
}
.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={
}
,q={
}
,r={
}
,s=[],t=s.slice,u,v={
}
.hasOwnProperty,w;
	!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){
	return v.call(a,b)}
:w=function(a,b){
	return b in a&&z(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
	var c=this;
	if(typeof c!="function")throw new TypeError;
	var d=t.call(arguments,1),e=function(){
	if(this instanceof e){
	var a=function(){
}
;
	a.prototype=c.prototype;
	var f=new a,g=c.apply(f,d.concat(t.call(arguments)));
	return Object(g)===g?g:f}
return c.apply(b,d.concat(t.call(arguments)))}
;
	return e}
),p.cssanimations=function(){
	return D("animationName")}
,p.csstransitions=function(){
	return D("transition")}
;
	for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));
	return x(""),i=k=null,function(a,b){
	function g(a,b){
	var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
	return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function h(){
	var a=k.elements;
	return typeof a=="string"?a.split(" "):a}
function i(a){
	var b={
}
,c=a.createElement,e=a.createDocumentFragment,f=e();
	a.createElement=function(a){
	var e=(b[a]||(b[a]=c(a))).cloneNode();
	return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e}
,a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+h().join().replace(/\w+/g,function(a){
	return b[a]=c(a),f.createElement(a),'c("'+a+'")'}
)+");
	return n}
")(k,f)}
function j(a){
	var b;
	return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
	display:block}
audio{
	display:none}
canvas,video{
	display:inline-block;
	*display:inline;
	*zoom:1}
[hidden]{
	display:none}
audio[controls]{
	display:inline-block;
	*display:inline;
	*zoom:1}
mark{
	background:#FF0;
	color:#000}
")),f||(b=!i(a)),b&&(a.documentShived=b),a)}
var c=a.html5||{
}
,d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;
	(function(){
	var a=b.createElement("a");
	a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){
	try{
	b.createElement("a")}
catch(a){
	return!0}
var c=b.createDocumentFragment();
	return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}
()}
)();
	var k={
	elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j}
;
	a.html5=k,j(b)}
(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){
	return B([a])}
,e.testAllProps=D,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}
(this,this.document),function(a,b,c){
	function d(a){
	return o.call(a)=="[object Function]"}
function e(a){
	return typeof a=="string"}
function f(){
}
function g(a){
	return!a||a=="loaded"||a=="complete"||a=="uninitialized"}
function h(){
	var a=p.shift();
	q=1,a?a.t?m(function(){
	(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)}
,0):(a(),h()):q=0}
function i(a,c,d,e,f,i,j){
	function k(b){
	if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){
	a!="img"&&m(function(){
	t.removeChild(l)}
,50);
	for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}
}
var j=j||B.errorTimeout,l={
}
,o=0,r=0,u={
	t:d,s:c,e:f,a:i,x:j}
;
	y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){
	k.call(this,r)}
,p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}
function j(a,b,c,d,f){
	return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}
function k(){
	var a=B;
	return a.loader={
	load:j,i:0}
,a}
var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={
}
.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){
	return o.call(a)=="[object Array]"}
,x=[],y={
}
,z={
	timeout:function(a,b){
	return b.length&&(a.timeout=b[0]),a}
}
,A,B;
	B=function(a){
	function b(a){
	var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={
	url:c,origUrl:c,prefixes:a}
,e,f,g;
	for(f=0;
	f<d;
	f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));
	for(f=0;
	f<b;
	f++)c=x[f](c);
	return c}
function g(a,e,f,g,i){
	var j=b(a),l=j.autoCallback;
	j.url.split(".").pop().split("?").shift(),j.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]||h),j.instead?j.instead(a,e,f,g,i):(y[j.url]?j.noexec=!0:y[j.url]=1,f.load(j.url,j.forceCSS||!j.forceJS&&"css"==j.url.split(".").pop().split("?").shift()?"c":c,j.noexec,j.attrs,j.timeout),(d(e)||d(l))&&f.load(function(){
	k(),e&&e(j.origUrl,i,g),l&&l(j.origUrl,i,g),y[j.url]=2}
)))}
function i(a,b){
	function c(a,c){
	if(a){
	if(e(a))c||(j=function(){
	var a=[].slice.call(arguments);
	k.apply(this,a),l()}
),g(a,j,b,0,h);
	else if(Object(a)===a)for(n in m=function(){
	var b=0,c;
	for(c in a)a.hasOwnProperty(c)&&b++;
	return b}
(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){
	var a=[].slice.call(arguments);
	k.apply(this,a),l()}
:j[n]=function(a){
	return function(){
	var b=[].slice.call(arguments);
	a&&a.apply(this,b),l()}
}
(k[n])),g(a[n],j,b,n,h))}
else!c&&l()}
var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;
	c(h?a.yep:a.nope,!!i),i&&c(i)}
var j,l,m=this.yepnope.loader;
	if(e(a))g(a,0,m,0);
	else if(w(a))for(j=0;
	j<a.length;
	j++)l=a[j],e(l)?g(l,0,m,0):w(l)?B(l):Object(l)===l&&i(l,m);
	else Object(a)===a&&i(a,m)}
,B.addPrefix=function(a,b){
	z[a]=b}
,B.addFilter=function(a){
	x.push(a)}
,B.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){
	b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"}
,0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){
	var k=b.createElement("script"),l,o,e=e||B.errorTimeout;
	k.src=a;
	for(o in d)k.setAttribute(o,d[o]);
	c=j?h:c||f,k.onreadystatechange=k.onload=function(){
	!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)}
,m(function(){
	l||(l=1,c(1))}
,e),i?k.onload():n.parentNode.insertBefore(k,n)}
,a.yepnope.injectCss=function(a,c,d,e,g,i){
	var e=b.createElement("link"),j,c=i?h:c||f;
	e.href=a,e.rel="stylesheet",e.type="text/css";
	for(j in d)e.setAttribute(j,d[j]);
	g||(n.parentNode.insertBefore(e,n),m(c,0))}
}
(this,document),Modernizr.load=function(){
	yepnope.apply(window,[].slice.call(arguments,0))}
;

CSS代码(nojs.css):

.da-slide{position:relative;}
.da-slide h2,.da-slide p,.da-slide .da-link,.da-slide .da-img{position:absolute;opacity:1;left:10%;}
.da-slide .da-img{left:60%;}
.da-dots,.da-arrows{display:none;}

CSS代码(style.css):

.da-slider{width:100%;min-width:520px;height:400px;position:relative;margin:30px auto;overflow:hidden;background:transparent url(../images/waves.gif) repeat 0% 0%;border-top:8px solid #efc34a;border-bottom:8px solid #efc34a;box-shadow:0px 1px 1px rgba(0,0,0,0.2),0px -2px 1px #fff;-webkit-transition:background-position 1.4s ease-in-out 0.3s;-moz-transition:background-position 1.4s ease-in-out 0.3s;-o-transition:background-position 1.4s ease-in-out 0.3s;-ms-transition:background-position 1.4s ease-in-out 0.3s;transition:background-position 1.4s ease-in-out 0.3s;}
.da-slide{position:absolute;width:100%;height:100%;top:0px;left:0px;font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;text-align:left;}
.da-slide-current{z-index:1000;}
.da-slider-fb .da-slide{left:100%;}
.da-slider-fb .da-slide.da-slide-current{left:0px;}
.da-slide h2,.da-slide p,.da-slide .da-link,.da-slide .da-img{position:absolute;opacity:0;left:110%;}
.da-slider-fb .da-slide h2,.da-slider-fb .da-slide p,.da-slider-fb .da-slide .da-link{left:10%;opacity:1;}
.da-slider-fb .da-slide .da-img{left:60%;opacity:1;}
.da-slide h2{color:#fff;font-size:66px;width:50%;top:60px;white-space:nowrap;z-index:10;text-shadow:1px 1px 1px rgba(0,0,0,0.1);font-family:'Economica',Arial,sans-serif;font-weight:700;}
.da-slide p{width:45%;top:155px;color:#916c05;font-size:18px;line-height:26px;height:80px;overflow:hidden;font-style:italic;font-family:'Economica',Arial,sans-serif;font-weight:400;font-style:italic;}
.da-slide .da-img{text-align:center;width:30%;top:70px;height:256px;line-height:320px;left:110%;/*60%*/
}
.da-slide .da-link{top:270px;/*depends on p height*/
border-radius:30px;box-shadow:0px 1px 1px rgba(0,0,0,0.1);color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.2);border:8px solid rgba(255,255,255,0.8);padding:2px 20px 0px;font-size:18px;line-height:30px;width:80px;text-align:center;background:rgba(255,255,255,0.2);}
.da-slide .da-link:hover{background:rgba(255,255,255,0.3);}
.da-dots{width:100%;position:absolute;text-align:center;left:0px;bottom:20px;z-index:2000;-moz-user-select:none;-webkit-user-select:none;}
.da-dots span{display:inline-block;position:relative;width:12px;height:12px;border-radius:50%;background:#e4b42d;margin:3px;cursor:pointer;box-shadow:1px 1px 1px rgba(0,0,0,0.1) inset,1px 1px 1px rgba(255,255,255,0.1);}
.da-dots span.da-dots-current:after{content:'';width:8px;height:8px;position:absolute;top:2px;left:2px;border-radius:50%;background:rgb(255,255,255);background:-moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,1)),color-stop(47%,rgba(246,246,246,1)),color-stop(100%,rgba(237,237,237,1)));background:-webkit-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);background:-o-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);background:-ms-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);background:linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#ededed',GradientType=0 );}
.da-arrows{-moz-user-select:none;-webkit-user-select:none;}
.da-arrows span{position:absolute;top:50%;height:30px;width:30px;border-radius:50%;background:#e4b42d;cursor:pointer;z-index:2000;opacity:0;box-shadow:1px 1px 1px rgba(0,0,0,0.1) inset,1px 1px 1px rgba(255,255,255,0.1);-webkit-transition:opacity 0.4s ease-in-out 0.2s;-moz-transition:opacity 0.4s ease-in-out 0.2s;-o-transition:opacity 0.4s ease-in-out 0.2s;-ms-transition:opacity 0.4s ease-in-out 0.2s;transition:opacity 0.4s ease-in-out 0.2s;}
.da-slider:hover .da-arrows span{opacity:1;}
.da-arrows span:after{content:'';position:absolute;width:20px;height:20px;top:5px;left:5px;background:transparent url(../images/arrows.png) no-repeat top left;border-radius:50%;box-shadow:1px 1px 2px rgba(0,0,0,0.1);}
.da-arrows span:hover:after{box-shadow:1px 1px 4px rgba(0,0,0,0.3);}
.da-arrows span:active:after{box-shadow:1px 1px 1px rgba(255,255,255,0.1);}
.da-arrows span.da-arrows-next:after{background-position:top right;}
.da-arrows span.da-arrows-prev{left:15px;}
.da-arrows span.da-arrows-next{right:15px;}
.da-slide-current h2,.da-slide-current p,.da-slide-current .da-link{left:10%;opacity:1;}
.da-slide-current .da-img{left:60%;opacity:1;}
/* Animation classes and animations */
/* Slide in from the right*/
.da-slide-fromright h2{-webkit-animation:fromRightAnim1 0.6s ease-in 0.8s both;-moz-animation:fromRightAnim1 0.6s ease-in 0.8s both;-o-animation:fromRightAnim1 0.6s ease-in 0.8s both;-ms-animation:fromRightAnim1 0.6s ease-in 0.8s both;animation:fromRightAnim1 0.6s ease-in 0.8s both;}
.da-slide-fromright p{-webkit-animation:fromRightAnim2 0.6s ease-in 0.8s both;-moz-animation:fromRightAnim2 0.6s ease-in 0.8s both;-o-animation:fromRightAnim2 0.6s ease-in 0.8s both;-ms-animation:fromRightAnim2 0.6s ease-in 0.8s both;animation:fromRightAnim2 0.6s ease-in 0.8s both;}
.da-slide-fromright .da-link{-webkit-animation:fromRightAnim3 0.4s ease-in 1.2s both;-moz-animation:fromRightAnim3 0.4s ease-in 1.2s both;-o-animation:fromRightAnim3 0.4s ease-in 1.2s both;-ms-animation:fromRightAnim3 0.4s ease-in 1.2s both;animation:fromRightAnim3 0.4s ease-in 1.2s both;}
.da-slide-fromright .da-img{-webkit-animation:fromRightAnim4 0.6s ease-in 0.8s both;-moz-animation:fromRightAnim4 0.6s ease-in 0.8s both;-o-animation:fromRightAnim4 0.6s ease-in 0.8s both;-ms-animation:fromRightAnim4 0.6s ease-in 0.8s both;animation:fromRightAnim4 0.6s ease-in 0.8s both;}
@-webkit-keyframes fromRightAnim1{0%{left:110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-webkit-keyframes fromRightAnim2{0%{left:110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-webkit-keyframes fromRightAnim3{0%{left:110%;opacity:0;}
1%{left:10%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-webkit-keyframes fromRightAnim4{0%{left:110%;opacity:0;}
100%{left:60%;opacity:1;}
}
@-moz-keyframes fromRightAnim1{0%{left:110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-moz-keyframes fromRightAnim2{0%{left:110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-moz-keyframes fromRightAnim3{0%{left:110%;opacity:0;}
1%{left:10%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-moz-keyframes fromRightAnim4{0%{left:110%;opacity:0;}
100%{left:60%;opacity:1;}
}
@-o-keyframes fromRightAnim1{0%{left:110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-o-keyframes fromRightAnim2{0%{left:110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-o-keyframes fromRightAnim3{0%{left:110%;opacity:0;}
1%{left:10%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-o-keyframes fromRightAnim4{0%{left:110%;opacity:0;}
100%{left:60%;opacity:1;}
}
@-ms-keyframes fromRightAnim1{0%{left:110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-ms-keyframes fromRightAnim2{0%{left:110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-ms-keyframes fromRightAnim3{0%{left:110%;opacity:0;}
1%{left:10%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-ms-keyframes fromRightAnim4{0%{left:110%;opacity:0;}
100%{left:60%;opacity:1;}
}
@keyframes fromRightAnim1{0%{left:110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@keyframes fromRightAnim2{0%{left:110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@keyframes fromRightAnim3{0%{left:110%;opacity:0;}
1%{left:10%;opacity:0;}
100%{left:10%;opacity:1;}
}
@keyframes fromRightAnim4{0%{left:110%;opacity:0;}
100%{left:60%;opacity:1;}
}
/* Slide in from the left*/
.da-slide-fromleft h2{-webkit-animation:fromLeftAnim1 0.6s ease-in 0.6s both;-moz-animation:fromLeftAnim1 0.6s ease-in 0.6s both;-o-animation:fromLeftAnim1 0.6s ease-in 0.6s both;-ms-animation:fromLeftAnim1 0.6s ease-in 0.6s both;animation:fromLeftAnim1 0.6s ease-in 0.6s both;}
.da-slide-fromleft p{-webkit-animation:fromLeftAnim2 0.6s ease-in 0.6s both;-moz-animation:fromLeftAnim2 0.6s ease-in 0.6s both;-o-animation:fromLeftAnim2 0.6s ease-in 0.6s both;-ms-animation:fromLeftAnim2 0.6s ease-in 0.6s both;animation:fromLeftAnim2 0.6s ease-in 0.6s both;}
.da-slide-fromleft .da-link{-webkit-animation:fromLeftAnim3 0.4s ease-in 1.2s both;-moz-animation:fromLeftAnim3 0.4s ease-in 1.2s both;-o-animation:fromLeftAnim3 0.4s ease-in 1.2s both;-ms-animation:fromLeftAnim3 0.4s ease-in 1.2s both;animation:fromLeftAnim3 0.4s ease-in 1.2s both;}
.da-slide-fromleft .da-img{-webkit-animation:fromLeftAnim4 0.6s ease-in 0.6s both;-moz-animation:fromLeftAnim4 0.6s ease-in 0.6s both;-o-animation:fromLeftAnim4 0.6s ease-in 0.6s both;-ms-animation:fromLeftAnim4 0.6s ease-in 0.6s both;animation:fromLeftAnim4 0.6s ease-in 0.6s both;}
@-webkit-keyframes fromLeftAnim1{0%{left:-110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-webkit-keyframes fromLeftAnim2{0%{left:-110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-webkit-keyframes fromLeftAnim3{0%{left:-110%;opacity:0;}
1%{left:10%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-webkit-keyframes fromLeftAnim4{0%{left:-110%;opacity:0;}
100%{left:60%;opacity:1;}
}
@-moz-keyframes fromLeftAnim1{0%{left:-110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-moz-keyframes fromLeftAnim2{0%{left:-110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-moz-keyframes fromLeftAnim3{0%{left:-110%;opacity:0;}
1%{left:10%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-moz-keyframes fromLeftAnim4{0%{left:-110%;opacity:0;}
100%{left:60%;opacity:1;}
}
@-o-keyframes fromLeftAnim1{0%{left:-110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-o-keyframes fromLeftAnim2{0%{left:-110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-o-keyframes fromLeftAnim3{0%{left:-110%;opacity:0;}
1%{left:10%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-o-keyframes fromLeftAnim4{0%{left:-110%;opacity:0;}
100%{left:60%;opacity:1;}
}
@-ms-keyframes fromLeftAnim1{0%{left:-110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-ms-keyframes fromLeftAnim2{0%{left:-110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-ms-keyframes fromLeftAnim3{0%{left:-110%;opacity:0;}
1%{left:10%;opacity:0;}
100%{left:10%;opacity:1;}
}
@-ms-keyframes fromLeftAnim4{0%{left:-110%;opacity:0;}
100%{left:60%;opacity:1;}
}
@keyframes fromLeftAnim1{0%{left:-110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@keyframes fromLeftAnim2{0%{left:-110%;opacity:0;}
100%{left:10%;opacity:1;}
}
@keyframes fromLeftAnim3{0%{left:-110%;opacity:0;}
1%{left:10%;opacity:0;}
100%{left:10%;opacity:1;}
}
@keyframes fromLeftAnim4{0%{left:-110%;opacity:0;}
100%{left:60%;opacity:1;}
}
/* Slide out to the right */
.da-slide-toright h2{-webkit-animation:toRightAnim1 0.6s ease-in 0.6s both;-moz-animation:toRightAnim1 0.6s ease-in 0.6s both;-o-animation:toRightAnim1 0.6s ease-in 0.6s both;-ms-animation:toRightAnim1 0.6s ease-in 0.6s both;animation:toRightAnim1 0.6s ease-in 0.6s both;}
.da-slide-toright p{-webkit-animation:toRightAnim2 0.6s ease-in 0.3s both;-moz-animation:toRightAnim2 0.6s ease-in 0.3s both;-o-animation:toRightAnim2 0.6s ease-in 0.3s both;-ms-animation:toRightAnim2 0.6s ease-in 0.3s both;animation:toRightAnim2 0.6s ease-in 0.3s both;}
.da-slide-toright .da-link{-webkit-animation:toRightAnim3 0.4s ease-in both;-moz-animation:toRightAnim3 0.4s ease-in both;-o-animation:toRightAnim3 0.4s ease-in both;-ms-animation:toRightAnim3 0.4s ease-in both;animation:toRightAnim3 0.4s ease-in both;}
.da-slide-toright .da-img{-webkit-animation:toRightAnim4 0.6s ease-in both;-moz-animation:toRightAnim4 0.6s ease-in both;-o-animation:toRightAnim4 0.6s ease-in both;-ms-animation:toRightAnim4 0.6s ease-in both;animation:toRightAnim4 0.6s ease-in both;}
@-webkit-keyframes toRightAnim1{0%{left:10%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-webkit-keyframes toRightAnim2{0%{left:10%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-webkit-keyframes toRightAnim3{0%{left:10%;opacity:1;}
99%{left:10%;opacity:0;}
100%{left:100%;opacity:0;}
}
@-webkit-keyframes toRightAnim4{0%{left:60%;opacity:1;}
30%{left:55%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-moz-keyframes toRightAnim1{0%{left:10%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-moz-keyframes toRightAnim2{0%{left:10%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-moz-keyframes toRightAnim3{0%{left:10%;opacity:1;}
99%{left:10%;opacity:0;}
100%{left:100%;opacity:0;}
}
@-moz-keyframes toRightAnim4{0%{left:60%;opacity:1;}
30%{left:55%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-o-keyframes toRightAnim1{0%{left:10%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-o-keyframes toRightAnim2{0%{left:10%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-o-keyframes toRightAnim3{0%{left:10%;opacity:1;}
99%{left:10%;opacity:0;}
100%{left:100%;opacity:0;}
}
@-o-keyframes toRightAnim4{0%{left:60%;opacity:1;}
30%{left:55%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-ms-keyframes toRightAnim1{0%{left:10%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-ms-keyframes toRightAnim2{0%{left:10%;opacity:1;}
100%{left:100%;opacity:0;}
}
@-ms-keyframes toRightAnim3{0%{left:10%;opacity:1;}
99%{left:10%;opacity:0;}
100%{left:100%;opacity:0;}
}
@-ms-keyframes toRightAnim4{0%{left:60%;opacity:1;}
30%{left:55%;opacity:1;}
100%{left:100%;opacity:0;}
}
@keyframes toRightAnim1{0%{left:10%;opacity:1;}
100%{left:100%;opacity:0;}
}
@keyframes toRightAnim2{0%{left:10%;opacity:1;}
100%{left:100%;opacity:0;}
}
@keyframes toRightAnim3{0%{left:10%;opacity:1;}
99%{left:10%;opacity:0;}
100%{left:100%;opacity:0;}
}
@keyframes toRightAnim4{0%{left:60%;opacity:1;}
30%{left:55%;opacity:1;}
100%{left:100%;opacity:0;}
}
/* Slide out to the left*/
.da-slide-toleft h2{-webkit-animation:toLeftAnim1 0.6s ease-in both;-moz-animation:toLeftAnim1 0.6s ease-in both;-o-animation:toLeftAnim1 0.6s ease-in both;-ms-animation:toLeftAnim1 0.6s ease-in both;animation:toLeftAnim1 0.6s ease-in both;}
.da-slide-toleft p{-webkit-animation:toLeftAnim2 0.6s ease-in 0.3s both;-moz-animation:toLeftAnim2 0.6s ease-in 0.3s both;-o-animation:toLeftAnim2 0.6s ease-in 0.3s both;-ms-animation:toLeftAnim2 0.6s ease-in 0.3s both;animation:toLeftAnim2 0.6s ease-in 0.3s both;}
.da-slide-toleft .da-link{-webkit-animation:toLeftAnim3 0.4s ease-in both;-moz-animation:toLeftAnim3 0.4s ease-in both;-o-animation:toLeftAnim3 0.4s ease-in both;-ms-animation:toLeftAnim3 0.4s ease-in both;animation:toLeftAnim3 0.4s ease-in both;}
.da-slide-toleft .da-img{-webkit-animation:toLeftAnim4 0.6s ease-in 0.6s both;-moz-animation:toLeftAnim4 0.6s ease-in 0.6s both;-o-animation:toLeftAnim4 0.6s ease-in 0.6s both;-ms-animation:toLeftAnim4 0.6s ease-in 0.6s both;animation:toLeftAnim4 0.6s ease-in 0.6s both;}
@-webkit-keyframes toLeftAnim1{0%{left:10%;opacity:1;}
30%{left:15%;opacity:1;}
100%{left:-50%;opacity:0;}
}
@-webkit-keyframes toLeftAnim2{0%{left:10%;opacity:1;}
30%{left:15%;opacity:1;}
100%{left:-50%;opacity:0;}
}
@-webkit-keyframes toLeftAnim3{0%{left:10%;opacity:1;}
99%{left:10%;opacity:0;}
100%{left:-50%;opacity:0;}
}
@-webkit-keyframes toLeftAnim4{0%{left:60%;opacity:1;}
40%{left:70%;opacity:1;}
90%{left:0%;opacity:0;}
100%{left:-50%;opacity:0;}
}
@-moz-keyframes toLeftAnim1{0%{left:10%;opacity:1;}
30%{left:15%;opacity:1;}
100%{left:-50%;opacity:0;}
}
@-moz-keyframes toLeftAnim2{0%{left:10%;opacity:1;}
30%{left:15%;opacity:1;}
100%{left:-50%;opacity:0;}
}
@-moz-keyframes toLeftAnim3{0%{left:10%;opacity:1;}
99%{left:10%;opacity:0;}
100%{left:-50%;opacity:0;}
}
@-moz-keyframes toLeftAnim4{0%{left:60%;opacity:1;}
40%{left:70%;opacity:1;}
90%{left:0%;opacity:0;}
100%{left:-50%;opacity:0;}
}
@-o-keyframes toLeftAnim1{0%{left:10%;opacity:1;}
30%{left:15%;opacity:1;}
100%{left:-50%;opacity:0;}
}
@-o-keyframes toLeftAnim2{0%{left:10%;opacity:1;}
30%{left:15%;opacity:1;}
100%{left:-50%;opacity:0;}
}
@-o-keyframes toLeftAnim3{0%{left:10%;opacity:1;}
99%{left:10%;opacity:0;}
100%{left:-50%;opacity:0;}
}
@-o-keyframes toLeftAnim4{0%{left:60%;opacity:1;}
40%{left:70%;opacity:1;}
90%{left:0%;opacity:0;}
100%{left:-50%;opacity:0;}
}
@-ms-keyframes toLeftAnim1{0%{left:10%;opacity:1;}
30%{left:15%;opacity:1;}
100%{left:-50%;opacity:0;}
}
@-ms-keyframes toLeftAnim2{0%{left:10%;opacity:1;}
30%{left:15%;opacity:1;}
100%{left:-50%;opacity:0;}
}
@-ms-keyframes toLeftAnim3{0%{left:10%;opacity:1;}
99%{left:10%;opacity:0;}
100%{left:-50%;opacity:0;}
}
@-ms-keyframes toLeftAnim4{0%{left:60%;opacity:1;}
40%{left:70%;opacity:1;}
90%{left:0%;opacity:0;}
100%{left:-50%;opacity:0;}
}
@keyframes toLeftAnim1{0%{left:10%;opacity:1;}
30%{left:15%;opacity:1;}
100%{left:-50%;opacity:0;}
}
@keyframes toLeftAnim2{0%{left:10%;opacity:1;}
30%{left:15%;opacity:1;}
100%{left:-50%;opacity:0;}
}
@keyframes toLeftAnim3{0%{left:10%;opacity:1;}
99%{left:10%;opacity:0;}
100%{left:-50%;opacity:0;}
}
@keyframes toLeftAnim4{0%{left:60%;opacity:1;}
40%{left:70%;opacity:1;}
90%{left:0%;opacity:0;}
100%{left:-50%;opacity:0;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
710.29 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
710.29 KB
立即下载
朱晓婵
了解
打赏作者 鼓励作者
Html 焦点滚动特效2
最新结算
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
打赏文章