我试图通过两个放大缩小按钮(+)和(-)来放大和缩小图像。问题是,“放大”在图像达到全屏大小(宽度100%)时就停止了。我需要将图像缩放得比屏幕大小更大。只是不知道如何做到这一点。我是Javascript的初学者,希望有人能够帮助我解决这个小问题。
我想知道是否有任何简单的放大/缩小/重置插件可以与放大缩小按钮一起使用?获取图像也会很酷。
再次感谢!
我想知道是否有任何简单的放大/缩小/重置插件可以与放大缩小按钮一起使用?获取图像也会很酷。
再次感谢!
function zoomin(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 2500) return false;
else{
myImg.style.width = (currWidth + 100) + "px";
}
}
function zoomout(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 100) return false;
else{
myImg.style.width = (currWidth - 100) + "px";
}
}
*body {
margin: 0;
}
#navbar {
overflow: hidden;
background-color: #099;
position: fixed;
top: 0;
width: 100%;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
#navbar a {
float: left;
display: block;
color: #666;
text-align: center;
padding-right: 20px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-top: 30px;
}
.main img {
max-width: 100%;
height: auto;
}
.button {
width: 300px;
height: 60px;
}
</head>
<body>
<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>
<div class="main">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>
" />
.main img { max-width: 100%; }
。 - 3rdthemagical