热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

js实现模拟购物商城案例

这篇文章主要为大家详细介绍了js实现模拟购物商城案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

学习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="";
      }

整体代码实现:




    
    
    
    
    

    
    
    


     

实现效果:

感谢您的阅读,不足之处欢迎指正!

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


推荐阅读
  • 题目描述非常吸引人。每颗星星可以通过其在窗口的左下角和右上角位置构建两条扫描线,从而将问题转化为区间增减和求最大值的操作。需要注意的是,位于边界的星星不应计入结果,因此在处理时应分别对左右边界进行适当的增减调整。此外,利用线段树和离散化技术可以显著提高算法效率,确保在大规模数据下的性能表现。 ... [详细]
  • Vuex 实战进阶:构建高效笔记本应用(第二篇)
    在上一篇文章中,我们初步探讨了 Vuex 在该项目中的应用。本文将深入解析整个项目的架构设计。首先回顾 `main.js` 的内容,然后重点分析 `App.vue` 文件,其中引入了 `Toolbar.vue` 和 `NodeList.vue` 组件,详细说明它们在应用中的作用和交互方式。通过这些组件的协同工作,我们将展示如何构建一个高效且响应迅速的笔记本应用。 ... [详细]
  • 如何运用蒙特卡洛方法计算NPV:计算机专业毕业设计遇到难题怎么办?
    许多计算机科学专业的学生在大学期间都会遇到这样的困扰:课堂上教授的内容往往偏向理论,实际应用的知识点讲解得较为浅显和概括,导致在进行毕业设计时,如运用蒙特卡洛方法计算净现值(NPV)等复杂问题时感到无从下手。本文旨在探讨如何通过深入理解和实践蒙特卡洛模拟技术,解决这类计算难题,为学生的毕业设计提供实用指导。 ... [详细]
  • 在执行 Vim/VM 命令时遇到错误提示:检测到名为
    在使用 Docker 时,通过 Vim 编辑 Dockerfile 文件时遇到了错误提示:“检测到名为 .dockerfile.swp 的交换文件”。这一问题通常是因为上次编辑该文件时意外中断,导致系统生成了临时的交换文件。为了解决这个问题,可以手动删除该交换文件或使用 Vim 的恢复功能来恢复未保存的更改。 ... [详细]
  • 本文介绍了在PHP环境中优化表格列表和表单Label样式的技巧,通过CSS代码提升表单的视觉效果。具体包括为每个标签添加箭头背景,并在标签获得焦点时实现背景高亮的效果。示例代码展示了如何为“姓名”和“邮件”字段应用这些样式,适用于phpStudy开发环境。 ... [详细]
  • 斐波那契数在组合数学中的应用与探索
    斐波那契数列作为数学领域中一个广为人知的数列,不仅拥有丰富的数学性质,还与自然界的诸多现象紧密相连。本文将深入探讨这一数列背后的奥秘,揭示其在组合数学中的广泛应用,并通过具体问题的引入,展示斐波那契数列在解决复杂组合问题时的独特优势。 ... [详细]
  • Jenkins学习精华:自动化构建与持续集成入门指南
    本文综合了网络资源及同事分享的PPT内容,详细介绍了Jenkins在自动化构建与持续集成中的应用。首先涵盖了Jenkins的安装与配置流程,接着阐述了如何根据项目需求设定自动化编译任务,包括确定开发环境、选择合适的编译工具以及实现代码的自动更新等关键步骤。特别强调了在SVN环境中通过命令行实现代码自动拉取的最佳实践。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • jQuery学习笔记:深入理解事件委派(2014年8月3日)
    在jQuery中,事件委托机制主要通过`closest()`方法实现。该方法用于查找与指定选择器匹配的最近祖先元素,从当前元素开始逐级向上遍历DOM树。这一技术不仅提高了代码的效率,还能有效处理动态生成的元素。参考资料:jQuery遍历方法详解。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 如何使用CSS精准控制中文字符间距
    本文详细探讨了如何利用CSS精确控制中文字符间距,提供了多种实用技巧和示例代码,具有较高的参考价值。通过本文的学习,读者将能够更好地掌握CSS在中文排版中的应用,提升网页设计的美观度和可读性。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 深入探讨Photoshop的高级应用与技巧
    本文深入探讨了Photoshop的高级应用与技巧,不仅涵盖了常用的快捷键,如矩形选框工具(M)、移动工具(V)、套索工具(L)、魔棒工具(W)、裁剪工具(C)等,还介绍了更多专业功能,如图层蒙版、混合模式和智能对象的使用方法,帮助用户提升图像处理的效率和质量。 ... [详细]
  • IDEA中高效利用代码变量名替换功能提升编程效率
    在使用 IntelliJ IDEA 进行公司项目代码审查时,我发现许多变量的命名不符合驼峰式命名规范。起初,我尝试手动逐个修改这些变量名,但效率低下。后来,我偶然发现了 IDEA 中的代码变量名替换功能,这极大地提高了我的工作效率。通过该功能,我可以快速批量地将不规范的变量名修改为符合命名规则的形式,不仅节省了时间,还减少了出错的可能性。此外,我还利用这一功能对整个项目的代码进行了全面的优化,确保所有变量命名一致且易于理解。 ... [详细]
  • JVM参数设置与命令行工具详解
    JVM参数配置与命令行工具的深入解析旨在优化系统性能,通过合理设置JVM参数,确保在高吞吐量的前提下,有效减少垃圾回收(GC)的频率,进而降低系统停顿时间,提升服务的稳定性和响应速度。此外,本文还将详细介绍常用的JVM命令行工具,帮助开发者更好地监控和调优JVM运行状态。 ... [详细]
author-avatar
-晴天2602926075
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有