<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery图片放大缩小旋转预览代码 - 更多源码WW.96flw.COM</title>
<style>
body{background-color: #292929}
.grab { /* 抓抓抓 */
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.view-big {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.2);
}
.view-big .vb-btns .close {
position: absolute;
width: 64px;
height: 64px;
border-radius: 50%;
top: 20px;
right: 20px;
background-color: rgba(0, 0, 0, 0.6);
z-index: 20;
cursor: pointer;
}
.view-big .vb-btns .close .iconshanchu {
font-size: 25px;
width: 25px;
height: 25px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
color: #fff;
}
.view-big .vb-btn {
position: absolute;
width: 64px;
height: 64px;
border-radius: 50%;
top: 0;
bottom: 0;
margin: auto;
z-index: 20;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.view-big .vb-btn.left {
left: 20px;
}
.view-big .vb-btn.left::before {
content: '';
position: absolute;
width: 50%;
height: 50%;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'https%3A%2F%2Fptop.only.wip.la%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") no-repeat center;
z-index: 2;
}
.view-big .vb-btn.right {
right: 20px;
}
.view-big .vb-btn.right::before {
content: '';
position: absolute;
width: 50%;
height: 50%;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'https%3A%2F%2Fptop.only.wip.la%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") no-repeat center;
}
.view-big .vb-btn.vb-btn-disabled {
background-color: rgba(0, 0, 0, 0.2);
}
.view-big .vb-operate {
width: 316px;
height: 60px;
position: absolute;
left: 0;
right: 0;
top: 90%;
margin: auto;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
display: flex;
}
.view-big .vb-operate .vb-ope {
width: 25%;
height: 100%;
cursor: pointer;
}
.view-big .vb-operate .down {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAB4CAMAAAD7aI8VAAABAlBMVEUAAAA5vYs5vYs5vYs5vYv///85vYs5vYv///85vYv///////85vYv///////85vYs5vYv///85vYv///////85vYv///////85vYs5vYv///////////////////////85vYs5vYs5vYv///85vYs5vYs5vYs5vYv///////////////85vYs5vYv///85vYv///85vYv///85vYv///////85vYv///85vYs5vYv///85vYv///////////////////85vYv///85vYv///////////85vYv///85vYv///85vYv///85vYs5vYv///////////85vYv///////85vYv4jloGAAAAVHRSTlMA6BAVCvf3QPr6w7+UQBHCJ+7t54CACUsuBscn6hcUBr7MxpmZOdXQlXYdh4dMLx0N8dVr0cvIra133t3yzjw3A+TjGaCSblgsoGdKUlJ1Vlkkp4/wCp74AAAF10lEQVR42uyZQWurQBRG70YQRUEUBTVxkY0aCPJICYQ0LdKEEApt6ff/f8vL85FMTabc0XSgizmreuG0nBim5oYMBoPBYDAYDAaDwWCQ8bHaQMJm9UGqFMkuDa3N2tklBQ0jq9zQtkO3ysRMr5sF+IZA8ff4US6kPPJJHc8RpuOJuU53BXvvA/0h4O9trEiF9xD4M/cmRfzhRUsgfyNF4hkQlEldNFlSBsAsJtLvbrAnug0mqrAhnucScLfieusC5TOdqDjVT2HN/cvV3EJ6uVJxo+Z81UQDXMCXB/uAQu8K1rE/qiysTsXvnB2nWB++Dg5rpOI+se7i62Ch7gLUC07d3pBhh+DpevYUYEeezdkztHV/UreYEU/nrhlXPRgYEPwGS/SKYgtRwNneSZWIHnWw7oJx9QT7OY6y+REAZzuYn398eDj/NIdDAsYVCFdzcARXOp9YbPACQdP7kx1NgAV1MK4vefWFqyu4yLGVzZuUv8MRSroNphIRsUR4kY1fEGkOTrCUjQsXfLCLRBacwCUWF6+y8Stczaf0DpH8lVYIDlHLgmuEJGBcgbIrbVMOdqTn4hwqwTaK7rzChe7kKmATi42YzrJQKYatOTjHhMZio7kjuJEFN0OC+6fPVgRzd2ksITLuLc27fbIBb+kQV4Q/EPybD63kqrhNfuAt/Zv/LUkYe2gJND545HFvIFy9wTvmJdX4aFnd9WgpQ/XBYzQerMP17GDBG+suGJfPGv9oqfwRb9Kf1GvMxrqTVrgagpkPD+Q4JFBeAFh4VF8AtP0FgC1cDcHcx8M92oZYpjcrHvwR9413q/jSX/1zp5qC+QXA1sLboEVcUXeLuJelKFZx81kypZM7yzt3OdUfTCXym+JtgM9xq9bpoyge7C4V7zHgy8bjl3jHbok3apnOFDPuUrjcmlbC2DWt53Rr2jEwxSyimF/E344HLOLz8yJ+8n8R/0pEv7hY21ct44sfaXSxipt992VaNujLtNy2WuczeaZ7mabOXa7BYDAYDAaDwWAwGAyGv+3ZQWurQBQF4DtGFEEwCILujGi7SRARQkJWIYtQQrMonP//V15eH719mil3NB3axXyrpHBqTpSJc3Ucx3Ecx3Ecx3EMLXcdNLrdkkwVm7hSQXdI4ksx9ej7UkWRKvd8NNvZZYovpIb/x8sUmMo8MhcmYElIzGZ2h6j3ABoAvD7CjkycFfC0Dk+FvwyzZ0CdyZBfA2m8aW/JTZwCtU9kP9uhJ7ovTLRHZ5KPh99vkwAx/XWVkl6FYO3xu3WAit+ZZDOf22cTsoCnL+wBRhdI0NPANcAbEZ2ltL/FIaf/5AdsuYO9LECDwlUy+KMgRtrQSJMipjCS0jWOLQ20R9RCiLMHIWteGJhQ+IygoTtNgKyT0iFHB0Fh9eFsLmTtFPYUetLoAUjpBOuPl6vVx6s1EmJSlnHWeuHsi2MsArFwjtQbHPKdlyInUY6Os5+8DrnlwoVCo19S5DOcIab7whQjI1GGF9J4QWa58AbPpFGUkAuX2OgKb1CSqMQrabyitLNKS6fjDQaFFVpd4RaKmJRl5lltN+PClXZdXMOkcISCblZgK7opEJEogk8c5ij5iCwXVjjRXBH8Hy08XH0aLiyepbkUlsIlLWbHlhMuaYUR9Q2Ff/OidRk1Pl6+4ZL+zT9LGrMXLWbxxiP1iQ2yFgvLp8PmreX+oVtLnck3HjJ5A5Cbbx6WQtZK4SJFQ7PVOJxo4HRAbZxdjLKTtod68zcPlCRzNvEBVuYDgOMwG3HWRmF5e3j0SLTYjkc8ePo8b3L26nP/K2ctFJYHAGGA86RBXNG+D+JenvlTG2VVfVlQ0V5qdcs+cdZCYWHE0yEmM2EFVoW04MYWs4BHGvOHeH2A3dxhunljISuMaTUmjWmb4Xg8Lmgm88ZCVhrE0505g/jTv0H8KxH94sbf8aglHT1qebDx6vGs/YdpWxUFx0p+mCZbbKuHso7jOI7jOI7jOI5z7w9/6hQ8Yaht4AAAAABJRU5ErkJggg==') no-repeat 10px 0;
}
.view-big .vb-operate .down:hover {
background-position: 10px -60px;
}
.view-big .vb-operate .rotate {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAB4CAMAAAD7aI8VAAABAlBMVEUAAAA5vYs5vYs5vYs5vYv///85vYs5vYv///85vYv///////85vYv///////85vYs5vYv///85vYv///////85vYv///////85vYs5vYv///////////////////////85vYs5vYs5vYv///85vYs5vYs5vYs5vYv///////////////85vYs5vYv///85vYv///85vYv///85vYv///////85vYv///85vYs5vYv///85vYv///////////////////85vYv///85vYv///////////85vYv///85vYv///85vYv///85vYs5vYv///////////85vYv///////85vYv4jloGAAAAVHRSTlMA6BAVCvf3QPr6w7+UQBHCJ+7t54CACUsuBscn6hcUBr7MxpmZOdXQlXYdh4dMLx0N8dVr0cvIra133t3yzjw3A+TjGaCSblgsoGdKUlJ1Vlkkp4/wCp74AAAF10lEQVR42uyZQWurQBRG70YQRUEUBTVxkY0aCPJICYQ0LdKEEApt6ff/f8vL85FMTabc0XSgizmreuG0nBim5oYMBoPBYDAYDAaDwWCQ8bHaQMJm9UGqFMkuDa3N2tklBQ0jq9zQtkO3ysRMr5sF+IZA8ff4US6kPPJJHc8RpuOJuU53BXvvA/0h4O9trEiF9xD4M/cmRfzhRUsgfyNF4hkQlEldNFlSBsAsJtLvbrAnug0mqrAhnucScLfieusC5TOdqDjVT2HN/cvV3EJ6uVJxo+Z81UQDXMCXB/uAQu8K1rE/qiysTsXvnB2nWB++Dg5rpOI+se7i62Ch7gLUC07d3pBhh+DpevYUYEeezdkztHV/UreYEU/nrhlXPRgYEPwGS/SKYgtRwNneSZWIHnWw7oJx9QT7OY6y+REAZzuYn398eDj/NIdDAsYVCFdzcARXOp9YbPACQdP7kx1NgAV1MK4vefWFqyu4yLGVzZuUv8MRSroNphIRsUR4kY1fEGkOTrCUjQsXfLCLRBacwCUWF6+y8Stczaf0DpH8lVYIDlHLgmuEJGBcgbIrbVMOdqTn4hwqwTaK7rzChe7kKmATi42YzrJQKYatOTjHhMZio7kjuJEFN0OC+6fPVgRzd2ksITLuLc27fbIBb+kQV4Q/EPybD63kqrhNfuAt/Zv/LUkYe2gJND545HFvIFy9wTvmJdX4aFnd9WgpQ/XBYzQerMP17GDBG+suGJfPGv9oqfwRb9Kf1GvMxrqTVrgagpkPD+Q4JFBeAFh4VF8AtP0FgC1cDcHcx8M92oZYpjcrHvwR9413q/jSX/1zp5qC+QXA1sLboEVcUXeLuJelKFZx81kypZM7yzt3OdUfTCXym+JtgM9xq9bpoyge7C4V7zHgy8bjl3jHbok3apnOFDPuUrjcmlbC2DWt53Rr2jEwxSyimF/E344HLOLz8yJ+8n8R/0pEv7hY21ct44sfaXSxipt992VaNujLtNy2WuczeaZ7mabOXa7BYDAYDAaDwWAwGAyGv+3ZQWurQBQF4DtGFEEwCILujGi7SRARQkJWIYtQQrMonP//V15eH719mil3NB3axXyrpHBqTpSJc3Ucx3Ecx3Ecx3EMLXcdNLrdkkwVm7hSQXdI4ksx9ej7UkWRKvd8NNvZZYovpIb/x8sUmMo8MhcmYElIzGZ2h6j3ABoAvD7CjkycFfC0Dk+FvwyzZ0CdyZBfA2m8aW/JTZwCtU9kP9uhJ7ovTLRHZ5KPh99vkwAx/XWVkl6FYO3xu3WAit+ZZDOf22cTsoCnL+wBRhdI0NPANcAbEZ2ltL/FIaf/5AdsuYO9LECDwlUy+KMgRtrQSJMipjCS0jWOLQ20R9RCiLMHIWteGJhQ+IygoTtNgKyT0iFHB0Fh9eFsLmTtFPYUetLoAUjpBOuPl6vVx6s1EmJSlnHWeuHsi2MsArFwjtQbHPKdlyInUY6Os5+8DrnlwoVCo19S5DOcIab7whQjI1GGF9J4QWa58AbPpFGUkAuX2OgKb1CSqMQrabyitLNKS6fjDQaFFVpd4RaKmJRl5lltN+PClXZdXMOkcISCblZgK7opEJEogk8c5ij5iCwXVjjRXBH8Hy08XH0aLiyepbkUlsIlLWbHlhMuaYUR9Q2Ff/OidRk1Pl6+4ZL+zT9LGrMXLWbxxiP1iQ2yFgvLp8PmreX+oVtLnck3HjJ5A5Cbbx6WQtZK4SJFQ7PVOJxo4HRAbZxdjLKTtod68zcPlCRzNvEBVuYDgOMwG3HWRmF5e3j0SLTYjkc8ePo8b3L26nP/K2ctFJYHAGGA86RBXNG+D+JenvlTG2VVfVlQ0V5qdcs+cdZCYWHE0yEmM2EFVoW04MYWs4BHGvOHeH2A3dxhunljISuMaTUmjWmb4Xg8Lmgm88ZCVhrE0505g/jTv0H8KxH94sbf8aglHT1qebDx6vGs/YdpWxUFx0p+mCZbbKuHso7jOI7jOI7jOI5z7w9/6hQ8Yaht4AAAAABJRU5ErkJggg==') no-repeat -50px 0;
}
.view-big .vb-operate .rotate:hover {
background-positi
jQuery图片放大缩小旋转预览代码.zip （7个子文件） 
jiaoben8124 js 
jquery.min.js 94KB img 
2.jpg 110KB 1.jpg 123KB 5.jpg 124KB 3.jpg 99KB 4.jpg 220KB
index.html 26KB资源评论
码云笔记
- 粉丝: 3w+
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
