简单基于SSM整合的java项目(2)前端功能

最新推荐文章于 2024-06-18 20:03:18 发布
最新推荐文章于 2024-06-18 20:03:18 发布
阅读量392 收藏
点赞数
文章标签： java jquery javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47795171/article/details/109126423
版权

增加前端放大镜

项目的产品页面是这样的

在这里插入图片描述
当点击这个页面时会跳转到一个页面
在这里插入图片描述
这个传值是通过简单的html传值实现的

<img src="" width="350"/>
"""
<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script>

    function getParam() {
        var url = location.search;
        var value = url.substring(7);
        $('img').attr('src',value);
    }
    getParam()
</script>

使用了jquery的方法 attr 这个方法 是选择页面上的img标签，向img的src属性里添加value这个值。location.search
是获取url路径？后面的值。

之后是实现放大镜功能，完整代码

 <style>
        .nav-pills {
            background-color: black;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .box{

            margin: 100px;
            border: 1px solid #fff;
            position: relative;
        }
        .small{
            position: relative;
            width: 350px;
            height: 350px;
        }
        .mask{
            width: 125px;
            height: 125px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            cursor: move;
        }
        .big{
            width: 350px;
            height: 350px;
            border: 1px solid #fff;
            position: absolute;
            top: 0;
            left: 360px;
            overflow: hidden;
            display: none;
        }
    </style>
</head>
<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementsByClassName("box")[0];
        var small = box.children[0];
        var big = box.children[1];
        var bigImg = big.children[0];
        var mask = small.children[1];


        small.onmouseenter = function(){
            big.style.display = "block";
            mask.style.display = "block";
        };
        small.onmouseleave = function(){
            big.style.display = "none";
            mask.style.display = "none";
        };

        small.onmousemove = function(event){
            event = event || window.event;
            var pagex = event.pageX || scroll().left + event.clientX;
            var pagey = event.pageY || scroll().top + event.clientY;

            //减去mask宽高的一半，让鼠标在mask的中间
            var x = pagex - box.offsetLeft - mask.offsetWidth/2;
            var y = pagey - box.offsetTop - mask.offsetHeight/2;

            //不让mask超出small
            if(x < 0){
                x=0;
            }
            if(x > small.offsetWidth - mask.offsetWidth){
                x = small.offsetWidth - mask.offsetWidth;
            }
            if(y < 0){
                y=0;
            }
            if(y > small.offsetHeight - mask.offsetHeight){
                y = small.offsetHeight - mask.offsetHeight;
            }

            mask.style.left = x + "px";
            mask.style.top = y + "px";


            var scale = bigImg.offsetWidth / small.offsetWidth;

            bigImg.style.marginLeft = -scale * x +"px";
            bigImg.style.marginTop = -scale * y +"px";
        }
    };
</script>
<body>
    <!--页头-->
    <ul class="nav nav-pills">
        <li role="presentation"><a href="">首页</a></li>
        <li role="presentation"><a href="">产品信息</a></li>
        <li role="presentation"><a href="">公司咨讯</a></li>
        <li role="presentation"><a href="">公司简介</a></li>

    </ul>
    <div class="box">
    <div class="small">
        <img src="" width="350"/>
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src=""/>
    </div>
    </div>
    <script src="vendor/jquery.min.js" type="text/javascript"></script>

</body>
<script>

    function getParam() {
        var url = location.search;
        var value = url.substring(7);
        $('img').attr('src','../../'+value);
    }
    getParam()
</script>

最终效果

在这里插入图片描述

github地址：https://github.com/zhoushibo-111/SSMairuiqiwebsite
gitee地址：https://gitee.com/zhoushiwangchao/SSMairuiqiwebsite
博文樱花
关注
基于SSM，myeclipse开发的网页，有前端页面以及登陆注册管理等功能
12-30
是在做课程设计的网页，基本功能都能实现。是在做课程设计的网页，基本功能都能实现。
Web的大趋所向：java+前端强强组合（不得分离！）
小分享
01-13 961
前后端分离，是目前Web开发的主流模式也是趋势。而Java无疑是后端开发的王者，PHP和.NET目前仍处于水深火热之中，更像是在夹缝中求生存。而大前端，强势崛起！Java+大前端这一强强组合，面对其他Web领域的竞争者，可以将其按在地上使劲摩擦（没别的歧视的意思，夸张手法）。 　　PHP要生存，怎么办？不断的往H5移动端靠，不断的往所谓的全栈靠，让其作为一些前端开发人员的全栈补充技能，甚至许多P...
整合JavaSSM框架【超详细】
最新发布
ntr851217的博客
06-18 1702
在整合SSM之前我们首先要知道SSM框架指的是哪些框架？Java的SSM指的是这三个框架。
SSM框架整合百度编辑器加前端框架
09-04
一个简单的个人博客框架，前台采用bootstrap 后台采用easyUI 加上百度编辑器 等一系列工具，还算可以 自己再用
基于ssm毕业设计管理系统+vue前端
全网粉丝10W+、全栈领域优质创作者、掘金、阿里云等社区博客专家、专注于全栈领域和毕业项目实战
02-06 230
2.教师网上报课题，管理员进行审核，审核通过的课题可以作为最终的选题开供学生选择。6.教师进行对自己管理的学生的开题报告进行审核，通过后可以进行之后的操作。7.学生上传毕业论文，审核通过之后该学生具有答辩资格，可进行答辩。4.待选题结束之后，学生可以下载相关课题的任务书和开题报告模板。8.教师最终把学生的开题报告进行提交，供管理员查看，保存。3.学生选择课题，并会实时显示选题信息。4.学生测试账号 142001 111。1.管理员添加教师信息和学生信息。5.教师可以提醒学生提交开题报告。
SSM项目
hadet的博客
03-22 129
文章目录1.准备工作2. 相关代码3. 编写基础配置文件4. 配置Spring的配置文件5. 具体功能的实现：5.1 查询功能： 1.准备工作 导入依赖 <!--Junit--> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <ver
基于SSM框架的Java企业级小项目源码，整合Vue.js与前端技术
03-25
本项目是一个基于SSM（Spring、SpringMVC、MyBatis）框架的企业级Java小项目，前端整合了Vue.js及其他现代前端技术。项目主要采用Java语言编写，同时辅以JavaScript、Vue、HTML和CSS等，以实现丰富的用户交互体验。 ...
SSM框架整合Java项目源码 - SpringMvc-05示例
03-25
项目概述：本项目命名为 SpringMvc-05 示例，主要采用 Java 语言开发，整合了 SSM（Spring、SpringMVC、MyBatis）框架。项目包含前端和后端两部分，前端使用了 JavaScript、CSS 和 HTML，后端则完全是 Java 实现。...
黑马程序员SSM整合学习项目demo
02-21
11. **测试**：启动Tomcat服务器，运行项目，通过浏览器进行功能测试，确保SSM整合正确无误。 这个“黑马程序员SSM整合学习项目demo”是一个实践性的学习资源，通过它，你可以深入了解SSM框架的整合过程，提升Java ...
基于ssm的网盘项目源码.zip
05-23
这为学习Java Web开发，尤其是SSM整合提供了实践案例，有助于提升对这些技术的理解和运用能力。 【标签】"源码软件"表明这是一个可供学习和参考的软件项目源代码，可以帮助开发者深入理解项目的结构和逻辑。"SSM"是...
java毕设 基于SSM框架的Java电商项目
01-27
基于SSM框架的Java电商项目 技术架构 （集群和分布式架构的区别） 工程搭建 （maven） SSM框架的整合 Mybatis逆向工程以及使用 日志的添加与使用 拦截器 后端功能 （系统的开发，图片系统，数据等等） 前端功能 ...
SSM项目模板
12-26
ssm项目已经配置好，，压缩文件里有说明文档，按文档操作就可以直接运行，想了解细节的可以看具体的项目配置，里面的注解写的很详细
Web前端开发的SSM框架集建设
11-01
SSM（Spring+SpringMVC+MyBatis）框架集由Spring、MyBatis两个开源框架整合而成（SpringMVC是Spring中的部分内容）。常作为数据源较简单的web项目的框架。
ssm 开发的商城前台页面
07-27
学生开发仅供参考
基于SSM+MYSQL写的javaWeb房屋租赁管理系统，包括系统前端和后台，页面美观，功能完善，非常高端的SSM源码
热门推荐
tianmingCode的博客
12-23 11万+
基于SSM+MYSQL写的javaWeb房屋租赁管理系统，包括系统前端和后台，页面美观，功能完善，非常高端的毕业设计 课程设计。 ​ 基于SSM+MYSQL写的javaWeb房屋租赁管理系统，包括系统前端和后台，页面美观，功能完善，非常高端的毕业设计 房屋租赁管理系统 技术SSM+MYSQL 用户测试登录账号 tianming tianming 也可以自己注册账号信息（建议在注册几个用户） 管理...
JavaWeb开发基于ssm的校园服务系统
pengxiang1998的博客
02-09 2967
利用Javaweb开发的一个校园服务系统，通过发布自己的任务并设置悬赏金额，有些类似于赏金猎人，在这里分享给大家，有需要可以联系我:2186527424： <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://m...
Javassm（Spring+SpringMVC+MyBatis）项目实例
h15835161250的博客
02-13 2904
一、项目介绍 使用了SSM（Spring+SpringMVC+MyBatis）框架，查询数据库中的数据并显示到页面上。末尾资料上有全部源码以供参考。效果如下： 二、项目准备 2.1 准备数据库 CREATE DATABASE /*!32312 IF NOT EXISTS*/`ssm` /*!40100 DEFAULT CHARACTER SET utf8 */; USE `ssm`; DROP TABLE IF EXISTS `departments`; CREATE TABLE `depart
Java SSM整合（入门必看，保姆教程）
Y_Y_9527的博客
04-07 1138
ssm整合相对于业务逻辑处理还是比较简单的，但是里面的相关配置文件较多，嫌麻烦的小伙伴可以直接copy，粘贴以后直接用。
Java框架——SSM整合
qq_51936245的博客
05-28 2227
AJAX初体验异步可理解为局部刷新，同步指需要按部就班地完成一整套流程AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。
尚硅谷SSM整合实战：快速开发CRUD功能
SSM整合是Java企业级开发中常见的技术栈，通过这三者的结合，开发者可以实现松散耦合的业务逻辑和数据访问层，提升开发效率。 首先，教程基于Maven构建项目，Maven作为项目管理和构建工具，能够管理项目的依赖关系...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值