jsp中使用js随意移动图片位置效果

最新推荐文章于 2021-01-12 08:15:37 发布
VIP文章 最新推荐文章于 2021-01-12 08:15:37 发布
阅读量3.3k 收藏 1
点赞数
分类专栏： Javascript JSP 文章标签： jsp html function null java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinchun1234/article/details/4301139
版权

带边框的，只能在边框内移动

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
 var xx = 0, yy =0
</script>
<div id=woyingjie
 style="position: absolute; top: 0px; left: 0px; width: 1000px; height: 600px; background: green;"></div>
<img src="ys.gif" style='position:

最低0.47元/天 解锁文章
jinchun1234
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue+konva.js(未使用vue-konva)实现数据标注矩形和多边形功能
07-06
vue+konva.js(未使用vue-konva)实现数据标注矩形和多边形功能 矩形和多边形都可以移动调整，未编写删除功能。注释写的还需详细吧
Jsp中如何让图片在div中居中
07-24 1786
jsp中让图片在div中居中显示，如上图 例子： 复制代码 代码如下: //CSS文件 #bj{ width:200px; height:200px; border:3px solid red; text-align:center; vertical-align:middle; display:table-cell;
jsp中显示服务器上的图片，并使其居中显示
Guardian
05-25 5464
在WEB应用中是不能直接访问本地文件，通常都是放到工程之中。 但是如果项目上线，从服务器上获取文件，那就不得不用io流去进行传输读取了。 最近，碰到一个问题，就是虽然用io流将图片读取到jsp页面了，但是无法使其居中。 我的java代码写在jsp，然后没办法了，将代码放入action中，最终图片读取出来并且居中显示了，但是总是报：Stream Closed     io异常！ 最后
WEB程序设计-JSP结合CSS控制图片出现的位置
王洋的专栏
11-02 5212
jsp结合css控制图片的位置变化
java 不规则截取图片_java 根据坐标截取图片实例代码
weixin_29009881的博客
01-12 403
java 根据坐标截取图片实例代码：代码中有不是注释，很好看懂！package com.json.test;import java.awt.Rectangle;import java.awt.image.BufferedImage;import java.io.File;import java.io.FileInputStream;import java.io.IOException;import...
JSP中图片的设置
singerAngel
05-22 2513
现在开发项目，主要是以公司的新平台为基础，并进行代码的开发。特别是当添加图片就不是像平常设置一下图片的绝对位置即可，而是对于不同的项目名称，动态的定位。       在项目中，对于需要引用图片路径，方式如下：       在JSP中获取到项目名称，这样可以防止将项目名称写死，不利于修改。              //对图片添加路径，在JSP界面最顶层定义变量webApp      
jsp 中div居中_Jsp中图片在div中居中的方法
weixin_29505163的博客
12-31 1970
Jsp中如何让图片在div中居中？相信这个简单的小问题难倒了不少朋友们，那么现在爱站小编就为大家介绍Jsp中图片在div中居中的方法。感兴趣的朋友们来看看吧。复制代码 代码如下://CSS文件#bj{width:200px;height:200px;border:3px solid red;text-align:center;vertical-align:middle;display:table-...
HTML中怎么设置图片的位置和大小
热门推荐
weixin_34310785的博客
01-28 2万+
其他的也不多废话了直接上代码： <html> <head> <style type="text/css"> <! 设置图片的属性> img{ position:absolute; <! 绝对位移> left:300px; top:150px;<! wid...
jsp图片轮播html
07-16
jsp 生成的html5图片轮播，已测试。支持图片预览
jsp 图片拖拽排序,img src自动改变
01-26
jsp,java,图片拖拽改变,src改变
JS实现的相册图片左右滚动完整实例
11-29
本文实例讲述了JS实现的相册图片左右滚动效果。分享给大家供大家参考，具体如下： 执行左移右移函数： var $get = function(id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } v
JavaScript网页特效范例宝典源码
09-04
实例297 在JSP中利用Word自动打印指定格式的会议记录 468 实例298 在ASP中利用Word自动打印指定格式的会议记录 470 实例299 在PHP中调用Word自动打印指定格式的会议记录 472 11.3 利用Excel打印报表 474 实例300 将...
Lerx 网站内容管理系统 v5.5.zip
07-03
在用户确定上传后，网站后台会对用户的模板、使用到的资源文件（包括图片、Js文件、CSS文件等）进行打包压缩，并进行静默上传。用户在模板市场获取模板时，亦是静默下载，完成后网站后台会自动解压到指定位置并自动...
java源码包2
04-20
　Java非对称加密源程序代码实例，本例中使用RSA加密技术，定义加密算法可用 DES,DESede,Blowfish等。 　设定字符串为“张三，你好，我是李四” 　产生张三的密钥对(keyPairZhang) 　张三生成公钥(publicKeyZhang...
java源码包---java 源码 大量 实例
04-18
　Java非对称加密源程序代码实例，本例中使用RSA加密技术，定义加密算法可用 DES,DESede,Blowfish等。 　设定字符串为“张三，你好，我是李四” 　产生张三的密钥对(keyPairZhang) 　张三生成公钥(publicKeyZhang...
jsp中JFreeChart柱状图的详细使用
Shiring-Spring
07-03 8039
 首先导入包JFreeChart和JCommon其次配置web.xml调用的现成的显示类           DisplayChart          org.jfree.chart.servlet.DisplayChart                    DisplayChart          /servlet/DisplayChart     
jsp树形结构
Shiring-Spring
07-08 6230
Dtree生成树形结构，很方便，很适用。 下载dtree.zip包请到下面地址去下载http://jinchun1223.javaeye.com/admin/blogs/421817 String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getSe
jsp中鼠标移动到图片上图片放大
最新发布
05-25
在JSP中实现鼠标移动到图片上图片放大的效果，可以通过JavaScript来实现。具体实现步骤如下： 1. 在JSP页面中，添加一个img标签，用于显示图片。 2. 为img标签添加一个onmouseover事件，当鼠标移动到图片上时触发。 3. 在onmouseover事件中，创建一个div元素，用于显示放大后的图片。 4. 设置div元素的样式，包括宽度、高度、背景色等。 5. 将放大后的图片作为div元素的背景图片，并设置背景图片的位置。 6. 将div元素添加到页面中，显示放大后的图片。 7. 当鼠标移开图片时，删除div元素，将页面恢复原状。 下面是一个简单的示例代码： ```html <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Zoom</title> <style> /* 放大后的图片的样式 */ .zoom { position: absolute; top: 0; left: 100%; width: 200px; height: 200px; background-color: #fff; border: 1px solid #ccc; background-repeat: no-repeat; background-size: contain; z-index: 9999; } </style> <script> function zoomIn(event, imgSrc) { // 创建一个div元素，用于显示放大后的图片 var zoomDiv = document.createElement("div"); zoomDiv.className = "zoom"; // 设置div元素的样式 zoomDiv.style.top = event.pageY + "px"; zoomDiv.style.left = event.pageX + "px"; // 将放大后的图片作为div元素的背景图片 zoomDiv.style.backgroundImage = "url(" + imgSrc + ")"; // 将div元素添加到页面中 document.body.appendChild(zoomDiv); } function zoomOut() { // 删除放大后的图片的div元素 var zoomDiv = document.getElementsByClassName("zoom")[0]; if (zoomDiv) { document.body.removeChild(zoomDiv); } } </script> </head> <body> <!-- 显示原始图片 --> <img src="your_image_path" onmouseover="zoomIn(event, this.src)" onmouseout="zoomOut()"> </body> </html> ``` 在上面的代码中，当鼠标移动到图片上时，会调用zoomIn函数，创建一个div元素用于显示放大后的图片，并将该div元素添加到页面中。在zoomIn函数中，使用event对象获取鼠标的位置，将div元素的位置设置为鼠标的位置，并将放大后的图片作为div元素的背景图片。 当鼠标移开图片时，会调用zoomOut函数，删除放大后的图片的div元素，将页面恢复原状。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值