jQuery は画像の回転効果を作成します

以前、JQuery を使用して深さ方向の画像回転効果を作成しました。ここでそれを共有し、その効果がどのようなものであるかを確認するために画像を貼り付けます:

実装原理は複雑ではありません。生成プロセスは大まかに次のとおりです:

(1) 最初に画像の回転の半径を定義します

(2) 画像の回転のプロセスでは、setInterval() メソッドを使用して、各画像の位置は、時間の変化に応じて徐々に変化します

(3) 数式: x=R*SIN(deg) に従って、画像の X 方向の位置は次のようになります。取得

(4) 透明度の設定も写真に基づいて 回転するときの角度で決まります。初期設定は写真が正面にあるとき0度です。時計回りに回転しても、反時計回りに回転しても、写真の回転角度が0度

未満になると、写真の透明度が徐々に低くなります。 , 画像が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;

2 行目の thiszindex は、画像のインデックス値を保存するために画像の深度情報です。この情報に基づいて計算されます。

3行目のこのopacityが画像の透明度情報です。

各画像には次の 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
  });

5 行目の不透明度は、最も深いレベルで完全に透明にならないようにするための単純な式を使用します。

機能的には、画像のX軸情報の正負を変換する機能を追加しました。 コードは次のとおりです。

ユーザーはエフェクト全体のパラメータをカスタマイズできます:

if(dir=='left'){
  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:'left'
 }

完成する必要がある画像を含む HTML 内の DIV のみが必要ですこの効果は、たとえば:

(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('img').css({'position': 'absolute'}), 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);

コードは次のように呼び出すことができます:

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

書き方が少し乱雑ですが、ご容赦いただければ幸いです。

以上がこの記事の内容です。この記事の内容が皆さんの勉強や仕事に少しでもお役に立てれば幸いです。また、PHP中国語ウェブサイトも応援したいと思っています。

画像回転効果を作成する jQuery に関連する記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。