首頁 >頭條 > 正文

      世界要聞:jquery點擊按鈕左右滾動效果_js實現(xiàn)點擊左右滾動jquery焦點圖特效

      2023-02-09 01:05:53來源:互聯(lián)網

      實現(xiàn)即時通信軟件商城點擊左右滾動框架焦點圖特效的代碼!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " " http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-過渡。" DTD "

      html xmlns=" http://。w3。" org/1999/XHTML "


      (資料圖片)

      meta http-equiv=" Content-Type " Content=" text/html;charset=gb2312" /

      style type="text/css "

      body { font-size:12px;顏色:# 222;字體系列:凡爾登、阿里亞、Helvetica、無襯線;背景:# f0f0f0}

      ul,李{列表式:無;邊距:0px填充:0px}

      img { border:0;}

      /* 仿即時通信軟件商城點擊左右滾動框架焦點圖特效插件*/。焦點{寬度:800像素高度:280像素溢出:隱藏;位置:相對;}。焦點ul {高度:380像素位置:絕對;}。focus ul Li { float:left;寬度:800像素高度:280像素溢出:隱藏;位置:相對;背景:# 000;}。聚焦ul李部門{位置:絕對;溢出:隱藏;}。專注btnBg {位置:絕對;寬度:800像素高度:20px左:0;底部:0;背景:# 000;顯示:無;}。專注btn {位置:絕對;寬度:780像素高度:23px填充:0px 10px 0px 10px右:0;底部:6px文本對齊:右對齊;}。專注BTN span { display:inline-block;_ display:inline;_ zoom:1;寬度:25px高度:24px行高:24px文本對齊:居中;_ font-size:0;左邊距:5px光標:指針;背景:# fff}。專注BTN跨度。在{ background:# fff;}。專注preNext { width:45px;高度:100像素位置:絕對;頂配:90px背景:url(img/sprite.png)無重復0 0;光標:指針;}。專注pre { left:0;}。專注。下一個{右:0;背景-位置:右上;}

      /風格

      腳本類型=" text/JavaScript " src=" js/jquery。量滴js "/腳本

      腳本類型=" text/JavaScript " src=" js/sl。js "/腳本

      腳本類型="文本/javascript "

      $(文檔)。ready(function(){

      $.焦點(" #焦點001 ");

      $.焦點(" #焦點002 ");

      });

      /腳本

      /頭

      身體

      h1/h1

      div class="focus" id="focus001 "

      保險商實驗所

      lia href=" http://www。51學點腦。com/" target=" _ blank " img src=" img/03。jpg " alt=" jquery特效//a/li

      lia href=" http://www。51學點腦。com/" target=" _ blank " img src=" img/02。jpg "http://a/Li

      lia href=" http://www。51學點腦。com/" target=" _ blank " img src=" img/03。jpg " alt="仿即時通信軟件商城點擊左右滾動框架焦點圖特效//a/li

      /ul

      /div

      p修改的幾個地方:1、隱藏了半透明背景條,2、把那個小常條滑塊讀出了1234這些數(shù)字。你不喜歡這樣你可以修改樣式和自己改動下框架代碼100元/人

      p調用方法:很簡單,$.焦點(" #焦點001 ");一些參數(shù)設置,可以修改射流研究…中的設置,源作者已經注釋的很清楚了100元/人

      /body

      /html

      射流研究…

      $(function() {

      jQuery.focus=function(slid) {

      var sWidth=$(slid).width();//獲取焦點圖的寬度(顯示面積)

      var len=$(slid).查找(" ul li ").長度;//獲取焦點圖個數(shù)

      定義變量指數(shù)=0;

      var picTimer

      //以下代碼添加數(shù)字按鈕和按鈕后的半透明條,還有上一頁、下一頁兩個按鈕

      var BTN=" div class=" btnBg "/div BTN;

      for(var I=0;我leni ) {

      var ii=I 1;

      BTN=" span " ii "/span;

      }

      BTN="/div div class=" preNext pre "/div div class=" preNext next "/div;

      $(滑)。追加(BTN);

      $(滑)。查找(" div.btnBg ").css("不透明度",0.5);//find()函數(shù)返回在字符串中子字符串的位置。

      //為小按鈕添加鼠標滑入事件,以顯示相應的內容

      $(slid " div.btn span ").css("不透明度",0.4)。mouseenter(function() {

      index=$(slid " .BTN斯潘).指數(shù)(這個);

      展示圖片(索引);

      }).等式(0)。觸發(fā)器(‘鼠標回車’);

      //上一頁、下一頁按鈕透明度處理

      $(滑動的。preNext).css("不透明度",0.2)。hover(function() {

      $(這個)。停止(對,錯)。動畫({"opacity":"0.5"},300);

      },function() {

      $(這個)。停止(對,錯)。動畫({"opacity":"0.2"},300);

      });

      //上一頁按鈕

      $(滑動的。前")。單擊(函數(shù)(){

      index-=1;

      if(index==-1){ index=len-1;}

      展示圖片(索引);

      });

      //下一頁按鈕

      $(滑動的。下一個)。單擊(函數(shù)(){

      指數(shù)=1;

      if(index==len){ index=0;}

      showPics(索引);

      });

      //這個例子是左右滾動,即所有l(wèi)i元素在同一行向左浮動,所以這里需要計算外圍ul元素的寬度。

      $(slid " ul ")。css("width ",sWidth *(len));

      //鼠標向上滑動焦點圖時自動停止播放,滑出時自動開始播放。

      $(滑)。hover(function() {

      clear interval(picTimer);

      },function() {

      picTimer=setInterval(function(){

      showPics(索引);

      指數(shù);

      if(index==len){ index=0;}

      },4000);//這個4000代表自動播放的間隔,以毫秒為單位。

      }).觸發(fā)器(" mouse leave ");

      //顯示圖片功能,根據(jù)接收到的索引值顯示相應的內容

      函數(shù)showPics(index) {//正常切換

      var now left=-index * sWidth;//根據(jù)索引值計算ul元素的左值

      $(slid " ul ")。停止(對,錯)。animate({"left":nowLeft},300);//通過animate()調整ul元素滾動到計算的位置

      $(滑動的"。BTN span’)。removeClass("on ")。eq(指數(shù))。add class(“on”);//切換到當前按鈕的選定效果

      $(滑動的"。BTN span’)。停止(對,錯)。動畫({"opacity":"0.4"},300)。eq(指數(shù))。停止(對,錯)。動畫({"opacity":"1"},300);//切換到當前按鈕的選定效果

      }

      };

      });

      猜猜你喜歡什么:

      1.jS獲取鼠標坐標和鼠標像素。

      2.如何用js實現(xiàn)簡單的鼠標跟隨效果?

      3.3.js如何獲取鼠標在div中的相對位置?

      4.js設置鼠標光標形狀

      5.如何使用5的鼠標手勢?Chrome瀏覽器

      本文到此結束,希望對大家有所幫助。

      責任編輯:

      標簽: 不透明度 腳本類型 獲取焦點 對大家有

      免責聲明

      頭條新聞

      推薦內容