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 研究心得 取得属性的值
Nov 30 Javascript
js活用事件触发对象动作
Aug 10 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
Node.js系列之发起get/post请求(2)
Aug 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP文本操作类
2006/11/25 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
offsetParent 算法分析
2010/04/05 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python监控文件或目录变化
2016/06/07 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python之循环结构
2019/01/15 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
Python中pass的作用与使用教程
2020/11/13 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
syb养殖创业计划书
2014/01/09 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
兴趣班停课通知
2015/04/24 职场文书
烈士陵园观后感
2015/06/08 职场文书
辩论赛新闻稿
2015/07/17 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS