js如何实现模拟购物商城 js实现模拟购物商城代码示例

js如何实现模拟购物商城？本篇文章小编给大家分享一下js实现模拟购物商城代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

准备阶段：

准备一些需要放到页面上的图片，小图和其对应的大图，博主这边举例为小图(40 x 40),大图(321 x 430)。

结构分析：

大图区域

小图区域

整体边框区域

效果分析：

鼠标放在小图片上大图会对应显示。

鼠标放在小图片上面会有对应效果。

鼠标移出时小边框对应效果消失。

使用css对边框进行设置：

对div标签进行设置（对边框属性进行设置）：

#showdiv{
         
         
         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="";
      }

整体代码实现：

实现效果：