简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

HTML5로 구현된 충격적인 3D 포커스 맵 애니메이션 상세 소개

黄舟
풀어 주다： 2017-03-04 16:51:16
원래의
1869명이 탐색했습니다.

这是一款基于HTML5和jQuery的3D焦点图动画，焦点图中的图片利用了CSS3的相关特性实现图片倾斜效果，从而让图片出现3D的视觉效果。这款HTML5焦点图不仅可以手动点击按钮切换图片，而且还支持自动切换图片，使用起来也相当方便。如果你需要在网站中展示产品图片，那么这款焦点图插件非常适合你。

在线演示源码下载

HTML代码

<section id="dg-container" class="dg-container">
	<p class="dg-wrapper">
		<a href="#"><img src="images/1.jpg" alt="image01"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/2.jpg" alt="image02"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/3.jpg" alt="image03"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/4.jpg" alt="image04"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/5.jpg" alt="image05"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/6.jpg" alt="image06"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/7.jpg" alt="image07"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/8.jpg" alt="image08"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/9.jpg" alt="image09"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/10.jpg" alt="image10"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/11.jpg" alt="image11"><p>http://www.php.cn/;/p></a>
		<a href="#"><img src="images/12.jpg" alt="image12"><p>http://www.php.cn/;/p></a>
	</p>
	<nav>	
		<span class="dg-prev">&lt;</span>
		<span class="dg-next">&gt;</span>
	</nav>
</section>
로그인 후 복사

CSS代码

.dg-container{
	width: 100%;
	height: 450px;
	position: relative;
}
.dg-wrapper{
	width: 481px;
	height: 316px;
	margin: 0 auto;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
}
.dg-wrapper a{
	width: 482px;
	height: 316px;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: transparent url(../images/browser.png) no-repeat top left;
	box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
}
.dg-wrapper a.dg-transition{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.dg-wrapper a img{
	display: block;
	padding: 41px 0px 0px 1px;
}
.dg-wrapper a p{
	font-style: italic;
	text-align: center;
	line-height: 50px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	color: #333;
	font-size: 16px;
	width: 100%;
	bottom: -55px;
	display: none;
	position: absolute;
}
.dg-wrapper a.dg-center p{
	display: block;
}
.dg-container nav{
	width: 58px;
	position: absolute;
	z-index: 1000;
	bottom: 40px;
	left: 50%;
	margin-left: -29px;
}
.dg-container nav span{
	text-indent: -9000px;
	float: left;
	cursor:pointer;
	width: 24px;
	height: 25px;
	opacity: 0.8;
	background: transparent url(../images/arrows.png) no-repeat top left;
}
.dg-container nav span:hover{
	opacity: 1;
}
.dg-container nav span.dg-next{
	background-position: top right;
	margin-left: 10px;
}
로그인 후 복사

JavaScript代码

/**
 * jquery.gallery.js
 * http://www.php.cn/
 *
 * Copyright 2011, Pedro Botelho / Codrops
 * Free to use under the MIT license.
 *
 * Date: Mon Jan 30 2012
 */

(function( $, undefined ) {

	/*
	 * Gallery object.
	 */
	$.Gallery 				= function( options, element ) {

		this.$el	= $( element );
		this._init( options );

	};

	$.Gallery.defaults 		= {
		current		: 0,	// index of current item
		autoplay	: false,// slideshow on / off
		interval	: 2000  // time between transitions
    };

	$.Gallery.prototype 	= {
		_init 				: function( options ) {

			this.options 		= $.extend( true, {}, $.Gallery.defaults, options );

			// support for 3d / 2d transforms and transitions
			this.support3d		= Modernizr.csstransforms3d;
			this.support2d		= Modernizr.csstransforms;
			this.supportTrans	= Modernizr.csstransitions;

			this.$wrapper		= this.$el.find(&#39;.dg-wrapper&#39;);

			this.$items			= this.$wrapper.children();
			this.itemsCount		= this.$items.length;

			this.$nav			= this.$el.find(&#39;nav&#39;);
			this.$navPrev		= this.$nav.find(&#39;.dg-prev&#39;);
			this.$navNext		= this.$nav.find(&#39;.dg-next&#39;);

			// minimum of 3 items
			if( this.itemsCount < 3 ) {

				this.$nav.remove();
				return false;

			}	

			this.current		= this.options.current;

			this.isAnim			= false;

			this.$items.css({
				&#39;opacity&#39;	: 0,
				&#39;visibility&#39;: &#39;hidden&#39;
			});

			this._validate();

			this._layout();

			// load the events
			this._loadEvents();

			// slideshow
			if( this.options.autoplay ) {

				this._startSlideshow();

			}

		},
		_validate			: function() {

			if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) {

				this.current = 0;

			}	

		},
		_layout				: function() {

			// current, left and right items
			this._setItems();

			// current item is not changed
			// left and right one are rotated and translated
			var leftCSS, rightCSS, currentCSS;

			if( this.support3d && this.supportTrans ) {

				leftCSS 	= {
					&#39;-webkit-transform&#39;	: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
					&#39;-moz-transform&#39;	: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
					&#39;-o-transform&#39;		: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
					&#39;-ms-transform&#39;		: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
					&#39;transform&#39;			: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;
				};

				rightCSS	= {
					&#39;-webkit-transform&#39;	: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
					&#39;-moz-transform&#39;	: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
					&#39;-o-transform&#39;		: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
					&#39;-ms-transform&#39;		: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
					&#39;transform&#39;			: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;
				};

				leftCSS.opacity		= 1;
				leftCSS.visibility	= &#39;visible&#39;;
				rightCSS.opacity	= 1;
				rightCSS.visibility	= &#39;visible&#39;;

			}
			else if( this.support2d && this.supportTrans ) {

				leftCSS 	= {
					&#39;-webkit-transform&#39;	: &#39;translate(-350px) scale(0.8)&#39;,
					&#39;-moz-transform&#39;	: &#39;translate(-350px) scale(0.8)&#39;,
					&#39;-o-transform&#39;		: &#39;translate(-350px) scale(0.8)&#39;,
					&#39;-ms-transform&#39;		: &#39;translate(-350px) scale(0.8)&#39;,
					&#39;transform&#39;			: &#39;translate(-350px) scale(0.8)&#39;
				};

				rightCSS	= {
					&#39;-webkit-transform&#39;	: &#39;translate(350px) scale(0.8)&#39;,
					&#39;-moz-transform&#39;	: &#39;translate(350px) scale(0.8)&#39;,
					&#39;-o-transform&#39;		: &#39;translate(350px) scale(0.8)&#39;,
					&#39;-ms-transform&#39;		: &#39;translate(350px) scale(0.8)&#39;,
					&#39;transform&#39;			: &#39;translate(350px) scale(0.8)&#39;
				};

				currentCSS	= {
					&#39;z-index&#39;			: 999
				};

				leftCSS.opacity		= 1;
				leftCSS.visibility	= &#39;visible&#39;;
				rightCSS.opacity	= 1;
				rightCSS.visibility	= &#39;visible&#39;;

			}

			this.$leftItm.css( leftCSS || {} );
			this.$rightItm.css( rightCSS || {} );

			this.$currentItm.css( currentCSS || {} ).css({
				&#39;opacity&#39;	: 1,
				&#39;visibility&#39;: &#39;visible&#39;
			}).addClass(&#39;dg-center&#39;);

		},
		_setItems			: function() {

			this.$items.removeClass(&#39;dg-center&#39;);

			this.$currentItm	= this.$items.eq( this.current );
			this.$leftItm		= ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 );
			this.$rightItm		= ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 );

			if( !this.support3d && this.support2d && this.supportTrans ) {

				this.$items.css( &#39;z-index&#39;, 1 );
				this.$currentItm.css( &#39;z-index&#39;, 999 );

			}

			// next & previous items
			if( this.itemsCount > 3 ) {

				// next item
				this.$nextItm		= ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next();
				this.$nextItm.css( this._getCoordinates(&#39;outright&#39;) );

				// previous item
				this.$prevItm		= ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev();
				this.$prevItm.css( this._getCoordinates(&#39;outleft&#39;) );

			}

		},
		_loadEvents			: function() {

			var _self	= this;

			this.$navPrev.on( &#39;click.gallery&#39;, function( event ) {

				if( _self.options.autoplay ) {

					clearTimeout( _self.slideshow );
					_self.options.autoplay	= false;

				}

				_self._navigate(&#39;prev&#39;);
				return false;

			});

			this.$navNext.on( &#39;click.gallery&#39;, function( event ) {

				if( _self.options.autoplay ) {

					clearTimeout( _self.slideshow );
					_self.options.autoplay	= false;

				}

				_self._navigate(&#39;next&#39;);
				return false;

			});

			this.$wrapper.on( &#39;webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery&#39;, function( event ) {

				_self.$currentItm.addClass(&#39;dg-center&#39;);
				_self.$items.removeClass(&#39;dg-transition&#39;);
				_self.isAnim	= false;

			});

		},
		_getCoordinates		: function( position ) {

			if( this.support3d && this.supportTrans ) {

				switch( position ) {
					case &#39;outleft&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translateX(-450px) translateZ(-300px) rotateY(45deg)&#39;,
							&#39;-moz-transform&#39;	: &#39;translateX(-450px) translateZ(-300px) rotateY(45deg)&#39;,
							&#39;-o-transform&#39;		: &#39;translateX(-450px) translateZ(-300px) rotateY(45deg)&#39;,
							&#39;-ms-transform&#39;		: &#39;translateX(-450px) translateZ(-300px) rotateY(45deg)&#39;,
							&#39;transform&#39;			: &#39;translateX(-450px) translateZ(-300px) rotateY(45deg)&#39;,
							&#39;opacity&#39;			: 0,
							&#39;visibility&#39;		: &#39;hidden&#39;
						};
						break;
					case &#39;outright&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translateX(450px) translateZ(-300px) rotateY(-45deg)&#39;,
							&#39;-moz-transform&#39;	: &#39;translateX(450px) translateZ(-300px) rotateY(-45deg)&#39;,
							&#39;-o-transform&#39;		: &#39;translateX(450px) translateZ(-300px) rotateY(-45deg)&#39;,
							&#39;-ms-transform&#39;		: &#39;translateX(450px) translateZ(-300px) rotateY(-45deg)&#39;,
							&#39;transform&#39;			: &#39;translateX(450px) translateZ(-300px) rotateY(-45deg)&#39;,
							&#39;opacity&#39;			: 0,
							&#39;visibility&#39;		: &#39;hidden&#39;
						};
						break;
					case &#39;left&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
							&#39;-moz-transform&#39;	: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
							&#39;-o-transform&#39;		: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
							&#39;-ms-transform&#39;		: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
							&#39;transform&#39;			: &#39;translateX(-350px) translateZ(-200px) rotateY(45deg)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
					case &#39;right&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
							&#39;-moz-transform&#39;	: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
							&#39;-o-transform&#39;		: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
							&#39;-ms-transform&#39;		: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
							&#39;transform&#39;			: &#39;translateX(350px) translateZ(-200px) rotateY(-45deg)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
					case &#39;center&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translateX(0px) translateZ(0px) rotateY(0deg)&#39;,
							&#39;-moz-transform&#39;	: &#39;translateX(0px) translateZ(0px) rotateY(0deg)&#39;,
							&#39;-o-transform&#39;		: &#39;translateX(0px) translateZ(0px) rotateY(0deg)&#39;,
							&#39;-ms-transform&#39;		: &#39;translateX(0px) translateZ(0px) rotateY(0deg)&#39;,
							&#39;transform&#39;			: &#39;translateX(0px) translateZ(0px) rotateY(0deg)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
				};

			}
			else if( this.support2d && this.supportTrans ) {

				switch( position ) {
					case &#39;outleft&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translate(-450px) scale(0.7)&#39;,
							&#39;-moz-transform&#39;	: &#39;translate(-450px) scale(0.7)&#39;,
							&#39;-o-transform&#39;		: &#39;translate(-450px) scale(0.7)&#39;,
							&#39;-ms-transform&#39;		: &#39;translate(-450px) scale(0.7)&#39;,
							&#39;transform&#39;			: &#39;translate(-450px) scale(0.7)&#39;,
							&#39;opacity&#39;			: 0,
							&#39;visibility&#39;		: &#39;hidden&#39;
						};
						break;
					case &#39;outright&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translate(450px) scale(0.7)&#39;,
							&#39;-moz-transform&#39;	: &#39;translate(450px) scale(0.7)&#39;,
							&#39;-o-transform&#39;		: &#39;translate(450px) scale(0.7)&#39;,
							&#39;-ms-transform&#39;		: &#39;translate(450px) scale(0.7)&#39;,
							&#39;transform&#39;			: &#39;translate(450px) scale(0.7)&#39;,
							&#39;opacity&#39;			: 0,
							&#39;visibility&#39;		: &#39;hidden&#39;
						};
						break;
					case &#39;left&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translate(-350px) scale(0.8)&#39;,
							&#39;-moz-transform&#39;	: &#39;translate(-350px) scale(0.8)&#39;,
							&#39;-o-transform&#39;		: &#39;translate(-350px) scale(0.8)&#39;,
							&#39;-ms-transform&#39;		: &#39;translate(-350px) scale(0.8)&#39;,
							&#39;transform&#39;			: &#39;translate(-350px) scale(0.8)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
					case &#39;right&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translate(350px) scale(0.8)&#39;,
							&#39;-moz-transform&#39;	: &#39;translate(350px) scale(0.8)&#39;,
							&#39;-o-transform&#39;		: &#39;translate(350px) scale(0.8)&#39;,
							&#39;-ms-transform&#39;		: &#39;translate(350px) scale(0.8)&#39;,
							&#39;transform&#39;			: &#39;translate(350px) scale(0.8)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
					case &#39;center&#39;:
						return {
							&#39;-webkit-transform&#39;	: &#39;translate(0px) scale(1)&#39;,
							&#39;-moz-transform&#39;	: &#39;translate(0px) scale(1)&#39;,
							&#39;-o-transform&#39;		: &#39;translate(0px) scale(1)&#39;,
							&#39;-ms-transform&#39;		: &#39;translate(0px) scale(1)&#39;,
							&#39;transform&#39;			: &#39;translate(0px) scale(1)&#39;,
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
				};

			}
			else {

				switch( position ) {
					case &#39;outleft&#39;	: 
					case &#39;outright&#39;	: 
					case &#39;left&#39;		: 
					case &#39;right&#39;	:
						return {
							&#39;opacity&#39;			: 0,
							&#39;visibility&#39;		: &#39;hidden&#39;
						};
						break;
					case &#39;center&#39;	:
						return {
							&#39;opacity&#39;			: 1,
							&#39;visibility&#39;		: &#39;visible&#39;
						};
						break;
				};

			}

		},
		_navigate			: function( dir ) {

			if( this.supportTrans && this.isAnim )
				return false;

			this.isAnim	= true;

			switch( dir ) {

				case &#39;next&#39; :

					this.current	= this.$rightItm.index();

					// current item moves left
					this.$currentItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;left&#39;) );

					// right item moves to the center
					this.$rightItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;center&#39;) );	

					// next item moves to the right
					if( this.$nextItm ) {

						// left item moves out
						this.$leftItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;outleft&#39;) );

						this.$nextItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;right&#39;) );

					}
					else {

						// left item moves right
						this.$leftItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;right&#39;) );

					}
					break;

				case &#39;prev&#39; :

					this.current	= this.$leftItm.index();

					// current item moves right
					this.$currentItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;right&#39;) );

					// left item moves to the center
					this.$leftItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;center&#39;) );

					// prev item moves to the left
					if( this.$prevItm ) {

						// right item moves out
						this.$rightItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;outright&#39;) );

						this.$prevItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;left&#39;) );

					}
					else {

						// right item moves left
						this.$rightItm.addClass(&#39;dg-transition&#39;).css( this._getCoordinates(&#39;left&#39;) );

					}
					break;	

			};

			this._setItems();

			if( !this.supportTrans )
				this.$currentItm.addClass(&#39;dg-center&#39;);

		},
		_startSlideshow		: function() {

			var _self	= this;

			this.slideshow	= setTimeout( function() {

				_self._navigate( &#39;next&#39; );

				if( _self.options.autoplay ) {

					_self._startSlideshow();

				}

			}, this.options.interval );

		},
		destroy				: function() {

			this.$navPrev.off(&#39;.gallery&#39;);
			this.$navNext.off(&#39;.gallery&#39;);
			this.$wrapper.off(&#39;.gallery&#39;);

		}
	};

	var logError 			= function( message ) {
		if ( this.console ) {
			console.error( message );
		}
	};

	$.fn.gallery			= function( options ) {

		if ( typeof options === &#39;string&#39; ) {

			var args = Array.prototype.slice.call( arguments, 1 );

			this.each(function() {

				var instance = $.data( this, &#39;gallery&#39; );

				if ( !instance ) {
					logError( "cannot call methods on gallery prior to initialization; " +
					"attempted to call method &#39;" + options + "&#39;" );
					return;
				}

				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
					logError( "no such method &#39;" + options + "&#39; for gallery instance" );
					return;
				}

				instance[ options ].apply( instance, args );

			});

		} 
		else {

			this.each(function() {

				var instance = $.data( this, &#39;gallery&#39; );
				if ( !instance ) {
					$.data( this, &#39;gallery&#39;, new $.Gallery( options, this ) );
				}
			});

		}

		return this;

	};

})( jQuery );
로그인 후 복사

 以上就是HTML5实现的震撼3D焦点图动画详解介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！


관련 라벨：
html5
원천：php.cn
이전 기사：사실적인 HTML5 나뭇잎 떨어지는 애니메이션 그래픽 코드에 대한 자세한 설명 다음 기사：Html5를 사용하여 코드가 첨부된 간단한 선택 정렬 알고리즘 및 데모 구현
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
에서 2024-04-06 15:33:12
0
1
433
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
HTML5에서 enctype과 formenctype의 차이점은 무엇입니까? HTMLLivingStandard(새 HTML5 사양이라고도 함)의 enctype 속성과 formenctype 속성의 차이점이 무엇인지 궁금합니다. 나는 개발자를...
에서 2024-04-02 11:47:56
0
1
275
페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
에서 2024-04-01 20:42:38
0
1
259
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！