`
happyforever82
  • 浏览: 122425 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

div置顶的效果

阅读更多

<script type="text/javascript">
var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;
function DialogShow(showdata,ow,oh,w,h){  //显示DIV置顶层
  var objDialog = document.getElementById("DialogMove");
  if (!objDialog)
  objDialog = document.createElement("div");
  t_DiglogW = ow;
  t_DiglogH = oh;
  DialogLoc();
  objDialog.id = "DialogMove";
  var oS = objDialog.style;
  oS.display = "block";
  oS.top = t_DiglogY + "px";
  oS.left = t_DiglogX + "px";
  oS.margin = "0px";
  oS.padding = "0px";
  oS.width = w + "px";
  oS.height = h + "px";
  oS.position = "absolute";
  oS.zIndex = "5";
  oS.background = "#FFF";
  oS.border = "solid #000 1px";
  objDialog.innerHTML = showdata;
  document.body.appendChild(objDialog);
}
function DialogHide(){  //关闭div置顶层的主调
  ScreenClean();
  var objDialog = document.getElementById("DialogMove");
  if (objDialog)
  objDialog.style.display = "none";
}
function DialogLoc(){  //计算div窗口位置
  var dde = document.documentElement;
  if (window.innerWidth){
  var ww = window.innerWidth;
  var wh = window.innerHeight;
  var bgX = window.pageXOffset;
  var bgY = window.pageYOffset;
  }else{
  var ww = dde.offsetWidth;
  var wh = dde.offsetHeight;
  var bgX = dde.scrollLeft;
  var bgY = dde.scrollTop;
  }
  t_DiglogX = (bgX + ((ww - t_DiglogW)/2));
  t_DiglogY = (bgY + ((wh - t_DiglogH)/2));
}
function ScreenConvert(){  //整个页面区域加屏蔽层
  var objScreen = document.getElementById("ScreenOver");
  if(!objScreen)
  var objScreen = document.createElement("div");
  var oS = objScreen.style;
  objScreen.id = "ScreenOver";
  oS.display = "block";
  oS.top = oS.left = oS.margin = oS.padding = "0px";
  if (document.body.clientHeight) {
  var wh = document.body.clientHeight + "px";
  }else if (window.innerHeight){
  var wh = window.innerHeight + "px";
  }else{
  var wh = "100%";
  }
  oS.width = "100%";
  oS.height = wh;
  oS.position = "absolute";
  oS.zIndex = "3";
  oS.background = "#cccccc";
  oS.filter = "alpha(opacity=50)";
  oS.opacity = 40/100;
  oS.MozOpacity = 40/100;
  document.body.appendChild(objScreen);
  var allselect = document.getElementsByTagName("select");
  for (var i=0; i<allselect.length; i++)
  allselect[i].style.visibility = "hidden";
}
function ScreenClean(){  //清屏
  var objScreen = document.getElementById("ScreenOver");
  if (objScreen)
  objScreen.style.display = "none";
  var allselect = document.getElementsByTagName("select");
  for (var i=0; i<allselect.length; i++)
  allselect[i].style.visibility = "visible";
}
function Demo(string){ //主调
  ScreenConvert();
  var ShowDiv="<div style=\"padding:10px;\">"+string+" <br /><br /><input type=\"button\" onclick=\"DialogHide();\" value=\" 关闭 \"></div>";
  DialogShow(ShowDiv,250,120,300,100);
}
</script>
<style>
body{margin:0}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
Demo('________');
//-->
</SCRIPT>

分享到:
评论

相关推荐

    网页局部div随滚动条置顶滚动

    在实现div置顶滚动的效果时,主要涉及到CSS的`position`属性。`position`属性有多个值,如`static`(默认值)、`relative`、`absolute` 和 `fixed`。在这里,我们需要使用 `fixed` 值,它会使元素相对于浏览器窗口...

    多个iframe,其中一个的div能够处于最上层显示

    在网页设计中,`iframe` 是一种非常有用的元素,它允许我们在一个页面中嵌入另一个网页。当有多个 `iframe` 并存时,可能会出现重叠...在实践中,根据具体项目的需求和结构,可能需要进行微调和测试以达到最佳效果。

    多个iframe,显示其中一个frame中的div,并处于最上层显示

    在网页设计和开发中,有时候我们需要处理多个`iframe`(内联框架)并实现特定的交互效果,例如只显示其中一个`iframe`中的`div`元素,并确保它在所有其他元素之上,即处于最上层显示。这样的需求通常出现在需要创建...

    javascript网页置顶

    JavaScript网页置顶是一种常见的网页交互效果,它允许页面上...通过理解和实践这些知识点,开发者可以有效地在网页上实现置顶效果,提升用户体验。同时,随着Web技术的不断发展,网页置顶也有更多创新和优化的可能性。

    jQuery实现页面向下滚动超过一屏时会自动出现的置顶工具条效果.zip

    在网页设计中,为了提供更好的用户体验,经常需要实现一种效果:当用户滚动页面超过一屏时,顶部导航栏会固定在浏览器窗口的顶部,这种效果通常被称为“置顶工具条”或“固定顶部导航”。本教程将介绍如何使用jQuery...

    和讯博客置顶代码

    但有时,用户可能希望自定义置顶的方式,比如通过JavaScript或者CSS代码来实现更个性化的置顶效果。这时,就需要对HTML、CSS以及JavaScript有一定的了解。例如,你可以使用JavaScript来控制文章的显示顺序,通过CSS...

    jquery带置顶右侧在线客服.zip

    可以使用position: fixed属性实现置顶效果。 ```css #online客服 { position: fixed; bottom: 0; right: 0; /* 其他样式 */ } ``` 3. jQuery事件处理:利用jQuery的事件监听功能,实现点击打开/关闭客服窗口、...

    jQuery简单实现页面元素置顶时悬浮效果示例

    在网页设计中,有时我们需要创建一种效果,使得页面上的某个元素在用户滚动页面时始终保持在视口顶部,这种效果被称为“置顶悬浮”或者“固定定位”。jQuery 提供了一个便捷的方式来实现这一效果,通过监听滚动事件...

    jQuery百度经验步骤置顶代码.zip

    总之,“jQuery百度经验步骤置顶代码”是一个实用的网页特效,通过jQuery的特性结合CSS和DOM操作,实现了步骤条的动态置顶效果。开发者在学习和使用这个代码时,不仅可以提升自己的jQuery技能,还能了解如何创建交互...

    div当滚动到页面顶部的时候固定在顶部实例代码

    8. 当滚动回到div的原始位置时,通过检查`position`属性并将其恢复为`static`,以取消固定效果。 总的来说,这个实例展示了如何利用JavaScript(特别是jQuery库)和CSS来创建一个在页面滚动时固定在顶部的导航栏。...

    菜单置顶swiperjq锚链接

    &lt;div id="section1"&gt;Section 1 Content&lt;/div&gt; ``` 然后,在Swiper.js配置中启用`hashnav`和`hashnavWatchState`选项,以启用基于哈希的导航,并确保滑动状态与URL中的哈希同步: ```javascript var swiper = new ...

    jQuery页面滚动导航栏悬浮置顶特效源码.zip

    综上所述,通过jQuery和CSS,我们可以轻松地实现页面滚动时导航栏的悬浮置顶效果。在实际开发中,可以根据项目需求进行微调,比如添加更复杂的动画效果,或者调整导航栏在不同滚动位置的样式。这个过程不仅展示了...

    阿里云首页图片旋转效果

    阿里云首页的图片旋转效果是网站设计中一种常见的动态展示手法,它能够吸引用户的注意力,增加网站的互动性和视觉吸引力。这种效果通常是通过JavaScript库,如JQuery来实现的。以下我们将深入探讨如何使用JQuery实现...

    ztree右击上移下移.rar

    通过理解zTree的工作原理和事件机制,我们可以轻松实现节点的上移、下移、置顶和置底,以及隐藏div等交互效果,从而提升应用的易用性和用户体验。在实际开发中,结合项目需求,灵活运用zTree的各种特性,将有助于...

    js仿淘宝网店版左侧弹出菜单(可置顶)

    本示例"js仿淘宝网店版左侧弹出菜单(可置顶)"旨在教你如何利用JavaScript技术实现类似淘宝网店的左侧弹出菜单,该菜单具备可置顶和展开/收起的功能,从而为用户带来更加便捷的操作体验。 首先,我们要理解...

    wordpress如何设置文章置顶以及区分置顶文章与普通文章

    可以根据需求调整颜色和边框样式,以创建出美观且引人注目的置顶文章效果。 通过以上方法,你不仅可以轻松设置WordPress文章置顶,还能通过视觉差异使读者清楚地识别出置顶文章。这些自定义调整有助于提升用户体验...

    jQuery实现置顶导航新闻图片tab选项卡切换特效源码.zip

    在本资源中,我们主要关注的是使用jQuery库来创建一个置顶导航的新闻图片Tab选项卡切换效果。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等任务。这个源码示例将...

    网页左栏目右栏目相互移动,全部移动,单个移动,置顶,置底,向上向下

    在网页设计中,布局是至关重要的元素之一,尤其对于那些包含多个栏目的页面。"网页左栏目右栏目相互移动"这个主题涉及到...在实际项目中,还需要考虑响应式设计,确保在不同设备和屏幕尺寸下都能呈现出良好的视觉效果。

Global site tag (gtag.js) - Google Analytics