js实现模拟购物商城案例

2024-09-29 09:15:52

学习HTML，css和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>

实现效果：

感谢您的阅读，不足之处欢迎指正！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于javascript实现的购物商城商品倒计时实例

话不多说,下面跟着小编一起来看下实例代码吧 Js: /** * Author: Black_Jay郗 * downCount: 时间转换倒计时 */ (function ($) { $.fn.downCount = function (options, callback) { var settings = $.extend({ date: null, offset: null }, options); if (!settings.date) { $.error('Date is not def
js实现模拟购物商城案例

学习HTML,css和js前端的小伙伴们,这次来分享购物商城案例的实现! 准备阶段: 准备一些需要放到页面上的图片,小图和其对应的大图,博主这边举例为小图(40 x 40),大图(321 x 430). 结构分析: 大图区域小图区域整体边框区域效果分析: 鼠标放在小图片上大图会对应显示. 鼠标放在小图片上面会有对应效果. 鼠标移出时小边框对应效果消失. 使用css对边框进行设置: 对div标签进行设置(对边框属性进行设置): #showdiv{ width: 342px; height:
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

效果图如下所示: 在线地址: github.czero.cn/fancy 点击下载安卓apk安装包源码地址: github.com/czero1995/f- 项目主架构使用的库 vue-cli (vue+webpack脚手架) vue-router(路由跳转) vuex(状态管理) axios(数据请求) mock.js(模拟后台数据) vue-touch(手势判断) fastclick(解决移动端浏览器 300 毫秒点击延迟问题) vue-lazyload(图片懒加载) swiper(轮播
微信小程序购物商城系统开发系列-目录结构介绍

上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的小demo. 这一篇文章我们主要的是介绍一下小程序的一些目录结构,以及一些语法,为我们后面的微信小程序商城系统做铺垫. 首先我们来了解下小程序的目录结构 Pages 我们新建的一些页面将保存在这个文件夹下面,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js.index.
Python 实现购物商城,含有用户入口和商家入口的示例

这是模拟淘宝的一个简易的购物商城程序. 用户入口具有以下功能: 登录认证可以锁定用户密码输入次数大于3次,锁定用户名连续三次输错用户名退出程序可以选择直接购买,也可以选择加入购物车用户使用支付密码完成支付,支付密码连续输入错误达3次,锁定用户名商家入口具有以下功能: 登录认证可以锁定用户密码输入次数大于3次,锁定用户名连续三次输错用户名退出程序商家可以编辑商品上架新品下架商品修改商品信息:商品名.单价.库存每个用户的用户名.密码.余额.支付密码,以行记录定义在 use
JS+cookie实现购物评价五星好评功能

本文实例为大家分享了JS+cookie实现购物评价五星好评功能的具体代码,供大家参考,具体内容如下案例实现的是购物评价中五星点评功能. 通过JS面向对象方法实现利用cookie实现历史点评保存的功能,在下一次打开页面仍保存上一次点评效果. 具体html,js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
python实现简单购物商城

本文为大家分享了购物商城小程序,供大家参考,具体内容如下软件版本:python3.x 功能:实现简单购物商城 1.允许用户选择购买多少件 2.允许多用户登录,下一次登录后,继续按上次的余额继续购买 3. 允许用户查看之前的购买记录(显示购买时间) 4. 商品列表分级展示操作: 1.默认用户,pan,li,密码为123 2.登录后需正确输入用户名和密码 3.按提示选择充值的金额 4.选择购买的商品,按q退出,按c查看易购买记录,按s查看当前已购买商品注:file_lock.txt,user
js实现模拟计算器退格键删除文字效果的方法

本文实例讲述了js实现模拟计算器退格键删除文字效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码

本文实例讲述了JS实现模拟百度搜索"2012世界末日"网页地震撕裂效果代码.分享给大家供大家参考,具体如下: 这是一款JS模拟百度搜索"2012世界末日"网页地震撕裂效果,本效果是模仿用户在百度输入"2012世界末日"后点击搜索后出来的网页效果,网页在震动,像是地震了,而后开始撕裂,然后显示出相关的文字说明,很酷的效果,希望大家可以学习借鉴. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-
JS+CSS模拟可以无刷新显示内容的留言板实例

本文实例讲述了JS+CSS模拟可以无刷新显示内容的留言板功能.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/
JS实现模拟风力的雪花飘落效果

本文实例讲述了JS实现模拟风力的雪花飘落效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <