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 相关文章推荐
一个获取第n个元素节点的js函数
Sep 02 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
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合并js请求的例子
2013/11/01 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php查询whois信息的方法
2015/06/08 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
php微信开发之图片回复功能
2018/06/14 PHP
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
python修改txt文件中的某一项方法
2018/12/29 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python实现搜索算法的实例代码
2020/01/02 Python
在keras中实现查看其训练loss值
2020/06/16 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
婚假请假条怎么写
2014/04/10 职场文书
节能环保标语
2014/06/12 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
Python实现学生管理系统(面向对象版)
2021/06/24 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android