图片在网页上移动

最新推荐文章于 2023-05-15 20:22:03 发布

原创最新推荐文章于 2023-05-15 20:22:03 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #border #javascript #html #div #url

Javascript专栏专栏收录该内容

2 篇文章

订阅专栏

此博客主要展示了一段HTML和JavaScript代码，实现了图片的拖动、缩放等交互功能。通过JavaScript定义多个函数，如init、mouseDown等处理鼠标事件，还能根据图片尺寸调整显示大小，同时设置了鼠标样式。

<html>
<head>
<title>图片内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body {CURSOR: url('/images/hmove.cur')}
</style>
<SCRIPT language=JavaScript>
drag = 0
move = 0
function init() {
    window.document.onmousemove = mouseMove
    window.document.onmousedown = mouseDown
    window.document.onmouseup = mouseUp
    window.document.ondragstart = mouseStop
}
function mouseDown() {
    if (drag) {
        clickleft = window.event.x - parseInt(dragObj.style.left)
        clicktop = window.event.y - parseInt(dragObj.style.top)
        dragObj.style.zIndex += 1
        move = 1
    }
}
function mouseStop() {
    window.event.returnValue = false
}
function mouseMove() {
    if (move) {
        dragObj.style.left = window.event.x - clickleft
        dragObj.style.top = window.event.y - clicktop
    }
}
function mouseUp() {
    move = 0
}
function bbimg(o){
var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) o.style.zoom=zoom+'%';
return false;
}
function featsize()
{
var width1=images2.width;
var height1=images2.height;
var width2=760;
var height2=500;
var h=height1/height2;
var w=width1/width2;
if(height1<height2&&width1<width2)
{
  images1.height=height1;
  images1.width=width1;
}
else
{
  if(h>w)
  {
   images1.height=height2;
   images1.width=width1*height2/height1;
  }
  else
  {
   images1.width=width2;
   images1.height=height1*width2/width1;
  }
}
block1.style.left = 0;
block1.style.top = 0;
}
</SCRIPT>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="init()" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()">
<noscript><iframe src=*></iframe></noscript>
<div id='hiddenPic' style='position:absolute; left:433px; top:258px; width:77px; height:91px; z-index:1; visibility: hidden;'><img name='images2' src='UploadPhotos/200412/20041213105402955.jpg' border='0'></div><div id='block1' onmouseout='drag=0' onmouseover='dragObj=block1; drag=1;' style='z-index:10; height: 60; left: 0; position: absolute; top: 0; width: 120'><img name='images1' src='UploadPhotos/200412/20041213105402955.jpg' border='0' onmousewheel='return bbimg(this)' onload='featsize()'></div>
</body>
</html>