问下有这样的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实现了这个功能,
结果另外一个同事说了句,弄一个浮动层,通过按钮控制显隐,加上鼠标移动事件就行了。
悲哀啊,这么简单的办法都没有想到
智能推荐

注意!

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



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

赞助商广告