91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

js實現模擬購物商城的方法

發布時間:2021-05-19 09:58:27 來源:億速云 閱讀:209 作者:小新 欄目:開發技術

這篇文章主要介紹了js實現模擬購物商城的方法,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

準備階段:

準備一些需要放到頁面上的圖片,小圖和其對應的大圖,博主這邊舉例為小圖(40 x 40),大圖(321 x 430)。

結構分析:

  • 大圖區域

  • 小圖區域

  • 整體邊框區域

效果分析:

  • 鼠標放在小圖片上大圖會對應顯示。

  • 鼠標放在小圖片上面會有對應效果。

  • 鼠標移出時小邊框對應效果消失。

使用css對邊框進行設置:

對div標簽進行設置(對邊框屬性進行設置):

#showdiv{
         width: 342px;
         height: 505px;
         border: solid 1px ;
         border-radius: 10px;
     }

對table標簽進行設置(不需要邊框,且離頂部有一定的距離):

#ta{
          margin: auto;
          margin-top: 5px;
      }

使用js對頁面動態效果進行設置:

鼠標進入的函數:

function operInImg(img,src){
          //設置圖片的樣式
          img.style.border="solid 1px blue";
          //設置大圖的img路徑
              //獲取大圖路徑
              var big = document.getElementById("big");
              //設置路徑
              big.src=src;               
      }
      function operOutImg(img){
          //設置圖片的樣式
          img.style.border="";
      }

鼠標移出函數:

function operOutImg(img){
          //設置圖片的樣式
          img.style.border="";
      }

整體代碼實現:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--聲明js代碼域-->
    <script>
        //創建函數進行照片的聯動和樣式設置
        function operInImg(img,src){
            //設置圖片的樣式
            img.style.border="solid 1px blue";
            //設置大圖的img路徑
                //獲取大圖路徑
                var big = document.getElementById("big");
                //設置路徑
                big.src=src;               
        }
        function operOutImg(img){
            //設置圖片的樣式
            img.style.border="";
        }


    </script>

    <!---聲明css代碼域-->
    <style>
        /*設置div樣式*/
        #showdiv{
            width: 342px;
            height: 505px;
            border: solid 1px ;
            border-radius: 10px;
        }
        /*設置table樣式*/
        #ta{
            margin: auto;
            margin-top: 5px;
        }

    </style>
    <title>taobao</title>
</head>
<body>
     <div id="showdiv">
         <table width ="332px" height = "440px" id="ta">
             <tr height="300px">
                 <td colspan="5"><img src="./images/demo-big.jpg" alt=""  id="big"></td>
             </tr>
             <tr height="40px">
                 <td><img src="./images/demo01.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big01.jpg')" onmouseout="operOutImg(this)"></td>
                 <td><img src="./images/demo02.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big02.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo03.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big03.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo04.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big04.jpg')" onmouseout="operOutImg(this)"> </td>
                 <td><img src="./images/demo05.jpg" alt="" onmouseover="operInImg(this,'./images/demo-big05.jpg')" onmouseout="operOutImg(this)"> </td>
             </tr>
         </table>
     </div>
</body>
</html>

實現效果:

js實現模擬購物商城的方法

javascript是一種什么語言

javascript是一種動態類型、弱類型的語言,基于對象和事件驅動并具有相對安全性并廣泛用于客戶端網頁開發的腳本語言,同時也是一種廣泛用于客戶端Web開發的腳本語言。它主要用來給HTML網頁添加動態功能,現在JavaScript也可被用于網絡服務器,如Node.js。

感謝你能夠認真閱讀完這篇文章,希望小編分享的“js實現模擬購物商城的方法”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

江西省| 潼南县| 宁国市| 台湾省| 淮北市| 始兴县| 霍山县| 休宁县| 榆中县| 石景山区| 阿瓦提县| 蓬溪县| 乐昌市| 牡丹江市| 大埔县| 嘉义县| 乌鲁木齐县| 海门市| 全椒县| 永城市| 岚皋县| 嘉峪关市| 门头沟区| 龙江县| 扬州市| 齐齐哈尔市| 获嘉县| 禹州市| 乌兰察布市| 枞阳县| 铁力市| 涿州市| 赤峰市| 萨迦县| 仁怀市| 诏安县| 台北市| 随州市| 吉木乃县| 咸宁市| 陵川县|