ホームページ >ウェブフロントエンド >jsチュートリアル >jquery円形回転画像スクロール切り替えeffect_jquery

jquery円形回転画像スクロール切り替えeffect_jquery

WBOY
WBOYオリジナル
2016-05-16 18:11:381311ブラウズ

このエフェクトは非常に特別でかわいいので、興味のある友人はそれをダウンロードして使用することができます。
追記: 一般的なブラウザと互換性があるように変更されました。
レンダリング:
jquery円形回転画像スクロール切り替えeffect_jquery
オンライン デモ: http://demo.jb51.net/js/ImagesRotateScroll/index.html
ステップ 1. HTML を作成します。

コードをコピー コードは次のとおりです:




  •  春麗
  • jquery円形回転画像スクロール切り替えeffect_jquery
    ;li> ;DHAISIM

  • ケン

  • バルログ


  • ゴウキ ;

  • ブランカ

  • ホンダ
  • フェイ ロン
  • jquery円形回転画像スクロール切り替えeffect_jquery

  • リュウ

  • サガット
  • 🎜>
  • THWAK

  • ザンギエフ








ステップ 2. CSS を作成します


コードをコピーします コードは次のとおりです: #rotatescroll {
width: 300px;
height; : 300px;
マージン: 0 自動;
#rotatescroll .viewport{
幅: 300px;
位置: 相対;
マージン: 0 自動;
オーバーフロー: 非表示;
#rotatescroll .overview {
位置: 絶対; ;
マージン: 0;
左: 0;
}
幅: 300px; 🎜>高さ: 300ピクセル;
位置: 相対;
#rotatescroll .overlay {
高さ: 300ピクセル;
背景: url(.. /images/bg-rotatescroll.png) no-repeat 0 0;
位置: 絶対;
上: 0; .thumb {
幅: 26px;
高さ: 26px;
z-index: 200;
背景: url(../images/bg-thumb.png) 繰り返しなし 50% 50 %;
位置: 絶対;
カーソル: 0px;
}
#rotatescroll {
背景: url(. ./images/bg -dot2.png) no-repeat 0 0;
表示: 12px;
位置: 絶対; ;
top : 3px;
z-index: 100;
#rotatescroll {display: none; }



ステップ 3. jQuery とスクリプトのパッケージ





コードをコピー


コードは次のとおりです。 script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js">




パッケージのダウンロード
http://www.jb51.net/jiaoben/34107.html
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。