溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

html+css+js(+JQuery)制作撲克牌圖片切換效果

發(fā)布時(shí)間：2020-05-19 08:36:52 來(lái)源：網(wǎng)絡(luò) 閱讀：2011 作者：無(wú)憂(yōu)you 欄目：web開(kāi)發(fā)

要實(shí)現(xiàn)的效果圖：

html+css+js(+JQuery)制作撲克牌圖片切換效果

先把靜態(tài)頁(yè)面寫(xiě)出來(lái)：

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jquery制作撲克牌圖片切換效果</title>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <div class="pic pic1"><img src="image/11.jpg" /></div>
    <div class="pic pic2"><img src="image/22.jpg" /></div>
    <div class="pic pic3"><img src="image/33.jpg" /></div>
    <div class="pic pic4"><img src="image/44.jpg" /></div>
    <div class="pic pic5" title=""><img src="image/55.jpg" /></div>
</body>
</html>

此時(shí)的效果是這樣的：
html+css+js(+JQuery)制作撲克牌圖片切換效果
分析：

背景顏色

圖片的位置

圖片的邊框、圓角以及陰影

讓圖片動(dòng)起來(lái)

index.css代碼：

*{  
    margin:0;
    padding:0;
}

body{  /*背景顏色*/
    background:#cca0a0;
}

.pic{
    position:absolute;
}
.pic1 {
    z-index:1;/*越小越靠下*/
    top:120px;
    left:100px;
}
.pic2 {
    z-index:1;
    top:120px;
    left:600px;
}
.pic3 {
    z-index:2;
    top:200px;
    left:200px;
}
.pic4 {
    z-index:2;
    top:200px;
    left:500px;
}
.pic5 {
    z-index:3;
    top:280px;
    left:350px;
}

img {
    padding:10px;
    background:#fff;
    border-radius:10px;/*圓角*/
    box-shadow:5px 10px 10px #808080;/*陰影*/
    cursor:pointer;/*鼠標(biāo)移動(dòng)到圖片上，變小手*/
}

html+css+js(+JQuery)制作撲克牌圖片切換效果

此時(shí)靜態(tài)的做完了，剩下的就是點(diǎn)擊圖片的時(shí)候進(jìn)行交換：

首先獲取點(diǎn)擊的圖片的left、top以及z-index值，然后與最前邊（z-index數(shù)最大的那張）圖片的left，top，z-index進(jìn)行交換，

先給最前邊的圖片一個(gè)標(biāo)記，我們好知道哪張是最前邊的（給class=“pic5”的圖片一個(gè)title值，值為空就行無(wú)所謂）

引入jquery包
加載完成后執(zhí)行

$(function(){

});

那么里邊寫(xiě)什么呢，

點(diǎn)擊圖片的時(shí)候發(fā)生的一些事：

1.獲取點(diǎn)擊的圖片和最前邊的圖片的left、top以及z-index值

2.進(jìn)行交換位置

$(".pic").click(function () {

        /*獲取點(diǎn)擊的圖片的值*/
        var left1 = $(this).offset().left;//獲取當(dāng)前圖片的left值
        var top1 = $(this).offset().top;
        var zindex1 = $(this).css("z-index");

        /*獲取最靠前的圖片的值*/
        var left2 = $(".pic[title]").offset().left;
        var top2 = $(".pic[title]").offset().top;
        var zindex2 = $(".pic[title]").css("z-index");
}

進(jìn)行交換：

先移除最前邊的圖片的標(biāo)號(hào)，讓點(diǎn)擊的圖片獲取最前邊的圖片的值并標(biāo)號(hào)，然后最前邊的圖片獲取點(diǎn)擊的圖片的值

//移除最前邊的圖片的title值
$(".pic[title]").animate({ "left": left1, "top": top1 }, 1000).css("z-index", zindex1).removeAttr("title");
//動(dòng)畫(huà)效果  把最前邊的值給點(diǎn)擊的圖片
$(this).animate({ "left": left2, "top": top2 }, 1000).css("z-index", zindex2).attr("title", "");

此時(shí)是可以動(dòng)了，但還有一個(gè)問(wèn)題：

如果快速的點(diǎn)擊圖片的話(huà)，會(huì)發(fā)生什么事：
html+css+js(+JQuery)制作撲克牌圖片切換效果

我們發(fā)現(xiàn)它亂了！上邊代碼中的1000是毫秒，即1秒，點(diǎn)擊圖片在1秒內(nèi)完成交換，現(xiàn)在我們是1秒內(nèi)可能點(diǎn)擊了三次甚至更多次，第一次的圖片還沒(méi)有交換，有來(lái)了第二次、第三次交換，一時(shí)間反應(yīng)不過(guò)來(lái)，就出現(xiàn)漏洞了。

我們可以讓點(diǎn)擊第二次的時(shí)候立馬歸位：

$(".pic[title]").stop(true, true);
$(this).stop(true, true);

現(xiàn)在就可以了。

貼上index.js的代碼：

//加載完之后
$(function () {
    //點(diǎn)擊圖片的時(shí)候
    $(".pic").click(function () {

        $(".pic[title]").stop(true, true);
        $(this).stop(true, true);
        /*獲取點(diǎn)擊的圖片的值*/
        var left1 = $(this).offset().left;//獲取當(dāng)前圖片的left值
        var top1 = $(this).offset().top;
        var zindex1 = $(this).css("z-index");

        /*獲取最靠前的圖片的值*/
        var left2 = $(".pic[title]").offset().left;
        var top2 = $(".pic[title]").offset().top;
        var zindex2 = $(".pic[title]").css("z-index");

        //移除最前邊的圖片的title值
        $(".pic[title]").animate({ "left": left1, "top": top1 }, 1000).css("z-index", zindex1).removeAttr("title");
        //動(dòng)畫(huà)效果  把最前邊的值給點(diǎn)擊的圖片
        $(this).animate({ "left": left2, "top": top2 }, 1000).css("z-index", zindex2).attr("title", "");
    });
});

注：過(guò)程中出現(xiàn)的錯(cuò)誤
html+css+js(+JQuery)制作撲克牌圖片切換效果

['title']的寫(xiě)法是錯(cuò)誤的，把里邊的單引號(hào)去掉就可以了。

多謝友友么的提醒

資料下載地址：
鏈接：https://pan.baidu.com/s/1gBYRXXh7WeqsBhFhLYugKw 密碼：2bhf

以防萬(wàn)一，附加圖片
用到的圖片：
html+css+js(+JQuery)制作撲克牌圖片切換效果html+css+js(+JQuery)制作撲克牌圖片切換效果html+css+js(+JQuery)制作撲克牌圖片切換效果html+css+js(+JQuery)制作撲克牌圖片切換效果html+css+js(+JQuery)制作撲克牌圖片切換效果

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手