关于html网页里实现拖动图片的效果
我要做一个类似于地图的一个网页，主要实现的效果是页面里由N张图片拼合而成。拼合出来的大图片肯定是比网页页面大的，当打开这个页面后，页面是不显示滚动条的，如果想看整个大图片...
我要做一个类似于地图的一个网页，主要实现的效果是页面里由N张图片拼合而成。拼合出来的大图片肯定是比网页页面大的，当打开这个页面后，页面是不显示滚动条的，如果想看整个大图片，只需要鼠标拖动图片，来查看整张图片，如果想放大图片，就用鼠标滚轮来放大缩小图片。/*在这方面我是个门外汉，希望得到大侠的帮助，我需要的这个效果不知道应该怎样实现，大侠可否给我一个能实现这样效果的代码给我瞧瞧*/我有一个网站可以做参考，大致就是实现那样的效果。“gz.o.cn”这个网站是广州的一个地图的网站，看着太复杂了，我主要就是想实现鼠标能拖动，网页不显示滚动条。就可以了。求大侠们帮忙！如果解决了问题，我会在加分
展开
2个回答
展开全部
给你个demo 放大之后往里面塞图片吧。
能拖动，不显示滚动条。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
html,body
{
height:100%;
width:100%;
padding:0;
margin:0;
overflow: hidden;
}
.dialog
{
width:250px;
height:250px;
position:absolute;
background-color:#ccc;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
margin:10px;
}
.dialog-title
{
color:#fff;
background-color:#404040;
font-size:12pt;
font-weight:bold;
padding:4px 6px;
cursor:move;
}
.dialog-content
{
padding:4px;
}
</style>
</head>
<body>
<div id="dlgTest" class="dialog">
<div class="dialog-title">Dialog</div>
<div class="dialog-content">
This is a draggable test.
</div>
</div>
<script type="text/javascript">
var Dragging=function(validateHandler){
var draggingObj=null; //dragging Dialog
var diffX=0;
var diffY=0;
function mouseHandler(e){
switch(e.type){
case 'mousedown':
draggingObj=validateHandler(e);
if(draggingObj!=null){
diffX=e.clientX-draggingObj.offsetLeft;
diffY=e.clientY-draggingObj.offsetTop;
}
break;
case 'mousemove':
if(draggingObj){
draggingObj.style.left=(e.clientX-diffX)+'px';
draggingObj.style.top=(e.clientY-diffY)+'px';
}
break;
case 'mouseup':
draggingObj =null;
diffX=0;
diffY=0;
break;
}
};
return {
enable:function(){
document.addEventListener('mousedown',mouseHandler);
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
},
disable:function(){
document.removeEventListener('mousedown',mouseHandler);
document.removeEventListener('mousemove',mouseHandler);
document.removeEventListener('mouseup',mouseHandler);
}
}
}
function getDraggingDialog(e){
var target=e.target;
while(target && target.className.indexOf('dialog-title')==-1){
target=target.offsetParent;
}
if(target!=null){
return target.offsetParent;
}else{
return null;
}
}
Dragging(getDraggingDialog).enable();
</script>
</body>
</html>
能拖动，不显示滚动条。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
html,body
{
height:100%;
width:100%;
padding:0;
margin:0;
overflow: hidden;
}
.dialog
{
width:250px;
height:250px;
position:absolute;
background-color:#ccc;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
margin:10px;
}
.dialog-title
{
color:#fff;
background-color:#404040;
font-size:12pt;
font-weight:bold;
padding:4px 6px;
cursor:move;
}
.dialog-content
{
padding:4px;
}
</style>
</head>
<body>
<div id="dlgTest" class="dialog">
<div class="dialog-title">Dialog</div>
<div class="dialog-content">
This is a draggable test.
</div>
</div>
<script type="text/javascript">
var Dragging=function(validateHandler){
var draggingObj=null; //dragging Dialog
var diffX=0;
var diffY=0;
function mouseHandler(e){
switch(e.type){
case 'mousedown':
draggingObj=validateHandler(e);
if(draggingObj!=null){
diffX=e.clientX-draggingObj.offsetLeft;
diffY=e.clientY-draggingObj.offsetTop;
}
break;
case 'mousemove':
if(draggingObj){
draggingObj.style.left=(e.clientX-diffX)+'px';
draggingObj.style.top=(e.clientY-diffY)+'px';
}
break;
case 'mouseup':
draggingObj =null;
diffX=0;
diffY=0;
break;
}
};
return {
enable:function(){
document.addEventListener('mousedown',mouseHandler);
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
},
disable:function(){
document.removeEventListener('mousedown',mouseHandler);
document.removeEventListener('mousemove',mouseHandler);
document.removeEventListener('mouseup',mouseHandler);
}
}
}
function getDraggingDialog(e){
var target=e.target;
while(target && target.className.indexOf('dialog-title')==-1){
target=target.offsetParent;
}
if(target!=null){
return target.offsetParent;
}else{
return null;
}
}
Dragging(getDraggingDialog).enable();
</script>
</body>
</html>
追问
你发给我的代码我看了，不是我要的效果，你这个只可以移动那个div的顶部，我往里插入图片后鼠标拖动图片不能实现移动的效果，我想要的是插入图片以后鼠标拖动图片也可以移动。
追答
抱歉哈刚刚看到，改改就好了，style里不是有.dialog-title么，里面加上宽高width:250px;height:250px;多大自己定，内容dialog-content不想要就把div删掉嘛，所有东西好好看看都可以改的，只是随意拖动这个功能不用做了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
具体讲起来很费劲，代码太多，这里有个案例讲解，你可以看一下
http://blog.csdn.net/java2000_net/article/details/4254525
然后这里可以下载现成的效果demo，需要积分，我的正好用完了，你可以注册后有送积分，下载看看
http://download.csdn.net/detail/aa520025/4438549
http://blog.csdn.net/java2000_net/article/details/4254525
然后这里可以下载现成的效果demo，需要积分，我的正好用完了，你可以注册后有送积分，下载看看
http://download.csdn.net/detail/aa520025/4438549
追问
你发给我的我也看了，他这个能实现鼠标拖动的效果，但往里面放多张图片就不行了。他这个代码只对单一的那一个图片有效。可能是我能力有限。没研究明白
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
