Jquery Image Zoom and Draggable Test
戴博
别人做的很好，不知如何做既可以拖又可以放大的东西，逐渐摸索中，此为第一版本
<!DOCTYPE html>
<html lang="en"><head>
<title>Image Zoom Tour with jQuery</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Image Zoom Tour with jQuery" />
<meta name="keywords" content="jquery, zoom, tour, images, zoom in, zoom out, plugin, css3" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<noscript>
<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
</noscript>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css' />
</head>
<body>
<table width="100%">
<tr>
<td colspan="4">
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td colspan="1" style="background-color: White;" align="left" height="60" width="10">
</td>
<td colspan="3" class="landingLeftBack5" height="30" width="773">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="1" width="22">
</td>
<td colspan="1" valign="top" width="374">
<table border="0" cellpadding="0" cellspacing="0" width="374">
<tbody><tr>
<td align="center" height="222px" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td height="20px">
</td>
</tr>
<tr>
<td class="Font14" align="left">
<font class="gallaryContentTitle">
Genova, <a href="../hardwood-flooring/Genova/Hickory/Bologna5-flooring.aspx" class="promoLinkGallery">Bologna</a> 5"(Hickory)
</font>
</td>
</tr>
<tr>
<td height="15px">
</td>
</tr>
<tr>
<td class="ContentLanding" align="left" valign="top">
ttt
</td>
</tr>
<tr>
<td height="15px">
</td>
</tr>
<tr>
<td class="gallaryContentTitle" align="left" valign="top">
tail
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
<td colspan="1" width="22">
</td>
<td colspan="1" valign="top" width="364">
<img id="Image9" alt="wood flooring" title="wood flooring" src="../Images/ style="width:365px;border-width:0px;">
</td>
</tr>
<tr>
<td colspan="4" width="418">
<div id="mainImage" style="margin-top: 15px; top: 32px; height: auto;">
<div id="draggable">
<img id="mainViewerImage" src="http://s7d4.scene7.com/is/image/roomandboard/anson_826455_13e?$truvu0$&wid=310" />
</div>
</div>
<script>
/*
$(function() {
$("#draggable")
.resizable()
.draggable();
//$("#draggable").draggable();
});
*/
var clickTimes = -1;
var width = 0;
var height = 0;
$("#mainViewerImage").click(function() {
if (clickTimes == -1) {
width = $(this).width();
height = $(this).height();
clickTimes = 0;
}
if (clickTimes < 2) {
//$("#draggable").draggable('disable');
$(this).width($(this).width() + 200);
$(this).height($(this).height() + 200);
$(this).css({
'margin': '0',
'cursor': 'url(http://www.roomandboard.com/rnb/img/cur/mag_in.cur),point'
});
clickTimes++;
if (clickTimes == 2) {
$(this).css({
'margin': '0',
'cursor': 'move'
});
}
else {
}
}
else {
$("#draggable").draggable();
$(this).css({
'margin': '0',
'cursor': 'url(http://www.roomandboard.com/rnb/img/cur/mag_in.cur),point'
});
$(this).width(width);
$(this).height(height);
clickTimes = 0;
}
});
</script>
<table width="411">
<tbody><tr>
<td colspan="1" style="background-color: White;" align="left" height="60" width="13">
</td>
<td width="127">
<img id="mainViewerImage" src="images/gallary15b.jpg" style="height:110px;width:127px;border-width:0px;">
</td>
<td height="4">
</td>
<td width="126">
<img id="imggallary19b" src="images/gallary15b.jpg" style="height:110px;width:127px;border-width:0px;">
</td>
<td height="4">
</td>
<td width="126">
</td>
</tr>
<tr>
<td colspan="6" height="7">
</td>
</tr>
<tr>
<td colspan="1" width="10">
</td>
<td colspan="5" class="gallaryContentTitle" height="10">
Rollover Image to Enlarge
</td>
</tr>
<tr>
<td colspan="5" height="7">
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
</body>
</html>
类似资料：