利用idea软件 js技术实现图片放大功能

第一步准备图片

将要放大图片放大 web 下

第二步具体实现代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--引入 c 标签库-->
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<!--引入 fmt 子标签库-->
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt" %>
<%String path = request.getContextPath ();String basePath = request.getScheme () + "://" + request.getServerName () + ":" + request.getServerPort () + path + "/";
%>
<html>
<head><title>放大镜功能</title><style type="text/css">#a {width: 120px;height: 171px;}#b {/* div 之间的距离 */margin-top: 5px;width: 120px;height: 171px;}#zoom {width: 240px;height: 342px;/* display设置元素的隐藏或者显示*/display: none;/*   background-repeat设置图片是否平铺*/background-repeat: no-repeat;}</style><script type="text/javascript">function divIn(event) {var img = event.target;div=img.parentNode;div.style.cursor = "pointer";/*通过标签 的id属性 返回 标签对象*/var zoom = document.getElementById("zoom");var zoomimg = document.getElementById("img");zoomimg.src = img.src;/*block 块级元素显示*/zoom.style.display = "block";/*  绝对定位*/zoom.style.position = "absolute";zoom.style.top = event.clientX+20;zoom.style.left = event.clientY+20;zoom.style.zIndex = 2;}function divOut(event) {/*获取事件源*/var duiv = event.target;div.style.cursor = null;var zoom = document.getElementById("zoom");zoom.style.display = "none";}</script>
</head>
<body><%--onmouseout 鼠标移除事件onmouseover 鼠标覆盖事件onmousemove 鼠标在图片上移动事件--%>
<div id="a" onmouseout="divOut(event)" onmouseover="divIn(event)" onmousemove="divIn(event)"><img src="${pageContext.request.contextPath}/6.jpg">
</div><div id="b" onmouseout="divOut(event)" onmousemove="divIn(event)" onmouseover="divIn(event)"><img src="/ems1.0/16.jpg">
</div>
<div id="zoom"><img id="img" width="240"/>
</div>
</body>
</html>

js技术实现图片放大镜功能相关推荐

html中实现添加水印的功能,JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...
vue中如何实现图片放大镜功能
vue中图片放大镜功能 1.在vue项目中不可避免的会做一个图片放大镜的弄能(例如.商城.店铺等),今天同事问了这个功能恰好以前写过,因此记录一下. 2.废话不多说直接上代码: 父组件中: <t ...
JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...
html借助JS简单实现图片闪烁功能
图片闪烁功能: 点击按钮,实现图片闪烁效果如图: 代码如下: <!DOCTYPE html> <html><head><meta charset=&quo ...
js 实现淘宝放大镜功能
先来看看效果: 写放大镜之前我们先来了解一下定位:通常子绝父相 (父元素相对定位,子元素绝对定位) 元素的定位方式:1.static 静态定位,所有元素,不添加任何定位方式时的默认状态2.relati ...
某东商品详情页图片放大镜功能
首先看看某东的效果: 这个案例可以分为三个功能模块: 鼠标经过小图片的盒子,遮罩层和大图片盒子显示,离开隐藏遮罩层和大图片盒子. 遮罩层跟随鼠标移动. 移动遮罩层,大图片跟随移动. 要实现这个案例,我 ...
5.21工作记录（修改页面跳转，去掉多余的js；增加图片清除功能）
导出的war包给测试却发现还是以前的效果,虽然代码都没有问题,而且本地我这里是没有任何问题但是改了的东西在那边未生效网上说是因为缓存没清干净,然后我去删了本地的全部代码重新导入删项目重新导的时候发 ...
JS -- base64实现图片下载功能
思路前端拿到处理好的 base64 数据,创建 a 下载图片代码: const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhE ...
Jquery的jqzoom插件的使用（图片放大镜）
今天学习一下,图片放大镜功能,需要使用插件JQzoom 引入文件 <script type="text/javascript" src="js/jquery.min ...

js技术实现图片放大镜功能

利用idea软件 js技术实现图片放大功能

第一步准备图片

第二步具体实现代码

js技术实现图片放大镜功能相关推荐

最新文章

热门文章

js技术实现图片放大镜功能

利用idea软件 js技术实现图片放大功能

第一步 准备图片

第二步 具体实现代码

js技术实现图片放大镜功能相关推荐

最新文章

热门文章

第一步准备图片

第二步具体实现代码