js实现模拟购物商城案例

学习HTML,css和js前端的小伙伴们,这次来分享购物商城案例的实现!

Posted in Javascript onMay 18, 2021

准备阶段:

准备一些需要放到页面上的图片,小图和其对应的大图,博主这边举例为小图(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 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
ztree+ajax实现文件树下载功能
May 18 #Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
AJAX学习笔记
JS如何使用剪贴板操作Clipboard API
详解Node.js如何处理ES6模块
May 15 #Javascript
详解vue中v-for的key唯一性
You might like
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python中shape计算矩阵的方法示例
2017/04/21 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
服装厂厂长职责
2013/12/16 职场文书
小学毕业感言50字
2014/02/16 职场文书
霸气队列口号
2014/06/18 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
环保守法证明
2015/06/24 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL