<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
.main_div
{
margin: 20px auto;
text-align: center;
}
.pic_div
{
position: relative;
background-color: pink;
border: 1px dotted red;
margin: 10px auto;
width: 800px;
height: 600px;
}
img
{
width: 600px;
height: 400px;
}
</style>
<script type="text/javascript">
if (!document.getElementsByClassName) {
document.getElementsByClassName = function (className, element) {
var children = (element || document).getElementsByTagName('*');
var elements = new Array();
for (var i = ; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = ; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
};
}
function bigit() {
var image = document.getElementsByClassName("pic")[];
// var image = $("#tt");
image.style.height = image.height * 1.1 + 'px';
image.style.width = image.width * 1.1 + 'px';
}
function littleit() {
var image = document.getElementsByClassName("pic")[];
// var image = $("#tt");
image.style.height = image.height / 1.1 + 'px';
image.style.width = image.width / 1.1 + 'px';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="" class="main_div">
<p>
图片在一个区域里放大缩小</p>
<button onclick="bigit()">
图片放大</button>
<button onclick="littleit()">
图片缩小</button>
<div class="pic_div">
<img src="Image/2.png" class="pic" alt="" id="tt">
</div>
</div>
</form>
</body>
</html>