原生js，图片浏览器

最新推荐文章于 2024-01-08 11:16:39 发布
最新推荐文章于 2024-01-08 11:16:39 发布
阅读量389 收藏 1
点赞数 1
文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jesion_T/article/details/105047058
版权

话不多说，直接上代码！

<!DOCTYPE html>
<html>

<head>
	<title></title>
	<style>
		/*
	图片浏览器样式
*/

		.preview-ibox {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			cursor: pointer;
		}

		.anmins {
			transition: transform 1s ease, top 1s ease, left 1s ease;
			-moz-transition: -moz-transform 1s ease, top 1s ease, left 1s ease;
			-webkit-transition: -webkit-transform 1s ease, top 1s ease, left 1s ease;
			-o-transition: -o-transform 1s ease, top 1s ease, left 1s ease;
		}

		.preview-ibox-heard {
			position: absolute;
			top: -41px;
			width: 100%;
			background: rgba(0, 0, 0, 0.6);
			height: 40px;
			text-align: center;
			z-index: 999;
		}

		.preview-ibox-heard button {
			height: 60%;
			margin-left: 1.5%;
			margin-right: 1.5%;
			margin-top: 7px;
		}
	</style>

<body>
	<div id="preview" style="width: 500px; height: 400px;"></div>
	<script>
		var imgList = ['http://www.jq22.com/demo/vuelbt201912271700/img/t1.png', 'http://www.jq22.com/demo/vuelbt201912271700/img/t2.png', 'http://www.jq22.com/demo/vuelbt201912271700/img/t3.png', 'http://www.jq22.com/demo/vuelbt201912271700/img/t4.png', 'http://www.jq22.com/demo/vuelbt201912271700/img/t5.png'];
		imgPreview("preview", imgList);
		// 创建节点
		function dcCreate(dome) {
			var div = document.createElement("div");
			div.innerHTML = dome;
			return div.childNodes[0];
		}
		/*
			自定义图片浏览器
			preview: 图片浏览器的放置位置ID,需定义宽高
			imgList：图片url
				var imgList = [xxx/xxx.jpg, xxx/xxx.jpg, xxx/xxx.jpg];
				_.imgPreview("iboxId", imgList);
		*/
		//图片浏览器生成
		function imgPreview(iboxId, imgList) {
			if (imgList.length != 0) {
				var number = 1,
					deg = 0,
					left = 0;
				var imgWidth = document.getElementById(iboxId).clientWidth,
					imgHeight = document.getElementById(iboxId).clientHeight;
				var btnReduce = dcCreate("<button></button>"),
					btnAmplify = dcCreate("<button></button>"),
					btnLeftRevolve = dcCreate("<button></button>"),
					btnRigheRevolve = dcCreate("<button></button>"),
					btnNext = dcCreate("<button></button>"),
					butPerv = dcCreate("<button></button>"),
					butRestore = dcCreate("<button></button>");
				btnReduce.innerHTML = "缩小";
				btnReduce.addEventListener("click", function () {
					if (number > 0.1) {
						number = parseFloat((number - 0.1).toFixed(1));
						for (var i = 0; i < creDiv.childNodes.length; i++) {
							var img = creDiv.childNodes[i].childNodes[0];
							img.style.webkitTransform = "scale(" + number + ") rotate(" + deg + "deg)";
							img.style.MozTransform = "scale(" + number + ") rotate(" + deg + "deg)";
							img.style.msTransform = "scale(" + number + ") rotate(" + deg + "deg)";
							img.style.OTransform = "scale(" + number + ") rotate(" + deg + "deg)";
							img.style.transform = "scale(" + number + ") rotate(" + deg + "deg)"
						}
					}
				});
				btnAmplify.innerHTML = "放大";
				btnAmplify.addEventListener("click", function () {
					if (number < 10) {
						number = parseFloat((number + 0.1).toFixed(1));
						for (var i = 0; i < creDiv.childNodes.length; i++) {
							var img = creDiv.childNodes[i].childNodes[0];
							img.style.webkitTransform = "scale(" + number + ") rotate(" + deg + "deg)";
							img.style.MozTransform = "scale(" + number + ") rotate(" + deg + "deg)";
							img.style.msTransform = "scale(" + number + ") rotate(" + deg + "deg)";
							img.style.OTransform = "scale(" + number + ") rotate(" + deg + "deg)";
							img.style.transform = "scale(" + number + ") rotate(" + deg + "deg)"
						}
					}
				});
				btnLeftRevolve.innerHTML = "逆时针";
				btnLeftRevolve.addEventListener("click", function () {
					deg -= 10;
					for (var i = 0; i < creDiv.childNodes.length; i++) {
						var img = creDiv.childNodes[i].childNodes[0];
						img.style.webkitTransform = "scale(" + number + ") rotate(" + deg + "deg)";
						img.style.MozTransform = "scale(" + number + ") rotate(" + deg + "deg)";
						img.style.msTransform = "scale(" + number + ") rotate(" + deg + "deg)";
						img.style.OTransform = "scale(" + number + ") rotate(" + deg + "deg)";
						img.style.transform = "scale(" + number + ") rotate(" + deg + "deg)"
					}
				});
				btnRigheRevolve.innerHTML = "顺时针";
				btnRigheRevolve.addEventListener("click", function () {
					deg += 10;
					for (var i = 0; i < creDiv.childNodes.length; i++) {
						var img = creDiv.childNodes[i].childNodes[0];
						img.style.webkitTransform = "scale(" + number + ") rotate(" + deg + "deg)";
						img.style.MozTransform = "scale(" + number + ") rotate(" + deg + "deg)";
						img.style.msTransform = "scale(" + number + ") rotate(" + deg + "deg)";
						img.style.OTransform = "scale(" + number + ") rotate(" + deg + "deg)";
						img.style.transform = "scale(" + number + ") rotate(" + deg + "deg)"
					}
				});
				btnNext.innerHTML = "下一张";
				btnNext.addEventListener("click", function () {
					number = 1;
					deg = 0;
					for (var i = 0; i < creDiv.childNodes.length; i++) {
						var img = creDiv.childNodes[i].childNodes[0];
						img.style.webkitTransform = "scale(1) rotate(0)";
						img.style.MozTransform = "scale(1) rotate(0)";
						img.style.msTransform = "scale(1) rotate(0)";
						img.style.OTransform = "scale(1) rotate(0)";
						img.style.transform = "scale(1) rotate(0)";
						img.style.left = "0px";
						img.style.top = "0px"
					};
					var n = creIbox.lastChild.clientWidth - imgWidth;
					if (left < n) {
						left += imgWidth;
						creIbox.lastChild.style.webkitTransform = "translateX(-" + left + "px)";
						creIbox.lastChild.style.MozTransform = "translateX(-" + left + "px)";
						creIbox.lastChild.style.msTransform = "translateX(-" + left + "px)";
						creIbox.lastChild.style.OTransform = "translateX(-" + left + "px)";
						creIbox.lastChild.style.transform = "translateX(-" + left + "px)"
					}
				});
				butPerv.innerHTML = "上一张";
				butPerv.addEventListener("click", function () {
					number = 1;
					deg = 0;
					for (var i = 0; i < creDiv.childNodes.length; i++) {
						var img = creDiv.childNodes[i].childNodes[0];
						img.style.webkitTransform = "scale(1) rotate(0)";
						img.style.MozTransform = "scale(1) rotate(0)";
						img.style.msTransform = "scale(1) rotate(0)";
						img.style.OTransform = "scale(1) rotate(0)";
						img.style.transform = "scale(1) rotate(0)";
						img.style.left = "0px";
						img.style.top = "0px"
					};
					var n = creIbox.lastChild.clientWidth - imgWidth;
					if (left <= n && left > 0) {
						left -= imgWidth;
						creIbox.lastChild.style.webkitTransform = "translateX(-" + left + "px)";
						creIbox.lastChild.style.MozTransform = "translateX(-" + left + "px)";
						creIbox.lastChild.style.msTransform = "translateX(-" + left + "px)";
						creIbox.lastChild.style.OTransform = "translateX(-" + left + "px)";
						creIbox.lastChild.style.transform = "translateX(-" + left + "px)"
					}
				});
				butRestore.innerHTML = "还原";
				butRestore.addEventListener("click", function () {
					number = 1;
					deg = 0;
					for (var i = 0; i < creDiv.childNodes.length; i++) {
						var img = creDiv.childNodes[i].childNodes[0];
						img.style.webkitTransform = "scale(1) rotate(0)";
						img.style.MozTransform = "scale(1) rotate(0)";
						img.style.msTransform = "scale(1) rotate(0)";
						img.style.OTransform = "scale(1) rotate(0)";
						img.style.transform = "scale(1) rotate(0)";
						img.style.left = "0px";
						img.style.top = "0px"
					}
				});
				var btnIbox = dcCreate("<div class='preview-ibox-heard anmins'></div>");
				btnIbox.appendChild(butPerv);
				btnIbox.appendChild(btnAmplify);
				btnIbox.appendChild(btnLeftRevolve);
				btnIbox.appendChild(butRestore);
				btnIbox.appendChild(btnRigheRevolve);
				btnIbox.appendChild(btnReduce);
				btnIbox.appendChild(btnNext);
				var creIbox = dcCreate("<div class='preview-ibox'></div>");
				document.getElementById(iboxId).appendChild(creIbox);
				creIbox.appendChild(btnIbox);
				creIbox.addEventListener("mouseover", function () {
					var height = btnIbox.offsetHeight;
					btnIbox.style.webkitTransform = "translateY(" + height + "px)";
					btnIbox.style.msTransform = "translateY(" + height + "px)";
					btnIbox.style.MozTransform = "translateY(" + height + "px)";
					btnIbox.style.OTransform = "translateY(" + height + "px)";
					btnIbox.style.transform = "translateY(" + height + "px)"
				});
				creIbox.addEventListener("mouseout", function () {
					btnIbox.style.webkitTransform = "translateY(0px)";
					btnIbox.style.msTransform = "translateY(0px)";
					btnIbox.style.MozTransform = "translateY(0px)";
					btnIbox.style.OTransform = "translateY(0px)";
					btnIbox.style.transform = "translateY(0px)"
				});
				var creDiv = dcCreate("<div class='anmins' style='width:" + imgWidth * imgList.length + "px;height: " +
					imgHeight + "px'></div>");
				creIbox.appendChild(creDiv);
				for (key in imgList) {
					var imgDiv = dcCreate("<div style='width:" + imgWidth + "px;height:" + imgHeight +
						"px;float:left;overflow:hidden;position:relative;background:#8e8e8e'></div>");
					var creImg = dcCreate("<div class='anmins' style='width:100%;height:100%;background:url(" + imgList[key] +
						");background-size:100% 100%;position:absolute;'></div>");
					imgDiv.appendChild(creImg);
					creDiv.appendChild(imgDiv)
				};
				creIbox.addEventListener("mousedown", function (e) {
					var ev = e || event;
					var img = creDiv.childNodes[0].childNodes[0];
					var distanceX = ev.clientX - img.offsetLeft;
					var distanceY = ev.clientY - img.offsetTop;
					creIbox.onmousemove = function (ev) {
						var e = ev || win.event;
						for (var i = 0; i < creDiv.childNodes.length; i++) {
							var img = creDiv.childNodes[i].childNodes[0];
							img.style.left = e.clientX - distanceX + 'px';
							img.style.top = e.clientY - distanceY + 'px'
						}
					}
				});
				creIbox.addEventListener("mouseup", function () {
					creIbox.onmousemove = null
				})
			} else {
				throw "图片不存在！";
			}
		}
	</script>
</body>

</html>
JOJO丶
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片浏览器——JS
02-23
图片浏览器——JS
Js图片浏览器
qtvb1987的专栏
07-15 1724
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br />  <title>Js图片浏览器</title><br /> </head><br /> <body><br /> <bu
网页图片浏览器js实现
03-18
js实现网页中的图片浏览效果，效果就像qq相册一样。
一个简易的javascript网页图片浏览器
ness1981的博客
05-31 881
效果演示： http://sandbox.leigeber.com/slideshow/ 难点：响应鼠标事件实现滑动效果 项目目录： files文件夹下的几个文件夹都是放的图片，fullsize里面是大图，thumbs里面是小图。其中那个.png文件是测试用的图片 页面部分： &lt;html&gt;   &lt;head&gt;     &lt;link rel="stylesheet"...
js实现的图片浏览器
天水宇的博客
06-29 2501
一个网站必不可少的需要上传一些图片资源。在图片展示的过程中需要一个轻量的图片浏览器，并且包括常用的功能支持网页上图片的自动扫描加载，支持body内所有图片或者指定区域内所有图片的自动扫描加载。并且当图片发生添加或删除时可动态更新。同时支持对图片的操作处理包括鼠标滚轮放大缩小，图片旋转，图片的鼠标拖拽移动，图片下载，图片切换，全屏展示等功能 ,支持在一个网页实现多个实例。 本图片浏览器已开源 地址
原生js仿浏览器滚动条效果
10-20
在本文中，我们将探讨如何使用原生JavaScript来模拟浏览器的滚动条效果。通过自定义样式和交互，我们可以创建一个与浏览器内置滚动条相似但更具设计感的组件。首先，我们来看一下提供的代码示例。 ```html <!...
原生js获取浏览器窗口及元素宽高常用方法集合
11-29
窗口可视区域宽度： document.documentElement.clientWidth || document.body.clientWidth; 窗口可视区域高度： document.documentElement.clientHeight || document.body.clientHeight; 窗口可视区域宽度+边线和...
原生js图片轮播切换代码
06-24
本项目名为“原生js图片轮播切换代码”，它利用JavaScript的原生功能来实现图片的自动轮播以及通过标题和索引按钮进行手动控制。下面将详细介绍这个项目中的关键知识点。 1. **原生JavaScript**： - 原生...
基于原生JS实现图片裁剪
12-02
在本文中，我们将探讨如何使用原生JavaScript实现一个图片裁剪功能。首先，我们要了解两种主要的实现方式：HTML5的拖拽事件（drag drop）和传统的鼠标事件（mousedown、mousemove）。在这里，我们将采用第二种方法，...
原生js 图片查看器
asd53564967的博客
06-09 1384
原生js 图片查看器
JS制作的图片浏览器
01-25
JS制作的图片浏览器，学习asp的人可以看一下
JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
10-30
是一个网上比较常用的JS网页图片查看器，可控制图片放大、缩小、还原、移动位置、拖动等操作，并且兼容IE浏览器和FF火狐浏览器，可以用在图片网站、地图网站等
Demo图片浏览器
12-17
用于在嵌入式设备演示ui设计图效果，点击图片完成图片循环切换
图片浏览器DEMO
12-12
图片浏览器DEMO，实现图片拖拉跟换，缩放等功能。
js clearbox 图片浏览器
05-26
这是一个多功能的文档浏览器，支持多语言，我简单整理的一下，供大家使用
JavaScript学习（一）-图片浏览器
surpass0728的博客
09-12 312
重点：所有的事件一定要绑定在触发元素上每一件事件都一定要捆绑在一个函数进行事件的处理<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http
js功能之使用viewer图片查看器实现图片浏览效果（亲测简单好用）
最新发布
PowerYellow1的博客
01-08 3872
Viewer.js 是一款强大的图片查看器，像门户网站一般都会有各自的图片查看器，如果您正需要一款强大的图片查看器，也许 Viewer.js 是一个很好的选择。支持移动设备触摸事件支持响应式支持放大/缩小支持旋转（类似微博的图片旋转）支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式（可做屏保）支持缩略图支持标题显示支持多种自定义事件。
纯JS图片查看器
张_优秀的博客
09-30 598
目前支持：放大、缩小（含滚轮）、旋转、还原。
编写JavaScript程序实现：图像浏览器的功能
aigo_2021的博客
04-25 2430
编写JavaScript程序实现：图像浏览器的功能，如下图： 代码实现： <!doctype html> <html lang="en"> <head> <title>图片浏览器</title> </head> <body> <table> <tr> <td><input type="button" value="第一幅" id="1"><.
原生js清除浏览器缓存
03-31
在原生JavaScript中，可以通过以下几种方式清除浏览器缓存： 1. 使用location.reload()方法，强制浏览器重新加载页面，从而清除缓存。该方法可以接受一个布尔值参数，表示是否强制从服务器重新加载页面。如果省略参数或传递false，则浏览器可能会从缓存中加载页面。 ``` location.reload(true); ``` 2. 在URL后添加随机数参数，使浏览器强制重新加载页面。可以使用Date对象的getTime()方法获取当前时间的时间戳，并将其作为随机数参数添加到URL中。 ``` var random = new Date().getTime(); window.location.href = "http://example.com/?random=" + random; ``` 3. 清除浏览器缓存。可以通过JavaScript修改HTTP头信息，添加Cache-Control或Expires字段，从而告诉浏览器不要缓存页面。例如，以下代码将页面的Cache-Control设置为no-cache，从而禁用浏览器缓存。 ``` window.addEventListener("pageshow", function(event) { if (event.persisted) { // 页面从缓存中加载 window.location.reload(); } else { // 页面第一次加载 } }, false); // 禁用浏览器缓存 document.header("Cache-Control", "no-cache"); document.header("Expires", "-1"); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值