検索

ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryフローティングウィンドウ実装コード(2つのメソッド)_jquery

jQueryフローティングウィンドウ実装コード(2つのメソッド)_jquery

WBOY
WBOYオリジナル
2016-05-16 18:19:551393ブラウズ
第一の方法:
预览:
jQueryフローティングウィンドウ実装コード(2つのメソッド)_jquery
Html代码
复制代 代码如下:



浮動窗口







这只是一演示标题[ x ]

div などのコンテナ オブジェクトにマウス キャプチャがある場合、setCapture メソッドの bContainerCapture パラメータが false に設定されていない限り、そのコンテナ内のオブジェクトで発生するイベントが div によって発生します。値 false を渡すと、コンテナーはすべてのドキュメント イベントをキャプチャしなくなります。代わりに、そのコンテナ内のオブジェクトは引き続きイベントを起動し、それらのイベントも期待どおりにバブルします。

---これは Alp によって編集されています。







Js代码
复制代码 代码如下:
functionドラッグ(overFlow,title){
title.onmousedown = function(evt){
var doc = document;
var evt = evt ||ウィンドウ.イベント;
var x = evt.offsetX?evt.offsetX:evt.layerX;
var y = evt.offsetY?evt.offsetY:evt.layerY;
if(overFlow.setCapture){
overFlow.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove = function(evt){
evt = evt ||ウィンドウ.イベント;
var xPosition = evt.pageX || evt.clientX;
var yPosition = evt.pageY || evt.clientY;
var newX = xPosition - x;
var newY = yPosition - y;
overFlow.style.left = newX;
overFlow.style.top = newY;
};
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove=null;
doc.onmouseup=null;
};
};
}


css代码
复制代 代码次のように:
#over{
位置: 絶対;
左: 300ピクセル;
トップ: 200ピクセル;
ボーダー: 1 ピクセルの黒一色。
表示: なし。
背景: #cccccc;
カーソル: デフォルト;
幅: 300ピクセル;
z インデックス: 10;
不透明度: 1;
}
#title{
border: 1px ソリッド #1840C4;
背景: #95B4DC;
パディング: 2px;
フォントサイズ:12px;
カーソル: デフォルト;
}
#close{
カーソル: ポインタ;
右マージン: 1px;
オーバーフロー: 非表示;
}
#content{
border: 1px ソリッド #C2D560;
背景: #EFF4D7;
}
#t{
margin-right:145px;
}
#mask{
z-index: 1;
背景: #fff;
幅: 1024px;
高さ: 800ピクセル;
}
#b{
位置: 絶対;
左: 200ピクセル;
上: 100ピクセル;
}
body{
パディング: 0px;
マージン: 0px;
}
#over{
背景: 透明;
}


2 番目の方法:
メッセージ ボックス マスク レイヤー:
何もありません...
'

ページを読み込み中です:


フローティング ウィンドウを閉じます:ウィンドウを閉じるには小さな画像を使用することをお勧めします

フローティング ウィンドウを開きます: フローティング ウィンドウを開きます< /a>

コードをコピーします コードは次のとおりです:

// メッセージボックス読み込み
関数読み込み (){
var o = $('#body_loading');
o.css("left",(($(document).width())/2-( parseInt(o.width() )/2)) "px");
o.css("top",(($(document).height() $(document).scrollTop())/2- (parseInt(o.height( ))/2)) "px");
o.fadeIn("fast");
}
// メッセージボックスが消える
functionloaded() {
var o = $ ('#body_loading');
o.fadeOut("fast")
}
//フローティング ウィンドウを非表示にする
function Hideupload(){
$('#show_upload').hide();
$('#show_upload_iframe').hide();
}
// フローティング ウィンドウをポップアップします
function showupload(ajaxurl){
loading();
var o=$('#show_upload');
var top = 200; {
url: ajaxurl,
//cache: false,
success: function(res){
o.html(res); ("left",(($(document ).width())/2-(parseInt(o.width())/2)) "px"); >200){
top = ($(document).height() $(document).scrollTop())/2-(parseInt(o.height())/2); >o.css("top",top "px");
f.css({'width':o.width(),'height':o.height(),'left':o.css ('左'),'トップ': o.css('トップ')});
f.show()
}
}; 🎜>}

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQeury がフェードインおよびフェードアウトするときに注意する必要がある問題_jquery次の記事：jQeury がフェードインおよびフェードアウトするときに注意する必要がある問題_jquery

関連記事

続きを見る