拖动查看图片局部的代码

2010-03-11 18:55:36 作者:http://www.dynamicdrive.com 来源:查看 | 【大中小】

拖动下面的图片看看效果：

本脚本可以让你网页上的大图片只显示其中的一部分，用户通过鼠标拖动图片可以看到图片的其他部分，代码调用简单，基于jQuery实现

下载
点击这里下载imagepanner.js脚本

在网页<head>区添加以下代码

<style type="text/css">

/*Default CSS for pan containers*/
.pancontainer{
position:relative; /*keep this intact*/
overflow:hidden; /*keep this intact*/
width:300px;
height:300px;
border:1px solid black;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="imagepanner.js"></script>

在网页<body>区添加以下代码

<div class="pancontainer" data-orient="center" style="width:400px; height:300px;">
<img src="food3.jpg" style="width:400px; height:525px" />
</div>


<div class="pancontainer" data-orient="center" style="width:400px; height:300px;">
<img src="listenmusic.jpg" style="width:700px; height:525px" />
</div>

<div class="pancontainer" data-orient="center" style="width:400px; height:300px;"></div>

是一个容器，定义的可以拖动的范围

<img src="listenmusic.jpg" style="width:700px; height:525px" />

是图片的定义，设定的图片宽度、高度只要大于容器的宽度、高度计可以实现图片的拖动

其他设置：
如果要让图片默认显示在容器中间，需要在容器上设定：margin:auto
如：

<div class="pancontainer" data-orient="center" style="width:400px; height:300px; margin:auto">
<img src="myimage.jpg" style="width:700px; height:525px" />
</div>

如果要让图片默认在容器中居左，可以这么定义：

<div class="pancontainer" data-orient="center" style="width:400px; height:300px; float:left">
<img src="myimage.jpg" style="width:700px; height:525px" />
</div>

<div class="pancontainer" data-orient="center" style="width:400px; height:300px; float:left">
<img src="myimage.jpg" style="width:700px; height:525px" />
</div>

<br style="clear:left" />

下载"拖动查看图片局部的代码"

推荐给朋友

上一篇：功能强大的图片放大镜效果
下一篇：医疗器具听诊器PNG图标

拖动查看图片局部的代码

下载"拖动查看图片局部的代码"

相关资源