最近项目里有一条长长的轨道图,长度多达180W像素,而且要求能够实现横向拖拽和缩放功能。
实现思路:因为是前端项目,我们把开发的着重点放在视图层,项目需要实现缩放的话,首先定义一个缩放比,根据比例来控制其长度缩放用到了zoom属性。拖拽用了html原生的属性。具体代码如下:(非vue代码,不过vue项目也可以使用这种开发思想) 感想是做这种类型的东西,能够考验对原生dom属性的了解程度,对开发思路很有帮助
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS图片拖拽,滚轮放大</title>
<style type"text/css">
<!--
img{width:200px; height:200px;}
.con{ width:700px; height:500px;position:relative; overflow:hidden; border:1px dashed #0066CC}
-->
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
/*鼠标将图片在相应的div自由拖动*/
drag = 0;
move = 0;
var ie = document.all;
var nn6 = document.getElementById && !document.all;
var isdrag = false;
var y,x;
var oDragObj;
var pic_width,pic_height,pic_zoom;
var divleft,divtop;
function moveMouse(e) {
if (isdrag) {
/* oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px"; */
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className == "dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top + 0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left + 0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove = moveMouse;
return false;
}
}
document.onmousedown = initDrag;
document.onmouseup = new Function("isdrag=false");
$(document).ready(function() {
if (window.addEventListener){
window.addEventListener('DOMMouseScroll', wheel, false);//给firefox添加鼠标滚动事件,因为火狐没有wheel事件
}
for(var i = 0;i<200;i++) {
var span = document.createElement('span')
span.innerHTML = i
$("#spanBox").append(span)
}
});
function wheel(event) {
if (!event) /**//* For IE. */
{
event = window.event;
}
else if (event.detail)
{
var height1 = $("#images1").attr("height");
if (!height1) {
height1 = height1.substring(0, height1.length - 2);
}
var width1 = $("#images1").attr("width");
if (!width1) {
width1 = width1.substring(0, width1.length - 2);
}
if (event.detail < 0) {
var temp1 = parseInt(height1) * 1.2;
var temp2 = parseInt(width1) * 1.2;
} else {
var temp1 = parseInt(height1) / 1.2;
var temp2 = parseInt(width1) / 1.2;
}
$("#images1").attr("height", temp1 + "px");
$("#images1").attr("width", temp2 + "px");
}
}
/*非Firefox的主流浏览器*/
function bbimg(o) {
/* var zoom = parseInt(o.style.zoom, 10) || 100; */
var zoom = parseInt(document.getElementById("hideEle").style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
/* if (zoom > 0) o.style.zoom = zoom + '%'; */
if (zoom > 0) document.getElementById("hideEle").style.zoom = zoom + '%';
console.log(zoom)
if (zoom > 0) o.style.width = 8000*zoom / 100 + 'px';
return false;
}
function realsize() {
$("#images1").attr("height", "140px");
$("#images1").attr("width", "140px;");
$("#images1").css("zoom", "100%");
$("#block1").css("left", "0px");
$("#block1").css("top", "0px");
}
</script>
</head>
<body>
<div>
<div id='block1' style='height: 0; left: 0px; position: absolute; top: 0px; width: 0;' class="dragAble">
<div id="images1" onmousewheel="return bbimg(this)" ondblclick="realsize();"
style="top:0px;left:0px;position:relative;background-color: orange;width:8000px;height:200px"
>
<span style="width:100%;display:flex;justify-content: space-between;" id="spanBox">
<span>1</span>
<span>2</span>
<span>2</span>
</span>
</div>
<div id="hideEle" style="display: none;"></div>
</div>
</div>
</body>
</html>