社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > jquery實現圖片水平滾動的效果

jquery實現圖片水平滾動的效果

不言
發布： 2018-07-02 15:58:48
原創
2332 人瀏覽過

這篇文章主要介紹了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中文網！

相關推薦：

基於jQuery實作的檢視全文的功能

利用jQuery實作WordPress中@的ID懸浮顯示評論內容

#

以上是jquery實現圖片水平滾動的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
jquery实现滚动效果 jquery滚动效果 jquery水平滚动 jquery实现图片滚动
來源：php.cn
上一篇：jquery網址列連結與a標籤連結相符的特效 下一篇：關於Angular.Js的自動化測試
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
為什麼省略 0ms sleep 會破壞我的 css 轉換？ 我正在嘗試實現FLIP動畫，看看我是否理解正確。在這個程式碼筆中（請原諒糟糕的程式碼，我只是在亂搞），如果我註解掉睡眠，平滑過渡將不再有效。 div突然改變位置。這很奇怪，因為睡眠...
來自於 2024-04-06 16:29:50
0
2
490
使用 javascript 將附加價值新增至顯示的格式資料字段 我正在努力實現這一目標：我想創建一個表單來收集用戶輸入的資料並將其列印在螢幕上。到目前為止，我已經透過下面的程式碼片段實現了幾乎正常的效果，但是，我需要「textone」和「tex...
來自於 2024-04-04 15:17:13
0
1
3589
建立一個懸停效果，將選單按鈕轉換為具有陰影複製版本的 x 形狀 首先我想承認我的標題很令人困惑，對此感到抱歉。我想要實現的是懸停時的以下效果：我的網站在這裡https://wordpress-493302-3130963.cloudwaysap...
來自於 2024-04-04 11:55:21
0
2
315
如何使文字在點擊時變成新元素（如分隔線）？ 我正在嘗試找到一種方法，使頁面上的某些文字在單擊時變成分隔符號/新元素。我不知道如何解釋它，但是就像，想像一個下面帶有標題的圖像-單擊標題，然後上面的圖像變得像一個文本框/不同的圖...
來自於 2024-04-04 11:21:03
0
1
3580
使用單一網格或 Flex 建立多樣化的卡片佈局：實用指南 我正在嘗試製作如圖所示的響應式卡片佈局。目前我正在做的是分別為電腦、平板電腦和行動裝置建立佈局。然後在media查詢的幫助下，我將其他兩個視圖的顯示屬性設定為display:non...
來自於 2024-04-02 21:07:36
0
2
377
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板