設為首頁 | 加入收藏 |  繁體中文

室外效果圖

jQuery 拖動浮動層(PopLayer Drag and Drop) 房地產家裝模型

來源:裝修 效果圖制作公司: 展示設計效果圖 次瀏覽

效果圖制作

實現環境:vs2008,jquery

項目的很多地方都會用到彈出層比如有一個list頁面,一行一行的顯示了很多的信息大多時候,每一行都不能顯示完與該條記錄相關的所有信息,這時候當用戶想看具體的信息時,如果有一個彈出層去顯示一些詳細的信息可以帶來很好的用戶體驗,省的用戶在多個頁面之間來回切換,看著麻煩

至于彈出層如何動態的獲取與指定記錄相關的信息,在webform里可以用jquery + ashx技術實現,在mvc中就更簡單了這個不是這篇文章的重點

這篇文章的重點是如何讓這個彈出層跟隨鼠標移動,因為這個彈出層是浮動在頁面上面的,會蓋住頁面上的一些信息,而如果,這些信息正是用戶想看的信息,一個不能拖動的浮動層會讓用戶很不爽的

新建webapp項目,文件列表如下:

poplayer.css主要控制頁面顯示樣式,浮動層的樣式

jsdraganddrop.js 主要是jquery的控制浮動層移動的函數

default.aspx 是測試頁jquery事件綁定代碼片段:

view code

$(function() {

$("a#a_showhidediv").click(function() {

$(".pop_layer").css("display", "block");

});

$(".pop_head").mousedown(m_keydown);

$(".pop_head").mousemove(m_move);

$(".pop_head").mouseup(m_keyup);

$("div.pop_head > a").click(popclose);

$("#popbtnok").click(function() {

//add the ajax function

//$.ajax({

//});

});

$("#popbtncancel").click(popclose);

})

主要用到的js函數(不解釋,注釋很明白):

var defaultx; //鼠標起始位置橫坐標

var defaulty; //鼠標起始位置縱坐標

var objx;//浮動層設定的橫坐標

var objy;//浮動層設定的縱坐標

var posx;//鼠標當前橫坐標

var poxy;//鼠標當前縱坐標

var iskeydown = 0;//標志鼠標左鍵是否是按下狀態

function m_keydown(e) {//當鼠標左鍵按下,捕捉鼠標當前位置,浮動層位置

iskeydown = 1;

$(".pop_layer").css("cursor", "move");//設定鼠標樣式

de效果圖展示的英文faultx = e.pagex;

defaulty = e.pagey;

objx = $(".pop_layer")[0].offsetleft;

objy = $(".pop_layer")[0].offsettop;

};

function m_keyup() {

iskeydown = 0;

$(".pop_layer").css("cursor", "default");

//$(".pop_layer").unbind("mousedown", "m_keydown").unbind("mousemove", "m_move");

};

function m_move(ee) {//拖動

if (!ee) ee = window.event;

if (iskeydown == 1) {

$(".pop_layer").css("left", objx + ee.pagex - defaultx);

$(".pop_layer").css("top", objy + ee.pagey - defaulty);

}

else return;

};

實現效果圖:

呵呵,頁面做的太丑陋,會頁面設計可以好好設計一下

后續文章會展示如何動態加載數據到浮動層

最后附上:頁面源碼下載


TAG:展示設計效果圖
-

聯系我們

室外效果圖

效果圖公司

效果圖網站

九九效果圖網站

效果圖制作

工裝效果圖

室外效果圖

圖50效果圖設計師團隊(隸屬圖50設計團隊)
地址: 上海市浦東新區浦東南路1101號
分站: 北京 深圳 廣州 南京 蘇州 更多..
電話: 021-51078082
熱線: 021-51078082
聯系人: 馬小姐,王小姐
承諾修改不限次,品質完全滿意后付款
   點擊這里給我發消息            點擊這里給我發消息

-

上海效果圖 效果圖制作 效果圖公司 室內設計效果圖 三維效果圖
免費服務熱線:021-51078082 電話:021-51078082 郵箱:
版權所有 圖50效果圖設計師團隊 圖50設計團隊 鄭重承諾:修改不限次,品質完全滿意后付款

網站地圖 | 百度 | 谷歌 | Rss | 效果圖制作 上海效果圖公司 室內效果圖 裝修效果圖 3D效果圖 滬ICP備10204764號

團隊簡介 室內效果圖 室外效果圖 3D效果圖 收費標準 招聘信息 在線留言 聯系我們 本站出售、轉讓、價格優惠¥、需要請聯系QQ 2609956606

效果圖

在線客服

室內效果圖
點擊這里給我發消息
室外效果圖
點擊這里給我發消息
三維效果圖
點擊這里給我發消息
建筑效果圖
點擊這里給我發消息
鳥瞰效果圖
點擊這里給我發消息
景觀效果圖
點擊這里給我發消息
捕鱼大富翁官网