jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>手風(fēng)琴</title> <script src="./jQuery.js"></script> <style> .bigbox{ width: 610px; height: 270px; border: 1px solid #ccc; margin: 0 auto; } ul{ margin: 0; padding: 0; float: left; height: 270px; } li{ float: left; list-style: none; width: 50px; height: 270px; border: 1px solid #ccc; overflow: hidden; } img{ width: 400px; } .ww{ width: 400px; } </style> </head> <body> <div class="bigbox"> <ul class="q"> <li class="ww"><img src="./image/d1.jpeg" alt=""></li> <li><img src="./image/d2.jpeg" alt=""></li> <li><img src="./image/d3.jpeg" alt=""></li> <li><img src="./image/d4.jpeg" alt=""></li> <li><img src="./image/d5.jpeg" alt=""></li> </ul> </div> <script> $(function(){ $('.q li').mouseover(function(){ $('.q li').removeClass(); $(this).addClass('ww'); }) }) </script> </body> </html>
再補(bǔ)充一段:鼠標(biāo)移動(dòng)切換圖片操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function picture(pic){ //id讀取圖片及路徑 document.getElementById('pic').src='ps/'+pic; } </script> </head> <body> <img id="pic" src="ps/01.jpg" width="400px" //移上去事件 alt="" οnmοuseοver='picture("01.jpg")'οnmοuseοut='picture("02.jpg")' //移出去事件 οnkeydοwn='picture("03.jpg")'> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery的clone方法應(yīng)用于textarea和select的bug修復(fù)
textarea和select的值clone的時(shí)候會(huì)丟掉,在clone的時(shí)候?qū)al再重新賦值一下,如果知道這個(gè)了就加單了2014-06-06jquery的Tooltip插件 qtip使用詳細(xì)說(shuō)明
qTip是一個(gè)基于JQuery的Tooltip插件。它幾乎支持所有的主流瀏覽器。2010-09-09jquery.mobile 共同布局遇到的問(wèn)題小結(jié)
這篇文章主要介紹了jquery.mobile 共同布局遇到的問(wèn)題小結(jié),需要的朋友可以參考下2015-02-02jquery原創(chuàng)彈出層折疊效果點(diǎn)擊折疊彈出一個(gè)層
今天整理最近項(xiàng)目里用到的一個(gè)小效果,點(diǎn)擊折疊彈出一個(gè)層給用戶填寫信息,感興趣的朋友可以學(xué)習(xí)下2014-03-03基于jQuery實(shí)現(xiàn)圖片推拉門動(dòng)畫效果的兩種方法
本文給大家分享兩種方法實(shí)現(xiàn)''推拉門''動(dòng)畫效果也可以稱作是手風(fēng)琴效果,具體實(shí)現(xiàn)方法大家通過(guò)本文一起學(xué)習(xí)吧2017-08-08jQuery實(shí)現(xiàn)強(qiáng)制cookie過(guò)期方法匯總
本文是對(duì)jquery 強(qiáng)制cookie失效的解決方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2015-05-05jQuery ajax請(qǐng)求返回list數(shù)據(jù)動(dòng)態(tài)生成input標(biāo)簽,并把list數(shù)據(jù)賦值到input標(biāo)簽
這篇文章主要介紹了jQuery ajax請(qǐng)求返回list數(shù)據(jù)動(dòng)態(tài)生成input標(biāo)簽,并把list數(shù)據(jù)賦值到input標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2016-03-03jQuery Ajax 實(shí)現(xiàn)在html頁(yè)面實(shí)時(shí)顯示用戶登錄狀態(tài)
本文給大家分享jQuery Ajax 實(shí)現(xiàn)在html頁(yè)面實(shí)時(shí)顯示用戶登錄狀態(tài)的實(shí)現(xiàn)方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2016-12-12jQuery源碼分析-05異步隊(duì)列 Deferred 使用介紹
異步隊(duì)列是一個(gè)鏈?zhǔn)綄?duì)象,增強(qiáng)對(duì)回調(diào)函數(shù)的管理和調(diào)用,用于處理異步任務(wù)2011-11-11