首頁 >頭條 > 正文

世界要聞: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瀏覽器

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

責任編輯:

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

免責聲明

頭條新聞

推薦內容