-
Notifications
You must be signed in to change notification settings - Fork 0
FocusNote
jay16 edited this page Sep 10, 2012
·
17 revisions
尽可能简洁的显示文本内容、程序代码
增添内容:鼠标指定位置插入动态添加记事内容[追加时间戳]; 编辑内容:编辑鼠标指定文章局部段落[追加更新时间戳]
可自由调整文章段落位置[调整状态]
可拖动图片在鼠标指定位置显示
同步保存本地
提供模块显示各新闻网站信息，拖动新闻到编辑区为新记事内容[追加新闻来源]
记事内容段落可发布为指定微博或博客
浏览记事内容时，拼接后续所有内容，如果愿意，可一次看完所有词内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS拖动层</title>
</head>
<body>
<div id="f" style="position: absolute; width: 216px; height: 138px; background-color: skyblue;font-size: 12px; top: 210px; left: 180px; z-index: 101; border: solid 1px blue;">
<div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 12px; padding-top: 5px; padding-left: 10px;">
点击此栏拖动</div>
本模板可鼠标手动
</div>
<script type="text/javascript">
var posX;
var posY;
fdiv = document.getElementById("f");
document.getElementById("title").onmousedown=function(e)
{
if(!e) e = window.event; //IE
posX = e.clientX - parseInt(fdiv.style.left);
posY = e.clientY - parseInt(fdiv.style.top);
document.onmousemove = mousemove;
}
document.onmouseup = function()
{
document.onmousemove = null;
}
function mousemove(ev)
{
if(ev==null) ev = window.event;//IE
fdiv.style.left = (ev.clientX - posX) + "px";
fdiv.style.top = (ev.clientY - posY) + "px";
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 drag image in page - cheungmine</title>
<style rel="stylesheet" type="text/css" >
#_outerDiv{
height:400px;
width:500px;
border:1px solid black;
position:relative;
overflow:hidden;
}
</style>
<script type="text/javascript">
function getElem (id) {
return document.getElementById(id);
}
function trimPX (_px) {
if(_px==null || _px=="")
return 0;
return parseInt(_px.substr(0, _px.lastIndexOf("px")));
}
function hitInRect (hitX, hitY, rcLeft, rcTop, rcWidth, rcHeight) {
return (hitX>=rcLeft && hitX<rcLeft+rcWidth && hitY>=rcTop && hitY<rcTop+rcHeight);
}
function outerDiv () {
return getElem("_outerDiv");
}
function imageDiv () {
return getElem("_imageDiv");
}
var dragging = false;
var startTop = 0; // top is a Key Word in Chrome and Opera
var startLeft = 0;
var dragPosY = 0;
var dragPosX = 0;
window.addEventListener("load", initPage, false);
function initPage () {
outerDiv().addEventListener("mousedown", // start moving image
function (event) {
startTop = trimPX(imageDiv().style.top);
startLeft = trimPX(imageDiv().style.left);
var width = trimPX(imageDiv().style.width);
var height = trimPX(imageDiv().style.height);
if (hitInRect(event.clientX, event.clientY, startLeft, startTop, width, height)) {
dragging = true;
dragPosX = event.clientX;
dragPosY = event.clientY;
event.preventDefault(); // disable default behavior of browser
}
},
false
);
outerDiv().addEventListener("mousemove", // moving image
function (event) {
if (dragging){
imageDiv().style.cursor="pointer";
imageDiv().style.top = parseInt(startTop)+(event.clientY - dragPosY) + "px";
imageDiv().style.left = parseInt(startLeft)+(event.clientX - dragPosX) + "px";
}
event.preventDefault();
},
false
);
outerDiv().addEventListener("mouseup", // stop moving image
function (event) {
dragging = false;
imageDiv().style.cursor="default";
event.preventDefault();
},
false
);
}
</script>
</head>
<body>
<div id="_outerDiv">
<div id="_imageDiv" style="z-index:0; position:relative; top:0px; left:0px; width:200px; height:150px;">
<img id="_imageObj" src="http://avatar.csdn.net/E/3/5/1_cheungmine.jpg"></img>
</div>
</div>
</body>
</html>
js-注意事项