预览图片 支持放大缩小,旋转等功能

news/2025/2/21 10:43:46/

一开始使用layer实现预览效果,但是没有放大跟缩小功能,于是就又找了下,发现jquery下有一款viewer.js可以很好的预览图片和各种功能。

包括图片的放大缩小旋转,可以很好的查看。

下面贴下jsp的



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>查看图片</title>
<link rel="stylesheet" href="viwPic/viewer.min.css" />
<script type="text/javascript" src="viwPic/jquery-1.11.0.min.js"></script>
<script src="viwPic/viewer.min.js"></script>
<script src="viwPic/main.js"></script>
<style type="text/css">
#test {
padding: 5px;
height: 326px;
}
#test .docs-pictures {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#test .docs-pictures li {
float: left;
/*width: 33.3%;
                height: 33.3%;*/
margin: 0 -1px -1px 0;
overflow: hidden;
}
#test .docs-pictures li img {
width: 216px;
}
#imgs {
width: 800px;
height: 326px;
border: 1px solid blue;
position: relative;
margin: -1px 0px -1px 0;   /*boder变细神技*/
}

#imgs img {
position: relative;
width: 416px;
display: block;
float: left;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="test">
<ul class="docs-pictures">
       
        <li><img data-original="pic.png" src="pic.png"></li>
        <li><img data-original="pic2.jpg" src="pic2.jpg"></li>
<li><img data-original="pic.png" src="pic.png"></li>
</ul>
</div>

</body>


</html>

demo下载地址;https://download.csdn.net/download/u014094560/10362639


http://www.ppmy.cn/news/424248.html

相关文章

图片点击放大及切换图片

1. 编写html <div class"mask" id"mask"></div> <div class"img-container" id"img-container"><div class"preview" id"preview"></div><div class"left" id"…

如何把图片分辨率调低?如何调整照片的分辨率?

图像分辨率一般是指图像单位英寸内所包含的像素点数&#xff0c;一般用DPI表示单位&#xff0c;一张图像的文件大小一般是由图像的分辨率和尺寸共同决定的&#xff0c;分辨率与尺寸越大&#xff0c;图像越清晰&#xff0c;但是同样所需占用的空间就越大。在了解了关于图片分辨率…

照片放大啊

Description wth 的电脑里存储了一些老照片&#xff0c;虽然这些照片有些模糊&#xff0c;但是 wth 很喜欢它们&#xff0c;因为这些照片都是儿时的回忆。现在他上了大学&#xff0c;他想用学到的编程知识来将这些模糊的照片放大&#xff0c;可是他很菜&#xff0c;尝试了两年都…

easyui04(datagrid数据查询)

一.datagrid数据表格 <script type"text/javascript"> $(function(){ //加载数据 $(#myTable).datagrid({ url:ctx/goods.do,//请求路径 pagination:true,//显示分页栏 fitColumns:true,//让列…

Chrome 扩展程序——Imagus:图片放大预览工具

主要介绍 Imagus 的功能及应用&#xff0c;Imagus 是一款简单实用的图片放大预览工具。 主要功能 Imagus 的功能非常单一&#xff0c;就是在浏览网页时&#xff0c;当鼠标悬停到一张图片后&#xff0c;会自动放大图片&#xff0c;进行预览&#xff0c;这在浏览技术博客&#…

亲测好用的PS图片无损放大插件:Blow Up 3 for Mac

Alien Skin Blow Up 3 for Mac是一款运行在Mac平台上的PS图片无损放大滤镜插件&#xff0c;这款alienskin滤镜插件适用于ps和lr&#xff0c;使用alien skin blow up 3 for mac后&#xff0c;在放大图片的同时也能保持图片的清晰度&#xff0c;质量不变&#xff0c;非常好用。 A…

鼠标移到图片上,图片放大

.Nei1 img{ width: 122px; height: 89.6px; float: left; padding: 2px 2px; transition: all 0.6s; } .Nei1 img:hover{ transform: scale(3.3); } 例&#xff1a;将鼠标悬停在一…

点击图片放大预览,遮罩屏幕放大展示

功能说明&#xff1a;将图片方格展示&#xff0c;点击某张图片可在当前页面进行预览&#xff0c;点击遮罩屏幕&#xff0c;并且方法显示&#xff0c;点击右上角x&#xff0c;放大的图片消失。 效果图如下&#xff1a; 1、引入fancy.js和fancy.css 路径根据项目实际路径改写&a…