jQuery实现的堆栈效果的图片展示效果_时代Java(NowJava.com) -JS/jQuery代码 -演示与下载 -时代Java jStack.js - jQuery Plugin

Example


Documentation

jStack.jsは画像をペラペラめくっていくjQuery Pluginです。
目玉商品はシャッフル機能です。

サンプルコード

JavaScript

以下のサンプルではimageBoxというidを持つ要素の子にimgタグが複数並んでいることを想定しています。
まずはjStack関数を呼び出して初期化してください。
引数を何も渡さなければデフォルト値で動作します。
またパラメータ名でOutInというサフィックスが付いているものは、Outが画像が横に呼び出たとき、Inが画像が元の場所に戻るときを意味します。
なので画像が横にいくときはゆっくりにして、戻るときに速くするなどアレンジしたMotionが可能になります。

isClickAnimationをtrueにしている場合は画像を直接クリックしてめくることができますが、画像をリンクにしていた場合はめくるよりも遷移して欲しいところです。
そうゆう場合はisClickをfalseにし、他にめるく用のボタンを用意して以下のようにイベントセットしてください。

また今回作ってみたかったシャッフル機能はトランプのように並びをランダムにする関数になります。

HTML

Download

代码整理:时代Java(NowJava.com) 

转载请注明出处,此代码仅供学习交流,请勿用于商业用途。

下载代码说明
X关闭

jQuery实现的堆栈效果的图片展示循环弹出效果

一个jQuery实现的幻灯片效果,效果展示如同堆栈一样点击一次数显一个图片,循环弹出,经测试过度效果也非常不错,同时附有源码,建议前端web开发者下载学习使用JavaScript代码: [code] var jstack = $("#imageBox").jStack({ isClickAnimation: true, isPositionRandom: true, dura