jQuery는 이미지 회전 효과를 생성합니다.-JS 튜토리얼-php.cn

jQuery는 이미지 회전 효과를 생성합니다.

高洛峰

풀어 주다： 2017-02-04 09:07:34

원래의

1125명이 탐색했습니다.

이전에 JQuery를 사용하여 깊이 방향의 이미지 회전 효과를 작성했습니다. 여기에 공유하고 그림을 붙여서 효과가 어떤지 확인하겠습니다.

jQuery는 이미지 회전 효과를 생성합니다.

구현 원리는 복잡하지 않습니다. 수학에서는 사인 함수만 사용합니다. 제작 과정은 대략 다음과 같습니다.

(1) 먼저 이미지 회전 반경을 정의합니다

2 ) 이미지 회전 프로세스에서는 각 이미지의 위치 각도를 얻기 위해 setInterval() 메서드를 사용해야 합니다. 각도는 시간에 따라 점차적으로 변경됩니다.

(3) 수학 공식에 따르면: x=R* SIN(deg)은 X 방향으로 사진의 위치를 얻을 수 있습니다

(4) 투명도 설정은 실제로 사진이 회전할 때의 각도를 기반으로 합니다. 사진이 바로 앞에 있을 때 초기 설정은 0도입니다. 시계 방향이든 시계 반대 방향이든 사진 회전 각도가 0도보다 크고

180도 미만이면 그림의 투명도가 높아집니다. 여기서는 그림이 180도에서 완전히 투명해지는 것을 방지하기 위해 작은 계산 공식을 추가합니다.

(5) 사진의 크기 조정도 사진의 회전 각도에 따라 결정되므로 이해하기 쉽습니다.

(6) 이미지의 X축 위치 정보, 확대/축소 정보, 투명도 정보를 얻은 후 다음 단계는 매우 간단합니다. CSS 스타일을 통해 모든 정보를 표시하기만 하면 됩니다.

CSS의 스타일은 setInterval() 메소드를 통해 점차적으로 변경될 예정입니다.

주요 코드를 살펴보겠습니다:

var thisleft=-(o.radius)*Math.sin((360/imgnum)*$(this).data("index")*(Math.PI*2/360))+(holderwidth/2);
 var thiszindex=360/imgnum*$(this).data("index")>180?360/imgnum*$(this).data("index")-360:-360/imgnum*$(this).data("index");
 var thisopacity=360/imgnum*$(this).data("index")<=180?(180-360/imgnum*$(this).data("index"))/180*1.2:
  (360/imgnum*$(this).data("index")-180)/180*1.2;

로그인 후 복사

두 번째 줄의 thiszindex는 이미지의 깊이 정보입니다. 각 이미지에 index 속성을 추가했습니다. . 인덱스 값을 저장하면 이미지는 이 정보를 기반으로 해당 깊이 값을 계산합니다.

세 번째 줄의 thisopacity는 이미지의 투명도 정보입니다.

각 이미지에는 다음 CSS 스타일이 지정됩니다.

$(this).css({
  "left":thisleft-(o.width*thisopacity)/2+"px",
  "top":(holderheight/2)-o.width*(thisopacity+1)/4,
  "z-index":thiszindex+180,
  "opacity":(thisopacity+0.2)/1.2,
  "width":o.width*(thisopacity+1)/2,
  "height":o.height*(thisopacity+1)/2
  });

로그인 후 복사

다섯 번째 줄의 불투명도는 가장 깊은 수준에서 완전히 가득 차는 것을 방지하기 위해 간단한 수식을 사용합니다. 투명한.

기능적으로는 좌우회전 기능을 추가했는데, 원리는 사진의 X축 정보의 양수값과 음수값을 변환하는 것입니다. :

if(dir==&#39;left&#39;){
  thisleft=-(o.radius)*Math.sin(xx*(Math.PI*2/360))+(holderwidth/2);
  }else{
  thisleft=(o.radius)*Math.sin(xx*(Math.PI*2/360))+(holderwidth/2);
  }

로그인 후 복사

사용자는 전체 효과의 매개변수를 사용자 정의할 수 있습니다.

$.fn.scroll3d.defaults={
 speed:25,
 radius:100,
 width:200,
 height:150,
 direction:&#39;left&#39;
 }

로그인 후 복사

효과의 전체 코드는 아래에 첨부되어 있습니다.

(function($) {
 $.fn.scroll3d = function(options) {
 var opts = $.extend({}, $.fn.scroll3d.defaults, options);
 var $this = $(this);
 var o = $.meta ? $.extend({}, opts, $(this).data()) : opts;
 var radius = o.radius;
 var timer = 0;
 var xx = 0;
 var speed = o.speed;
 var dir = o.direction;
 $(this).hide();
 return this.each(function() {
 var $img = $(this).find(&#39;img&#39;).css({&#39;position&#39;: &#39;absolute&#39;}), num = 0;
 var imgnum = $img.length;
 var holderwidth = $(this).width(),
 holderheight = $(this).height();
 $img.each(function(i) {
 var imgsrc = $(this).attr("src");
 $(this).data({
 "index": i
 });
 $(this).load(function() {
 ++num;
 if (num == imgnum) {
 $this.show();
 }
 }).attr({
 "src": imgsrc
 });
 var thisleft = -(o.radius) * Math.sin((360 / imgnum) * $(this).data("index") * (Math.PI * 2 / 360)) + (holderwidth / 2);
 var thiszindex = 360 / imgnum * $(this).data("index") > 180 ? 360 / imgnum * $(this).data("index") - 360 : -360 / imgnum * $(this).data("index");
 var thisopacity = 360 / imgnum * $(this).data("index") <= 180 ? (180 - 360 / imgnum * $(this).data("index")) / 180 * 1.2 :
 (360 / imgnum * $(this).data("index") - 180) / 180 * 1.2;
 $(this).attr({
 "nowdeg": (360 / imgnum) * $(this).data("index")
 });
 $(this).css({
 "left": thisleft - (o.width * thisopacity) / 2 + "px",
 "top": (holderheight / 2) - o.width * (thisopacity + 1) / 4,
 "z-index": thiszindex + 180,
 "opacity": (thisopacity + 0.2) / 1.2,
 "width": o.width * (thisopacity + 1) / 2,
 "height": o.height * (thisopacity + 1) / 2
 });
 });
 function scrollimg() {
 $img.each(function() {
 var thisdeg = $(this).attr(&#39;nowdeg&#39;);
 var thisleft;
 xx = thisdeg;
 if (dir == &#39;left&#39;) {
 thisleft = -(o.radius) * Math.sin(xx * (Math.PI * 2 / 360)) + (holderwidth / 2);
 } else {
 thisleft = (o.radius) * Math.sin(xx * (Math.PI * 2 / 360)) + (holderwidth / 2);
 }
 var thiszindex = xx > 180 ? xx - 360 : -xx;
 var thisopacity = xx <= 180 ? (180 - xx) / 180 : ($(this).attr(&#39;nowdeg&#39;) - 180) / 180;
 $(this).css({
 "left": thisleft - (o.width * thisopacity) / 2 + "px",
 "top": (holderheight / 2) - o.width * (thisopacity + 1) / 4,
 "z-index": thiszindex + 180,
 "opacity": (thisopacity + 0.2) / 1.2,
 "width": o.width * (thisopacity + 1) / 2,
 "height": o.height * (thisopacity + 1) / 2
 });
 xx++;
 if (xx > 360) xx = 0;
 $(this).attr({
 "nowdeg": xx
 });
 });
 };
 var tt = setInterval(scrollimg, speed);
 $img.hover(function() {
 clearInterval(tt);
 }, function() {
 tt = setInterval(scrollimg, speed);
 });
 
 });
 };
 $.fn.scroll3d.defaults = {
 speed: 25,
 radius: 300,
 width: 200,
 height: 150,
 direction: &#39;left&#39;
 }
 })(jQuery);

로그인 후 복사

HTML에서는 이 효과를 구현하는 데 필요한 그림이 포함된 DIV만 있으면 됩니다. 예:

<div class="holder" style="width:550px;height:300px;position:relative;">
 <img  src="img/1.jpg" / alt="jQuery는 이미지 회전 효과를 생성합니다." >
 <img  src="img/2.jpg" / alt="jQuery는 이미지 회전 효과를 생성합니다." >
 <img  src="img/3.jpg" / alt="jQuery는 이미지 회전 효과를 생성합니다." >
 <img  src="img/1.jpg" / alt="jQuery는 이미지 회전 효과를 생성합니다." >
 <img  src="img/2.jpg" / alt="jQuery는 이미지 회전 효과를 생성합니다." >
 </div>

로그인 후 복사

코드 호출은 다음과 같이 작성할 수 있습니다.

$( '.holder').scroll3d();

글이 좀 지저분하지만 양해해 주시기 바랍니다. !

위 내용은 이 글의 전체 내용입니다. 이 글의 내용이 모든 분들의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 저도 PHP 중국어 사이트에 지원하고 싶습니다!

이미지 회전 효과를 생성하는 jQuery와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!