問下有這樣的JavaScript特效嗎


在頁面上有個按鈕,點按鈕在當前頁面打開一個懸浮層,在懸浮層上有個按鈕可以關閉這個懸浮層,
而且這個懸浮層可以拖動。

謝謝

11 个解决方案

#1


想想 QQ空間的裝扮  不就跟你說的一樣么?

#2


肯定有撒  前端開發人員肯定可以做了  偶js不是很好  
在網上都可以搜到 的   那個懸浮層是類似於對話框的  還是就是一個漂浮的層?
彈出層的時候可以點擊頁面么 

#3


呵呵,我知道肯定有了,但是搜了下總是不和要求,所以偷下懶 在這里問下

#4


多了去了,你百度下,.net頁面彈出層,出來一推源代碼

#5



<%@ Page  Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>無標題頁</title>

    <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(function(){
           $("#Button1").click(function(){
               $("#divShow").show();
           });
           $("#exit").click(function(){
               $("#divShow").hide();
           });
       });
    </script>

 
</head>
<body>   
    <form id="form1" name="form1" runat="server" action="">  
    <input id="Button1" type="button" value="打開層" />
    <div id="divShow" style="width:100px;height:100px; display:none; background-color:Red;"> 
            <a id="exit">關掉</a>
    </div>
    </form>    
    
</body>
</html>

#6


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>【AJAX】加載外部頁面的一個彈出層效果代碼 - www.webdm.cn</title>
<style>
body {margin:0px}
#Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}
.LoadContent {width:100%;height:100%;overflow:auto}
</style>
<script LANGUAGE="JavaScript"> 
<!-- 
function $(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);}
var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50;
function OpenDiv(_Dw,_Dh,_Desc) {
$("Loading").innerHTML="Loading...";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("Loading").style.display='';
if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50))}else if(_Dw<_Dh){ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/50))}
$("Loading").style.top=(document.documentElement.clientHeight-10)/2+"px";
$("Loading").style.left=(document.documentElement.clientWidth-10)/2+"px";
OpenNow()
}
var Nw=10,Nh=10;
function OpenNow() {
if (Nw>OverW-ChangeW)ChangeW=2;
if (Nh>OverH-ChangeH)ChangeH=2;
Nw=Nw+ChangeW;Nh=Nh+ChangeH;
 
if(OverW>Nw||OverH>Nh) {
if(OverW>Nw) {
$("Loading").style.width=Nw+"px";
$("Loading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
}
if(OverH>Nh) {
$("Loading").style.height=Nh+"px";
$("Loading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
}
window.setTimeout("OpenNow()",10)
}else{
Nw=10;Nh=10;ChangeH=50;ChangeW=50;
AjaxGet(ChangeDesc)
}
}

//創建XML對象
function createXMLHttps(){
var ret = null;
try {ret = new ActiveXObject('Msxml2.XMLHTTP')}
catch (e) {
try {ret = new ActiveXObject('Microsoft.XMLHTTP')}
        catch (ee) {ret = null}
}
if (!ret&&typeof XMLHttpRequest !='undefined') ret = new XMLHttpRequest();
return ret;
}
 
function AjaxGet(URL) {
var xmlhttp = createXMLHttps();
xmlhttp.open("Get",URL,true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status==404) {$("Loading").innerHTML='讀取頁面失敗,文件'+URL+'不存在!';return}
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$("Loading").innerHTML="<div class='LoadContent'>"+xmlhttp.responseText+"</div>";
}
}
xmlhttp.send(null);
}
//-->
</script> 
</head>
<body>
  <a href="javascript:OpenDiv(500,300,'index.html')">Webdm.cn 首頁 500*300</a><br><br>
  <a href="javascript:OpenDiv(500,200,'index.html')">Test 500*200</a><br><br>
  <a href="javascript:OpenDiv(200,500,'l.html')">www.webdm.cn
200*500</a><br><br>
<div id="Loading" style="display:none" ondblclick="this.style.display='none'"></div>
注意:需加載的文件必須在子目錄下,也就是本文件需處於上級才行。頁面編碼UTF8。
</body>
</html>

<a href="http://www.webdm.cn">網頁代碼站</a> - 最專業的代碼下載網站 - 致力為中國站長提供有質量的代碼!

#7


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>【薦】兼容火狐/IE瀏覽器可拖拽的彈出層 - www.webdm.cn</title>
<style type="text/css">
.button1 {background: #ebebeb;
border: 1px solid #888888;
   color:#333333;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   height:23px;
      cursor:pointer }
  </style>
<script language="javascript">
function alertWin(title, msg, w, h){
var s=document.getElementsByTagName("select"); //--------------把所有select標簽捉住
for(var j=0;j<s.length;j++){s[j].style.display="none";} //--------------設為不顯示,再進行下面操作
var titleheight = "20px"; // 提示窗口標題高度
var bordercolor = "#666699"; // 提示窗口的邊框顏色
var titlecolor = "#FFFFFF"; // 提示窗口的標題顏色
var titlebgcolor = "#1d5798"; // 提示窗口的標題背景色
var bgcolor = "#FFFFFF"; // 提示內容的背景色
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
var bgObj = document.createElement("div");
bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div");
msgObj.style.cssText = "position:absolute;font:11px '宋體';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
document.body.appendChild(msgObj);
var table = document.createElement("table");
msgObj.appendChild(table);
table.style.cssText = "margin:0px;border:0px;padding:0px;";
table.cellSpacing = 0;
var tr = table.insertRow(-1);
var titleBar = tr.insertCell(-1);
titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋體';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
titleBar.style.paddingLeft = "10px";
titleBar.innerHTML = title;
var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
titleBar.onmousedown = function() {
var evt = getEvent();
moveable = true;
moveX = evt.clientX;
moveY = evt.clientY;
moveTop = parseInt(msgObj.style.top);
moveLeft = parseInt(msgObj.style.left);
document.onmousemove = function() {
if (moveable) {
var evt = getEvent();
var x = moveLeft + evt.clientX - moveX;
var y = moveTop + evt.clientY - moveY;
if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) {
msgObj.style.left = x + "px";
msgObj.style.top = y + "px";
}
}
};
document.onmouseup = function () {
if (moveable) {
document.onmousemove = docMouseMoveEvent;
document.onmouseup = docMouseUpEvent;
moveable = false;
moveX = 0;
moveY = 0;
moveTop = 0;
moveLeft = 0;
}
};
}
var closeBtn = tr.insertCell(-1);
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
closeBtn.onclick = function(){
for(var j=0;j<s.length;j++){s[j].style.display="";} //--------------再給select顯出來
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
}
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.cssText = "font:10pt '宋體';";
msgBox.colSpan  = 2;
msgBox.innerHTML = msg;
// 獲得事件Event對象,用於兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
}
</script>
</head>
<body>
<input type="button"  value="  點這里  " class="button1" onclick="alertWin('網頁代碼站','歡迎您的到來!',600,150);" />
<select>
<option>獲得事件Event對象,用於兼容IE和FireFox</option>
</select>
</body>
</html>

#8


我上面發的兩個中第二個應該能滿足你的需要

#9



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>選擇改變效果層的隱藏和顯示</title>
<LINK href="image/style.css" type="text/css" rel="stylesheet">
</head>
<SCRIPT language="javascript"> 
 
function workshow(div){
document.getElementById(div).style.display='block';
}
 
function workclose(div){
document.getElementById(div).style.display='none';
}
 
function show(area){
document.getElementById('workarea').value=area;  //選擇地點顯示在按鈕上
document.getElementById('worksearch').style.display='none';  //選擇層隱藏
}
</SCRIPT>
<body>
 
 
<INPUT type="botton" name="workarea" id="workarea" value="工作地點" onClick="workshow('worksearch');" class="searcharea"></A></TD>

<DIV class="search-top" id="worksearch">
<DIV class="search-menu"><TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
  <TR>
    <TD><IMG src="image/orangearrow.gif"> <SPAN class="white">請選擇工作地點</SPAN></TD>
    <TD align="right"><A href="javascript:workclose('worksearch')" class="A-white">[關 閉]</A>&nbsp;</TD>
  </TR>
</TABLE></DIV>
<DIV><TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
  <TR align="center">
    <TD><A href="javascript:show('北京市')">北京市</A></TD>
    <TD><A href="javascript:show('上海市')">上海市</A></TD>
    <TD><A href="javascript:show('廣東省')">廣東省</A></TD>
    <TD><A href="javascript:show('深圳市')">深圳市</A></TD>
    <TD><A href="javascript:show('天津市')">天津市</A></TD>
    <TD><A href="javascript:show('重慶市')">重慶市</A></TD>
  </TR>
  <TR align="center">
    <TD><A href="javascript:show('江蘇省')">江蘇省</A></TD>
    <TD><A href="javascript:show('浙江省')">浙江省</A></TD>
    <TD><A href="javascript:show('四川省')">四川省</A></TD>
    <TD><A href="javascript:show('海南省')">海南省</A></TD>
    <TD><A href="javascript:show('福建省')">福建省</A></TD>
    <TD><A href="javascript:show('山東省')">山東省</A></TD>
  </TR>
  <TR align="center">
    <TD><A href="javascript:show(江西省'')">江西省</A></TD>
    <TD><A href="javascript:show('廣西')">廣西</A></TD>
    <TD><A href="javascript:show('安徽省')">安徽省</A></TD>
    <TD><A href="javascript:show('河北省')">河北省</A></TD>
    <TD><A href="javascript:show('河南省')">河南省</A></TD>
    <TD><A href="javascript:show('湖北省')">湖北省</A></TD>
  </TR>
  <TR align="center">
    <TD><A href="javascript:show('湖南省')">湖南省</A></TD>
    <TD><A href="javascript:show('陝西省')">陝西省</A></TD>
    <TD><A href="javascript:show('山西省')">山西省</A></TD>
    <TD><A href="javascript:show('黑龍江省')">黑龍江省</A></TD>
    <TD><A href="javascript:show('遼寧省')">遼寧省</A></TD>
    <TD><A href="javascript:show('吉林省')">吉林省</A></TD>
  </TR>
  <TR align="center">
    <TD><A href="javascript:show('雲南省')">雲南省</A></TD>
    <TD><A href="javascript:show('貴州省')">貴州省</A></TD>
    <TD><A href="javascript:show('甘肅省')">甘肅省</A></TD>
    <TD><A href="javascript:show('內蒙古')">內蒙古</A></TD>
    <TD><A href="javascript:show('寧夏')">寧夏</A></TD>
    <TD><A href="javascript:show('西藏')">西藏</A></TD>
  </TR>
  <TR align="center">
    <TD><A href="javascript:show('新疆')">新疆</A></TD>
    <TD><A href="javascript:show('青海省')">青海省</A></TD>
    <TD><A href="javascript:show('香港')">香港</A></TD>
    <TD><A href="javascript:show('澳門')">澳門</A></TD>
    <TD><A href="javascript:show('台灣')">台灣</A></TD>
    <TD><A href="javascript:show('國外')">國外</A></TD>
  </TR>
</TABLE>
</DIV>
</DIV>
</DIV>
</DIV>
</body>
</html>


#10


代碼 好多哦  其實網上都一大堆 稍微改下都符合自己 的要求了

#11


哎,在網上找了半天資料才通過jQuery實現了這個功能,
結果另外一個同事說了句,弄一個浮動層,通過按鈕控制顯隱,加上鼠標移動事件就行了。
悲哀啊,這么簡單的辦法都沒有想到
关注微信公众号

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com