| JS制作DIV悬浮窗与悬浮窗拖拽 | 您所在的位置：网站首页 › js实现弹窗来回浮动 › JS制作DIV悬浮窗与悬浮窗拖拽 |
JS制作DIV悬浮窗与悬浮窗拖拽
|
//-------------------------------------------------------------------这里只是吐槽！~------------------------------------------------------------------ 啊哈，这是第一次来博客园里写博客喃。当然也是我的第一篇博客啦= =！很有纪念意义。。。。哈哈哈哈哈哈哈哈。。。（PS：这样笑的时候经常被喷呀= =！）。 好了，其实我写博客的目的还是为了记录我的学习，我的经历，我的生活嘛。当然我也是记录一下学习到的知识，不然久了忘了就找不到地方复习了= =。。 难道已经有人在吐槽我的注释了？( ⊙ o ⊙ )！哈哈，我的读者哪有这么可爱！ //-------------------------------------------------------------------以下是正文-------------------------------------------------------------------------- 今天是2014-3-14，也是实训的第二周结束了。相比第一周的项目设计来看，第二周做了下来发现第一周的设计简直无情。要是拓展的话确实有很多地方都可以拓展呀！但毕竟我的数据库设计是硬伤，这主要是源于一开始的需求分析不到位（好吧我承认这是自己给自己找事，一开始就做好不就行了么！）。但不管是千里马还是断脚马，始终还是要跑下去的。 在指导老师的指点下，让我做一个悬浮窗来显示信息和提交按钮，来增加用户体验。嗯...深思中。。于是果断到百度上去找了相关的代码。。但是尼玛居然用不了= =！这不是坑是什么。。而且很多都还是转的同一篇= =！泪目。好吧，经过了一点修改，解决了显（语）在（法）错误后终于实现了Div的拖拽，Div的定位。为什么我不用和或者顿号喃！因为网上给的代码只能实现单一项功能，而且还不能满足要求。于是勤（不）奋（思）好（进）学（取）的我就开始潜心研究。最终，在我的淫威之下还是将其败倒。最后得到的代码如下： //-----------------------------------------------------------------代码部分---------------------------------------------------------------------------- code:dragDiv.js
// 实现可拖动的div-----------------------------------拖拽部分-------------------------------------
var px = 0;
var py = 0;
var begin = false;
//是否要开启透明效果
var enableOpacity = false; // 默认不允许
var myDragDiv;
var docuTopTemp = 0;//上一次的滚轮高度，初始情况下是0
var DivId = "elementToDrag"//这里是要拖拽div的id
var divWidth = parseInt(document.getElementById(DivId).style.width.split('p')[0]);
var divheigth = parseInt(document.getElementById(DivId).style.height.split('p')[0]);
//要移动的div加上οnmοusedοwn="down(this)"即可
//鼠标按下时获取相对坐标
function down(oDiv) {
myDragDiv = oDiv;
begin = true;
oDiv.style.cursor = "hand";
event.srcElement.setCapture();
px = oDiv.style.pixelLeft - event.x;
py = oDiv.style.pixelTop - event.y;
}
//鼠标移动时div的相对坐标随鼠标的坐标变化而变化
document.οnmοusemοve=function() {
if (myDragDiv != null && typeof (myDragDiv) != "undefined") {
if (begin) {
if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=30)"; } // 滤镜
//越界判断
if (event.x = divWidth && event.y = divheigth + docuTopTemp) {
myDragDiv.style.pixelLeft = px + event.x;
myDragDiv.style.pixelTop = py + event.y;
}
}
}
}
//鼠标抬起时释放
document.onmouseup = function () {
if (myDragDiv != null && typeof (myDragDiv) != "undefined") {
begin = false;
if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=100)"; } // 滤镜
myDragDiv.style.cursor = "default";
event.srcElement.releaseCapture();
myDragDiv = null;
}
}
//-------------------------------------------定位部分------------------------------------------------------
//定位采用滚动条滚动事件
//原理是先判断滚动条的动作，如果向下，则div也向下，向上同理
//移动的距离则是滚动条的高值相对于上一次高值的差，初始高值为0，下加上减
document.onscroll = function () {
var docuTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
var divTopBar = document.getElementById(DivId);//DivId=elementToDrag是对象id
divTopBar.style.pixelTop += (docuTop - docuTopTemp);
docuTopTemp = docuTop;
}
//--------------------------------------------加载部分------------------------------------------
//设置div的初始位置
function MoveFloatLayer() {
var x = document.documentElement.clientWidth * 0.8;
var y = document.documentElement.clientHeight * 0.1;
var docuTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
var y = docuTop + y;
var divTopBar = document.getElementById(DivId);
divTopBar.style.pixelLeft = x;
divTopBar.style.pixelTop = y;
}
window.onload = MoveFloatLayer;
View Code
code:test.aspx 因为我是做.net开发的，所以就用的asp.net，但这是js代码，所以都可以用，这里只是举例。
DOCTYPE html>
按下鼠标拖动
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
test test test
View Code
好了具体的代码就是上面的了，根据实际情况去用就OK了。第一期就到这里吧。 |
【本文地址】
公司简介
联系我们