コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryは画像の横スクロール効果を実現します

jqueryは画像の横スクロール効果を実現します

不言
リリース： 2018-07-02 15:58:48
オリジナル
2369 人が閲覧しました

この記事では主に画像の水平スクロール効果を実現するための jquery を紹介します。非常に実用的なコードなので、困っている人はぜひ参考にしてください。

この記事の例では、jqueryを使用した画像の横スクロール効果について説明していますので、ご参考までに共有したいと思います。詳細は以下の通りです:
ランニング効果図: -------------------効果を見る----------------- -

ヒント: ブラウザが正しく動作しない場合は、閲覧モードを切り替えてみてください。
あなたと共有した画像の水平スクロール効果を実現するための jquery コードは次のとおりです

<HEAD>
<META content="text/html; charset=gb2312" http-equiv="Content-Type">
<TITLE>jquery实现图片水平滚动效果</TITLE>
<LINK rel="stylesheet" type="text/css" href="css/style.css">
<SCRIPT type="text/javascript" src="js/ga.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.js"></SCRIPT>
</HEAD>
<BODY>

<!--演示内容开始-->
<SCRIPT type="text/javascript" src="js/jquery.min.1.5.1.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.ui.1.8.10.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jCoverflip.js"></SCRIPT>
<p class="artist_flow_contn">
 <UL id="flip" class="ui-jcoverflip">
  <LI style="left: 80px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/01.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN></LI>
  <LI style="left: 220px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 160px; display: inline-block;" border="0" src="images/02.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN></LI>
  <LI style="left: 400px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/03.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN></LI>
  <LI style="left: 530px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/04.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN></LI>
  <LI style="left: 660px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/05.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN></LI>
  <LI style="left: 790px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/06.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">p+css多张背景图片规范写法图片透明度显示</A></SPAN></LI>
  <LI style="left: 920px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/07.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">CSS如何定位工程</A></SPAN></LI>
  <SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">CSS如何定位工程</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">p+css多张背景图片规范写法图片透明度显示</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN><SPAN style="display: block; opacity: 1;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN>
 </UL>
 <p id="scrollbar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><A 
style="left: 16.66%;" class="ui-slider-handle ui-state-default ui-corner-all" 
href="#"></A></p>
</p>
<SCRIPT type="text/javascript">
$(document).ready(function(){

 // cover flip effects //
 //var noOfArtists = 31; //jx
 var noOfArtists = 7; //jx
 
 $(&#39;#flip&#39;).jcoverflip({
 current: 0,
 
 beforeCss: function(el, container, offset){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + &#39;px&#39;,
  bottom: &#39;20px&#39;
  }, {}), $.jcoverflip.animationElement(el.find(&#39;img&#39;), {
  width: Math.max(10, 120 - 0 * offset * offset) + &#39;px&#39;
  }, {})];
 },
 afterCss: function(el, container, offset){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 + 100 + 130 * offset) + &#39;px&#39;,
  bottom: &#39;20px&#39;
  }, {}), $.jcoverflip.animationElement(el.find(&#39;img&#39;), {
  width: Math.max(10, 120 - 0 * offset * offset) + &#39;px&#39;
  }, {})];
 },
 currentCss: function(el, container){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 - 80) + &#39;px&#39;,
  bottom: &#39;20px&#39;
  }, {}), $.jcoverflip.animationElement(el.find(&#39;img&#39;), {
  width: &#39;160px&#39;
  }, {})];
 },
 change: function(event, ui){
  //jx $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, ui.to * 10);
  $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, ui.to * (100 / (noOfArtists - 1))); //jx
 }
 });
 
 $(&#39;#scrollbar&#39;).slider({
 //jx value: 50,
 value: 0, //init. pic is the beginning of the artists list, so change from 50 (middle) to 0
 //jx step: 10,
 step: 100 / (noOfArtists - 1), //jx
 stop: function(event, ui){
  if (event.originalEvent) {
  //jx var newVal = Math.round(ui.value / 10);
  var newVal = Math.round(ui.value / 100 * (noOfArtists - 1)); //jx
  $(&#39;#flip&#39;).jcoverflip(&#39;current&#39;, newVal);
  //jx $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, newVal * 10);
  $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, newVal / (noOfArtists - 1) * 100); //jx
  }
 }
 });
 // cover flip effects //

});
</SCRIPT>
<!--演示内容结束-->

</BODY>
</HTML>
ログイン後にコピー

以上がこの記事の全内容であり、その他の関連コンテンツについても役立つことを願っています。 、PHP 中国語 Web サイトに注意してください。

関連おすすめ:

jQueryによる全文表示機能

jQueryを使ってWordPressに@IDフローティング表示を実装

以上がjqueryは画像の横スクロール効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
jquery实现滚动效果 jquery滚动效果 jquery水平滚动 jquery实现图片滚动
ソース：php.cn
前の記事：jQueryのアドレスバーリンクとラベルリンクを一致させることによる特殊効果 次の記事：Angular.Js の自動テストについて
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか? FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。このコードペン (間違ったコードですみません。ただいじっているだけです) で、sleep ...
から 2024-04-06 16:29:50
0
2
490
JavaScriptを使用して表示された形式のデータフィールドに追加の値を追加します 私はこれを達成しようとしています: ユーザーが入力したデータを収集し、それを画面に印刷するフォームを作成したいと考えています。これまでのところ、以下のコード スニペットでほぼ実用的...
から 2024-04-04 15:17:13
0
1
3589
影付きクローンバージョンでメニューボタンをX字型に変形させるホバーエフェクトを作成します まず初めに、タイトルが紛らわしいことを認めたいと思います。申し訳ありません。私が達成したいのは、ホバー時の次の効果です。私のウェブサイトはここです https://wordpres...
から 2024-04-04 11:55:21
0
2
315
クリックしたときにテキストが新しい要素 (区切り線など) に変わるようにするにはどうすればよいですか? ページ上の特定のテキストをクリックすると区切り文字/新しい要素に変わる方法を見つけようとしています。どう説明したらいいのかわかりませんが、画像の下にタイトルがあると想像してください...
から 2024-04-04 11:21:03
0
1
3580
単一のグリッドまたは Flex を使用して多様なカード レイアウトを作成する: 実用的なガイド 写真のようなレスポンシブカードレイアウトを作成しようとしています。私が現在行っているのは、コンピューター、タブレット、モバイル デバイス用に個別のレイアウトを作成することです。次に...
から 2024-04-02 21:07:36
0
2
377
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート