DIV和Image 的一些JavaScript 操作

最新推荐文章于 2023-11-08 16:33:08 发布

zhouxianglh

最新推荐文章于 2023-11-08 16:33:08 发布

阅读量227

点赞数

分类专栏： JavaScript 文章标签： JavaScript CSS jQuery Firefox HTML ViewUI

本文链接：https://blog.csdn.net/zhouxianglh/article/details/83558878

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>JavaScript</title>
<style type="text/css">
#pic {
	position:absolute;
	left:0px;
	top:80px;
	width:120px;
	height:120px;
	z-index:1;
	border: thin dashed #CC00FF;
}
#select {
	position:absolute;
	left:0px;
	top:80px;
	width:40px;
	height:40px;
	z-index:2;
	border: thin dashed #CC00FF;
}
#display {
	position:absolute;
	left:120px;
	top:80px;
	width:600px;
	height:600px;
	z-index:1;
	border: thin dashed #CC00FF;
	background-repeat: no-repeat;
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript">
var multiples = 1;
var path;

$("document").ready(function() {
    $("#select").bind("mousedown", 
    function(event) {
        mouseDown(event);
    });
    $("#file").bind("change", 
    function(event) {
        addImage(this);
    });
});
//添加图片
function addImage(obj) {
    if (obj) {
        if (window.navigator.userAgent.indexOf("MSIE") >= 1)
        {
            path = obj.value;
        }
        else if (window.navigator.userAgent.indexOf("Firefox") >= 1)
        {
            path = obj.files[0].getAsDataURL();
        }
    }
    var disImage = new Image();
    disImage.src = path;
	disImage = editImage(disImage);
	$("#pic").empty();
	$("#pic").get(0).appendChild(disImage);
	$("#display").css("background-image","url(" + path+ ")");
}
//设置图片
function editImage(image){
	for(multiples = 1;image.width>=120 || image.height>=120;multiples ++){
		image.width = image.width * 0.8;
		image.height = image.height * 0.8;
	}
	return image;
}
//移动图片
function moveImage(newX,newY){
	newX = (0- newX)*12;
	newY = (80 - newY)*12;
	$("#display").css("background-position",newX + "px " + newY + "px");
}
//移动select
function mouseDown(a) {
    var o = $("#select").get(0);
    //var o = document.getElementById("display");
    var d = document;
    var x = a.clientX + d.body.scrollLeft - o.offsetLeft;
    var y = a.clientY + d.body.scrollTop - o.offsetTop;
    d.onmousemove = function(a)
    {
        if (!a) a = window.event;
        var newX = a.clientX + document.body.scrollLeft - x;
        var newY = a.clientY + document.body.scrollTop - y;
        if (newX >= 0 && newX <= 80 && newY >= 80 && newY <= 160) {
            o.style.left = newX;
            o.style.top = newY;
			moveImage(newX,newY);
        }
    };
    d.onmouseup = function()
    {
        d.onmousemove = null;
        d.onmouseup = null;
    };
}
</script>
</head>
<body>
<input type="file" id="file"/>
<div id="pic"></div>
<div id="select"></div>
<div id="display"></div>
</body>
</html>