...在缩放偏移的时候小图相对大图的位置不变该怎么做
发布网友
共1个回答
热心网友
其实这很容易做到，主要是使用position+top+left等进行定位就可以了，
示例代码如下：（我把图片作为背景实现的）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>大图和小图</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{height:100%;}
#main{position:relative;margin:0 auto; background-image:url(imgs/datu1.jpg); background-repeat:no-repeat; width:960px;height:600px;}
/* 下面使用百分比这种相对数值来实现与其父元素宽高比的绑定 */
.xiaotu{position:absolute;width:20%;height:20%;}
.tf01{top:10px;left:10px;background-image:url(imgs/xiaotu01.jpg); background-repeat:no-repeat;}
.tf02{top:10px;right:10px;background-image:url(imgs/xiaotu02.jpg); background-repeat:no-repeat;}
.tf03{bottom:10px;right:10px;background-image:url(imgs/xiaotu03.jpg); background-repeat:no-repeat;}
.tf04{bottom:10px;left:10px;background-image:url(imgs/xiaotu04.jpg); background-repeat:no-repeat;}
</style>
</head>
<body>
<div id="main">
<div class="xiaotu tf01"></div>
<div class="xiaotu tf02"></div>
<div class="xiaotu tf03"></div>
<div class="xiaotu tf04"></div>
</div>
</body>
</html>
