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

Elastislide横向图片浏览代码

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

以下是 Elastislide横向图片浏览代码 的示例演示效果:

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

部分效果截图:

Elastislide横向图片浏览代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为Elastislide横向图片浏览代码，属于站长常用代码" />
<title>Elastislide横向图片浏览代码</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/elastislide.css" />
<noscript>
    <style>
        .es-carousel ul{
            display:block;
        }
    </style>
</noscript>
</head>
<body>
<div class="container">
<h1>Elastislide <span>A Responsive jQuery Carousel Plugin</span></h1>
<div class="content">
    <!-- Elastislide Carousel -->
    <div id="carousel" class="es-carousel-wrapper">
        <div class="es-carousel">
            <ul>
                <li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li>
                <li><a href="#"><img src="images/large/2.jpg" alt="image02" /></a></li>
                <li><a href="#"><img src="images/large/3.jpg" alt="image03" /></a></li>
                <li><a href="#"><img src="images/large/4.jpg" alt="image04" /></a></li>
                <li><a href="#"><img src="images/large/5.jpg" alt="image05" /></a></li>
                <li><a href="#"><img src="images/large/6.jpg" alt="image06" /></a></li>
                <li><a href="#"><img src="images/large/7.jpg" alt="image07" /></a></li>
                <li><a href="#"><img src="images/large/8.jpg" alt="image08" /></a></li>
                <li><a href="#"><img src="images/large/9.jpg" alt="image09" /></a></li>
                <li><a href="#"><img src="images/large/10.jpg" alt="image10" /></a></li>
                <li><a href="#"><img src="images/large/11.jpg" alt="image11" /></a></li>
                <li><a href="#"><img src="images/large/12.jpg" alt="image12" /></a></li>
                <li><a href="#"><img src="images/large/13.jpg" alt="image13" /></a></li>
                <li><a href="#"><img src="images/large/14.jpg" alt="image14" /></a></li>
                <li><a href="#"><img src="images/large/15.jpg" alt="image15" /></a></li>
                <li><a href="#"><img src="images/large/16.jpg" alt="image16" /></a></li>
                <li><a href="#"><img src="images/large/17.jpg" alt="image17" /></a></li>
                <li><a href="#"><img src="images/large/18.jpg" alt="image18" /></a></li>
                <li><a href="#"><img src="images/large/19.jpg" alt="image19" /></a></li>
                <li><a href="#"><img src="images/large/20.jpg" alt="image20" /></a></li>
                <li><a href="#"><img src="images/large/21.jpg" alt="image21" /></a></li>
                <li><a href="#"><img src="images/large/22.jpg" alt="image22" /></a></li>
                <li><a href="#"><img src="images/large/23.jpg" alt="image23" /></a></li>
                <li><a href="#"><img src="images/large/24.jpg" alt="image24" /></a></li>
                <li><a href="#"><img src="images/large/25.jpg" alt="image25" /></a></li>
            </ul>
        </div>
    </div>
    <!-- End Elastislide Carousel -->
    <p>Resize the browser to see how the carousel adapts</p>
    <div class="more">
        <ul>
            <li class="selected"><a href="index.html">Example 1</a></li>
            <li><a href="index2.html">Example 2</a></li>
            <li><a href="index3.html">Example 3</a></li>
            <li><a href="index4.html">Example 4</a></li>
            <li><a href="index5.html">Example 4</a></li>
        </ul>
        <p><strong>In this example:</strong> Resize of images so that 5 items are always visible</p>
    </div>
    <div style="text-align:center">
  <p>Elastislide横向图片浏览代码，100%自适应宽度，jquery代码，兼容主流浏览器，程序员设计师联盟淘宝店推荐下载！</p><br />
  <br />
</div>
</div>

</div>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript">
$('#carousel').elastislide({
    imageW 	: 180,
    minItems	: 5
});
</script>
</body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Elastislide - A Responsive jQuery Carousel Plugin</title>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
        <meta name="description" content="Elastislide - A Responsive jQuery Carousel Plugin" />
        <meta name="keywords" content="carousel, jquery, responsive, fluid, elastic, resize, thumbnail, slider" />
		<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/elastislide.css" />
		<noscript>
			<style>
				.es-carousel ul{
					display:block;
				}
			</style>
		</noscript>
    </head>
    <body>
		<div class="container">
			<h1>Elastislide <span>A Responsive jQuery Carousel Plugin</span></h1>
			<div class="content">
				<!-- Elastislide Carousel -->
				<div id="carousel" class="es-carousel-wrapper">
					<div class="es-carousel">
						<ul>
							<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
							<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
							<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
							<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
							<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
							<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
							<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
							<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
							<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
							<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
							<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
							<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
							<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
							<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
							<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
							<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
							<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
							<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
							<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
							<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
							<li><a href="#"><img src="images/small/21.jpg" alt="image21" /></a></li>
							<li><a href="#"><img src="images/small/22.jpg" alt="image22" /></a></li>
							<li><a href="#"><img src="images/small/23.jpg" alt="image23" /></a></li>
							<li><a href="#"><img src="images/small/24.jpg" alt="image24" /></a></li>
							<li><a href="#"><img src="images/small/25.jpg" alt="image25" /></a></li>
						</ul>
					</div>
				</div>
				<!-- End Elastislide Carousel -->
				<p>Resize the browser to see how the carousel adapts</p>
				<div class="more">
					<ul>
						<li><a href="index.html">Example 1</a></li>
						<li class="selected"><a href="index2.html">Example 2</a></li>
						<li><a href="index3.html">Example 3</a></li>
						<li><a href="index4.html">Example 4</a></li>
						<li><a href="index5.html">Example 5</a></li>
					</ul>
					<p><strong>In this example:</strong> No borders, smaller images and resize of images so that 3 items are always visible</p>
				</div>
			</div>
		</div>
        <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.elastislide.js"></script>
		<script type="text/javascript">
			
			$('#carousel').elastislide({
				imageW 		: 80,
				minItems	: 3,
				border		: 0
			});
			
		</script>
    </body>
</html>

JS代码(jquery.elastislide.js):

(function( window,$,undefined ){
	// http://www.netcu.de/jquery-touchwipe-iphone-ipad-library$.fn.touchwipe= function(settings){
	var config ={
	min_move_x:20,min_move_y:20,wipeLeft:function(){
}
,wipeRight:function(){
}
,wipeUp:function(){
}
,wipeDown:function(){
}
,preventDefaultEvents:true}
;
	if (settings) $.extend(config,settings);
	this.each(function(){
	var startX;
	var startY;
	var isMoving = false;
	function cancelTouch(){
	this.removeEventListener('touchmove',onTouchMove);
	startX = null;
	isMoving = false;
}
function onTouchMove(e){
	if(config.preventDefaultEvents){
	e.preventDefault();
}
if(isMoving){
	var x = e.touches[0].pageX;
	var y = e.touches[0].pageY;
	var dx = startX - x;
	var dy = startY - y;
	if(Math.abs(dx) >= config.min_move_x){
	cancelTouch();
	if(dx > 0){
	config.wipeLeft();
}
else{
	config.wipeRight();
}
}
else if(Math.abs(dy) >= config.min_move_y){
	cancelTouch();
	if(dy > 0){
	config.wipeDown();
}
else{
	config.wipeUp();
}
}
}
}
function onTouchStart(e){
	if (e.touches.length == 1){
	startX = e.touches[0].pageX;
	startY = e.touches[0].pageY;
	isMoving = true;
	this.addEventListener('touchmove',onTouchMove,false);
}
}
if ('ontouchstart' in document.documentElement){
	this.addEventListener('touchstart',onTouchStart,false);
}
}
);
	return this;
}
;
	$.elastislide= function( options,element ){
	this.$el= $( element );
	this._init( options );
}
;
	$.elastislide.defaults={
	speed:450,// animation speedeasing:'',// animation easing effectimageW:190,// the images widthmargin:3,// image margin rightborder:2,// image borderminItems:1,// the minimum number of items to show.// when we resize the window,this will make sure minItems are always shown// (unless of course minItems is higher than the total number of elements)current:0,// index of the current item// when we resize the window,the carousel will make sure this item is visibleonClick:function(){
	return false;
}
// click item callback}
;
	$.elastislide.prototype={
	_init:function( options ){
	this.options= $.extend( true,{
}
,$.elastislide.defaults,options );
	// <ul>this.$slider= this.$el.find('ul');
	// <li>this.$items= this.$slider.children('li');
	// total number of elements / imagesthis.itemsCount= this.$items.length;
	// cache the <ul>'s parent,since we will eventually need to recalculate its width on window resizethis.$esCarousel= this.$slider.parent();
	// validate optionsthis._validateOptions();
	// set sizes and initialize some vars...this._configure();
	// add navigation buttonsthis._addControls();
	// initialize the eventsthis._initEvents();
	// show the <ul>this.$slider.show();
	// slide to current's positionthis._slideToCurrent( false );
}
,_validateOptions:function(){
	if( this.options.speed < 0 )this.options.speed = 450;
	if( this.options.margin < 0 )this.options.margin = 4;
	if( this.options.border < 0 )this.options.border = 1;
	if( this.options.minItems < 1 || this.options.minItems > this.itemsCount )this.options.minItems = 1;
	if( this.options.current > this.itemsCount - 1 )this.options.current = 0;
}
,_configure:function(){
	// current item's indexthis.current= this.options.current;
	// the ul's parent's (div.es-carousel) width is the "visible" widththis.visibleWidth= this.$esCarousel.width();
	// test to see if we need to initially resize the itemsif( this.visibleWidth < this.options.minItems * ( this.options.imageW + 2 * this.options.border ) + ( this.options.minItems - 1 ) * this.options.margin ){
	this._setDim( ( this.visibleWidth - ( this.options.minItems - 1 ) * this.options.margin ) / this.options.minItems );
	this._setCurrentValues();
	// how many items fit with the current widththis.fitCount= this.options.minItems;
}
else{
	this._setDim();
	this._setCurrentValues();
}
// set the <ul> widththis.$slider.css({
	width:this.sliderW}
);
}
,_setDim:function( elW ){
	// <li> stylethis.$items.css({
	marginRight:this.options.margin,width:( elW ) ? elW:this.options.imageW + 2 * this.options.border}
).children('a').css({
	// <a> styleborderWidth:this.options.border}
);
}
,_setCurrentValues:function(){
	// the total space occupied by one itemthis.itemW= this.$items.outerWidth(true);
	// total width of the slider / <ul>// this will eventually change on window resizethis.sliderW= this.itemW * this.itemsCount;
	// the ul parent's (div.es-carousel) width is the "visible" widththis.visibleWidth= this.$esCarousel.width();
	// how many items fit with the current widththis.fitCount= Math.floor( this.visibleWidth / this.itemW );
}
,_addControls:function(){
	this.$navNext= $('<span class="es-nav-next">Next</span>');
	this.$navPrev= $('<span class="es-nav-prev">Previous</span>');
	$('<div class="es-nav"/>').append( this.$navPrev ).append( this.$navNext ).appendTo( this.$el );
	//this._toggleControls();
}
,_toggleControls:function( dir,status ){
	// show / hide navigation buttonsif( dir && status ){
	if( status === 1 )( dir === 'right' ) ? this.$navNext.show():this.$navPrev.show();
	else( dir === 'right' ) ? this.$navNext.hide():this.$navPrev.hide();
}
else if( this.current === this.itemsCount - 1 || this.fitCount >= this.itemsCount )this.$navNext.hide();
}
,_initEvents:function(){
	var instance= this;
	// window resize$(window).bind('resize.elastislide',function( event ){
	// set values againinstance._setCurrentValues();
	// need to resize itemsif( instance.visibleWidth < instance.options.minItems * ( instance.options.imageW + 2 * instance.options.border ) + ( instance.options.minItems - 1 ) * instance.options.margin ){
	instance._setDim( ( instance.visibleWidth - ( instance.options.minItems - 1 ) * instance.options.margin ) / instance.options.minItems );
	instance._setCurrentValues();
	instance.fitCount= instance.options.minItems;
}
else{
	instance._setDim();
	instance._setCurrentValues();
}
instance.$slider.css({
	width:instance.sliderW + 10 // TODO:+10px seems to solve a firefox "bug":S}
);
	// slide to the current elementclearTimeout( instance.resetTimeout );
	instance.resetTimeout= setTimeout(function(){
	instance._slideToCurrent();
}
,200);
}
);
	// navigation buttons eventsthis.$navNext.bind('click.elastislide',function( event ){
	instance._slide('right');
}
);
	this.$navPrev.bind('click.elastislide',function( event ){
	instance._slide('left');
}
);
	// item click eventthis.$items.bind('click.elastislide',function( event ){
	instance.options.onClick( $(this) );
	return false;
}
);
	// touch eventsinstance.$slider.touchwipe({
	wipeLeft:function(){
	instance._slide('right');
}
,wipeRight:function(){
	instance._slide('left');
}
}
);
}
,_slide:function( dir,val,anim,callback ){
	// if animating returnif( this.$slider.is(':animated') )return false;
	// current margin leftvar ml= parseFloat( this.$slider.css('margin-left') );
	// val is just passed when we want an exact value for the margin left (used in the _slideToCurrent function)if( val === undefined ){
	// how much to slide?var amount= this.fitCount * this.itemW,val;
	if( amount < 0 ) return false;
	// make sure not to leave a space between the last item / first item and the end / beggining of the slider available widthif( dir === 'right' && this.sliderW - ( Math.abs( ml ) + amount ) < this.visibleWidth ){
	amount= this.sliderW - ( Math.abs( ml ) + this.visibleWidth ) - this.options.margin;
	// decrease the margin left// show / hide navigation buttonsthis._toggleControls( 'right',-1 );
	this._toggleControls( 'left',1 );
}
else if( dir === 'left' && Math.abs( ml ) - amount < 0 ){
	amount= Math.abs( ml );
	// show / hide navigation buttonsthis._toggleControls( 'left',-1 );
	this._toggleControls( 'right',1 );
}
else{
	var fml;
	// future margin left( dir === 'right' )? fml = Math.abs( ml ) + this.options.margin + Math.abs( amount ):fml = Math.abs( ml ) - this.options.margin - Math.abs( amount );
	// show / hide navigation buttonsif( fml > 0 )this._toggleControls( 'left',1 );
	elsethis._toggleControls( 'left',-1 );
	if( fml < this.sliderW - this.visibleWidth )this._toggleControls( 'right',1 );
	elsethis._toggleControls( 'right',-1 );
}
( dir === 'right' ) ? val = '-=' + amount:val = '+=' + amount}
else{
	var fml= Math.abs( val );
	// future margin leftif( Math.max( this.sliderW,this.visibleWidth ) - fml < this.visibleWidth ){
	val= - ( Math.max( this.sliderW,this.visibleWidth ) - this.visibleWidth );
	if( val !== 0 )val += this.options.margin;
	// decrease the margin left if not on the first position// show / hide navigation buttonsthis._toggleControls( 'right',-1 );
	fml= Math.abs( val );
}
// show / hide navigation buttonsif( fml > 0 )this._toggleControls( 'left',1 );
	elsethis._toggleControls( 'left',-1 );
	if( Math.max( this.sliderW,this.visibleWidth ) - this.visibleWidth > fml + this.options.margin )this._toggleControls( 'right',1 );
	elsethis._toggleControls( 'right',-1 );
}
$.fn.applyStyle = ( anim === undefined ) ? $.fn.animate:$.fn.css;
	var sliderCSS={
	marginLeft:val}
;
	var instance= this;
	this.$slider.applyStyle( sliderCSS,$.extend( true,[],{
	duration:this.options.speed,easing:this.options.easing,complete:function(){
	if( callback ) callback.call();
}
}
) );
}
,_slideToCurrent:function( anim ){
	// how much to slide?var amount= this.current * this.itemW;
	this._slide('',-amount,anim );
}
,add:function( $newelems,callback ){
	// adds new items to the carouselthis.$items= this.$items.add( $newelems );
	this.itemsCount= this.$items.length;
	this._setDim();
	this._setCurrentValues();
	this.$slider.css({
	width:this.sliderW}
);
	this._slideToCurrent();
	if ( callback ) callback.call( $newelems );
}
,destroy:function( callback ){
	this._destroy( callback );
}
,_destroy:function( callback ){
	this.$el.unbind('.elastislide').removeData('elastislide');
	$(window).unbind('.elastislide');
	if ( callback ) callback.call();
}
}
;
	var logError= function( message ){
	if ( this.console ){
	console.error( message );
}
}
;
	$.fn.elastislide= function( options ){
	if ( typeof options === 'string' ){
	var args = Array.prototype.slice.call( arguments,1 );
	this.each(function(){
	var instance = $.data( this,'elastislide' );
	if ( !instance ){
	logError( "cannot call methods on elastislide prior to initialization;
	" +"attempted to call method '" + options + "'" );
	return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ){
	logError( "no such method '" + options + "' for elastislide instance" );
	return;
}
instance[ options ].apply( instance,args );
}
);
}
else{
	this.each(function(){
	var instance = $.data( this,'elastislide' );
	if ( !instance ){
	$.data( this,'elastislide',new $.elastislide( options,this ) );
}
}
);
}
return this;
}
;
}
)( window,jQuery );

CSS代码(demo.css):

@import url('reset.css');/* General Codrops Demo Style */
body{background:#e1c9c7 url(../images/pattern.png) repeat top left;color:#222;font-family:"Merienda One",Georgia,"Times New Roman",serif;font-size:12px;}
a{color:#000;text-decoration:none;}
.clr{clear:both;}
h1{text-align:center;margin:15px;font-size:62px;color:#8f0630;text-shadow:1px 1px 1px #f7edeb;padding-bottom:30px;}
h1 span{font-size:18px;display:block;color:#212121;}
p{text-align:center;padding:20px;text-shadow:1px 1px 1px #f7edeb;}
/* Header Style */
.header{line-height:24px;font-family:Arial,sans-serif;font-size:11px;background:#000;opacity:0.9;text-transform:uppercase;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.header a{line-height:18px;padding:0 4px;letter-spacing:1px;text-shadow:1px 1px 1px #000;color:#ddd;}
.header a:hover{color:#fff;}
.header a span{font-weight:bold;}
.header span.right_ab{float:right;}
.content{margin:0px 25px;}
/* Examples list */
.more{position:relative;clear:both;}
.more p{color:#8f0630;font-size:16px;}
.more ul{display:block;text-align:center;}
.more ul li{display:inline;padding:2px;line-height:30px;}
.more ul li.selected a,.more ul li.selected a:hover{background:#690322;color:#fff;text-shadow:none;}
.more ul li a{text-shadow:1px 1px 1px #fff;color:#333;background:#fff;padding:3px 6px;white-space:nowrap;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.more ul li a:hover{background:#8f0630;color:#fff;text-shadow:none;}
.column{width:48%;float:left;padding:1%;}
@media screen and (max-width:640px){.header{text-align:center;}
.header a{font-size:10px;text-shadow:none;white-space:nowrap;}
.header span.right_ab{float:none;}
h1{font-size:40px;}
h1 span{font-size:16px;}
}

CSS代码(elastislide.css):

/* Elastislide Style */
.es-carousel-wrapper{background:#101010;padding:10px 37px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;position:relative;}
.es-carousel{overflow:hidden;background:#000;}
.es-carousel ul{display:none;}
.es-carousel ul li{height:100%;float:left;display:block;}
.es-carousel ul li a{display:block;border-style:solid;border-color:#222;}
.es-carousel ul li a img{display:block;border:none;max-height:100%;max-width:100%;}
.es-nav span{position:absolute;top:50%;left:12px;background:transparent url(../images/nav.png) no-repeat top left;width:14px;height:26px;margin-top:-13px;text-indent:-9000px;cursor:pointer;opacity:0.8;}
.es-nav span.es-nav-next{right:12px;left:auto;background-position:top right;}
.es-nav span:hover{opacity:1.0;}

CSS代码(reset.css):

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
622.04 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
622.04 KB
立即下载
任淑姬宁
了解
打赏作者 鼓励作者
Html JS 图片特效5
最新结算
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
打赏文章