empty
原始碼(ex_mouse1.html)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body style="height:200px">
<p id="position"></p>
<script>
document.addEventListener("click", function (event){
var x=event.clientX;
var y=event.clientY;
position.innerHTML="(X= "+x +")(Y= "+y+")";
});
</script>
</body>
</html>
example
原始碼(ex_mouse2.html)
<!DOCTYPE html>
<html>
<head>
<style>
#div {
border: 1px dotted #000;
position: absolute;
}
</style>
</head>
<body style="height:200px">
<div id="div" hidden></div>
<script>
var div = document.getElementById('div');
var x1 = 0, y1 = 0, x2 = 0, y2 = 0;
function reCalc() { //This will restyle the div
var x3 = Math.min(x1,x2); //Smaller X
var x4 = Math.max(x1,x2); //Larger X
var y3 = Math.min(y1,y2); //Smaller Y
var y4 = Math.max(y1,y2); //Larger Y
div.style.left = x3 + 'px';
div.style.top = y3 + 'px';
div.style.width = x4 - x3 + 'px';
div.style.height = y4 - y3 + 'px';
}
onmousedown = function(e) {
div.hidden = 0; //Unhide the div
x1 = e.clientX; //Set the initial X
y1 = e.clientY; //Set the initial Y
reCalc();
};
onmousemove = function(e) {
x2 = e.clientX; //Update the current position X
y2 = e.clientY; //Update the current position Y
reCalc();
};
onmouseup = function(e) {
div.hidden = 1; //Hide the div
};
</script>
</body>
</html>example
原始碼(ex_mouse2a.html)
<!DOCTYPE html>
<html>
<head>
<style>
#div {
/*border: 1px dotted #000;*/
border: 1px dotted #fff;
position: absolute;
}
</style>
<script>
var x1 = 0, y1 = 0, x2 = 0, y2 = 0;
document.addEventListener("DOMContentLoaded", function () {
onmousedown = function(e) {
//div.hidden = 0; //Unhide the div
div.style.borderColor="red";
x1 = e.clientX; //Set the initial X
y1 = e.clientY; //Set the initial Y
reCalc();
};
onmousemove = function(e) {
x2 = e.clientX; //Update the current position X
y2 = e.clientY; //Update the current position Y
reCalc();
};
onmouseup = function(e) {
//div.hidden = 1; //Hide the div
//div.style.borderColor="none"; //無法移除顏色
div.style.removeProperty("border-color") //也不是removeProperty("borderColor")
};
});
function reCalc() { //This will restyle the div
var x3 = Math.min(x1,x2); //Smaller X
var x4 = Math.max(x1,x2); //Larger X
var y3 = Math.min(y1,y2); //Smaller Y
var y4 = Math.max(y1,y2); //Larger Y
div.style.left = x3 + 'px';
div.style.top = y3 + 'px';
div.style.width = x4 - x3 + 'px';
div.style.height = y4 - y3 + 'px';
}
</script>
</head>
<body style="height:200px">
<!--<div id="div" hidden></div> -->
<div id="div" ></div>
</body>
</html>example
原始碼(ex_mouse3.html)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id= >this in div </div>
<p> this is paragraph</p>
<script>
var old=null;
var oldBorder;
function getTarget(event) {
var el = event.target || event.srcElement;
return el.nodeType == 1? el : el.parentNode;
}
onmousemove = function(e) {
var o=getTarget(e);
if (o!=old){
if(old!=null){
old.style.border=oldBorder;
}
oldBorder=o.style.border;
old=o;
o.style.border="solid red";
}
};
</script>
</body>
</html>example
原始碼(ex_mouse4.html)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script>
document.addEventListener("click", function (event){
var x=event.clientX;
var y=event.clientY;
if(mark!=null){
mark.style.left=x.toString()+"px";
mark.style.top=y.toString()+"px";
}
// position.innerHTML="(X= "+x +")(Y= "+y+")";
});
</script>
<style>
img {
opacity: 0.5;
width:36px;
height:36px;
}
#mark{
position:fixed;
bottom: 0;
right: 0;
width: 200px;
}
</style>
</head>
<body >
<div id="mark"><image src="hollow.jpg"></image></div>
<p>
Phasellus volutpat sollicitudin felis, vel dignissim libero elementum et. Nunc a semper felis. Nunc pellentesque tortor quis arcu tempor, quis sagittis purus ornare. Nulla consectetur mi libero, eget euismod nisi consectetur ut. Nulla tincidunt faucibus erat, sit amet tempor risus bibendum sed. Quisque et dolor scelerisque, varius felis sed, porttitor sapien. Fusce egestas commodo tellus vel ullamcorper. Vestibulum tincidunt sagittis mauris, ac faucibus justo ultricies non. Duis eu convallis neque, a facilisis nisl. Nulla nisi urna, mollis id posuere vitae, dignissim quis dui. Curabitur sodales nulla non odio cursus, id ultrices risus scelerisque. Pellentesque interdum non nunc in consequat. Vivamus molestie eget odio eget consectetur.
</p>
<p>
Curabitur pharetra magna vitae lectus maximus, quis blandit sapien aliquet. In hac habitasse platea dictumst. Aenean ultrices nunc non sapien tristique, ut fringilla nisl bibendum. Fusce dapibus leo non nisl egestas, ut dapibus metus euismod. Suspendisse iaculis nunc ut lectus feugiat vulputate. Integer in elementum urna. Donec nec justo sit amet lorem rhoncus dignissim sed sit amet sapien. Nam quis porta augue. Nunc turpis magna, fermentum ut ipsum vitae, venenatis laoreet sem. Vivamus tincidunt sed enim sit amet malesuada. Ut ullamcorper ullamcorper accumsan. Nulla porta sed augue molestie lacinia. Cras dapibus maximus blandit.
</p>
<p>
Donec feugiat vel elit et laoreet. Ut malesuada lectus a faucibus blandit. Mauris fringilla suscipit augue sit amet feugiat. Phasellus commodo, urna id tristique rutrum, velit tortor facilisis augue, id convallis odio est non dolor. Curabitur risus neque, posuere non gravida et, porttitor et massa. Praesent luctus dolor vel massa maximus euismod.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam risus libero, tincidunt vel consectetur id, elementum eget risus. Nulla at convallis dolor. Nulla commodo tortor ac eleifend laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas bibendum ipsum eget nibh pharetra vehicula. Proin maximus magna dui, et congue nisl vestibulum eget.
</p>
<p>
Integer eget porta metus. Vivamus ornare, felis maximus euismod suscipit, lorem urna laoreet libero, viverra ultricies urna velit quis augue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus urna tortor, tincidunt quis mollis a, semper in dui. Proin et maximus erat. Vestibulum aliquet dictum mauris ac feugiat. Fusce cursus tellus tristique sagittis ornare. Phasellus ipsum neque, iaculis in efficitur eu, viverra sit amet nunc.
</p>
</body>
</html>