`

DIV固定在屏幕的中间/两侧,不随滚动条移动而改变位置

 
阅读更多

<!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>随滚动条移动的层 - 威海ABC-http://www.0631abc.com</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="haiwa">
<META NAME="homepage" CONTENT="www.0631abc.com">
</HEAD>
<style>
<!--
.div{
    position: absolute;
    border: 2px solid red;
    background-color: #EFEFEF;
    line-height:90px;
    font-size:12px;
    z-index:1000;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
    document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
    document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}
</SCRIPT>

<div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
    document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
    document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>

<div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
    document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
    document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>

<div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
    document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
    document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}
</SCRIPT>

<div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
    document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
    document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";
}
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">
<!--
function scall(){
    sc1();sc2();sc3();sc4();sc5();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"></div>
</BODY>
</HTML>

 

分享到：
| java 获取绝对路径
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    跟随屏幕滚动的对联广告代码

    在IT行业中，对联广告是一种常见的网页元素，它通常出现在网页两侧，随着用户滚动页面而保持固定在屏幕上，以此提高广告的可见性和点击率。这种广告形式尤其适用于内容丰富的长篇网页，如新闻网站或博客。现在，我们...

    div两侧浮动广告 可隐藏 附加非div两侧浮动

    "div 两侧浮动广告 可隐藏 附加非div两侧浮动" 这个主题涉及到的是如何在网页的左右两侧放置浮动广告，并且这些广告能够根据需要隐藏，同时还能在非 div 元素的两侧添加浮动元素。 首先，我们来理解“div 两侧浮动...

    vue中实现拖动调整左右两侧div的宽度的示例代码

    在本文中，我们将深入探讨如何使用Vue.js来实现一个拖动调整左右两侧div宽度的功能。这个功能允许用户通过拖动一个中间的分割条来动态调整相邻div的宽度。这对于创建可响应的布局和提供用户友好的界面非常有帮助。 ...

    DIV+CSS布局大全

    - **流式布局**：使用百分比单位让元素随屏幕尺寸变化而变化。 - **Flexbox响应式布局**：利用Flexbox的特性实现自适应布局。 - **Grid响应式布局**：利用CSS Grid布局实现更复杂的响应式布局。 #### 六、高级布局...

    js 右侧图片随着鼠标滚动

    为了实现图片跟随鼠标滚动的效果，我们需要监听滚动事件并根据滚动条的位置调整图片的位置。下面是一个简单的实现方法： ```javascript window.addEventListener('scroll', function() { var imgElement = ...

    div+css属性.pdf

    4. `background-attachment`：决定背景图像是否随滚动条移动，`fixed` 为固定，`scroll` 为随滚动条移动。 5. `background-position`：设置图像位置，如 `background-position: left top;`。 6. 使用简写属性 `...

    jsp 页面分割线，鼠标可以拖动

    当用户按下鼠标并移动时，分割线会随之移动，改变两侧内容的相对大小。这需要我们在JavaScript代码中计算鼠标的位置，并相应地更新分割线的位置。 实现这一功能的关键步骤包括： 1. 创建分割线HTML元素，并设置...

    js左右两侧滑动展开菜单代码

    /* 固定定位，使其不随页面滚动 */ top: 0; bottom: 0; width: 300px; background-color: #f8f9fa; } #sidebar-right { position: fixed; right: 0; top: 0; bottom: 0; width: 300px; background-...

    web开发—页面小广告

    - **跟随滚动条移动**：通过`window.onscroll`事件监听滚动行为，并调用`move()`函数更新广告位置。 ```javascript window.onscroll = move; function move() { var sleft = document.body.scrollLeft; var ttop...

    小程序click-scroll组件设计

    本文将深入探讨小程序中的click-scroll组件设计，该组件旨在解决在页面中展示大量内容时，滚动条过多导致页面混乱的问题。click-scroll组件提供了一种简洁的交互方式，使得用户可以通过点击和拖动来查看超出组件可视...

    js 左右悬浮对联广告代码示例

    ### 知识点详解 #### 左右悬浮对联广告代码概念 ...同时，对联广告的移动速度、位置固定和显示逻辑应根据具体需求进行自定义。在投放广告时，也应当遵循相关广告法规和道德准则，避免对用户造成干扰。

    jQuery实现的无缝广告图片左右滚动功能详解

    - **CSS样式**：设置滚动区域的样式，例如宽度、高度、溢出隐藏等，以确保内容正确滚动且不显示滚动条。 - **JavaScript实现**：通过 `var scrollBar = function()` 来定义滚动的逻辑，利用 `setInterval` 来控制...

    Jqurey实现类似EasyUI的页面布局可改变左右的宽度

    在本文中，我们将深入探讨如何使用jQuery来实现一个类似EasyUI的页面布局，允许用户动态改变左右两侧div的宽度。EasyUI是一个基于jQuery的UI框架，提供了丰富的组件和灵活的布局选项，使得开发者能够轻松创建出美观...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    85:沪江英语网3图弹性广告下载 86：SOHU体育flash图片轮换下载 87:MSN频道4屏新闻广告效果下载 88：用层实现的滚动条效果下载 89:迅雷网七屏flash广告轮换下载 90：奥林匹克运动会焦点广告下载 91:一种选项卡样式...

    JS中Swiper的使用和轮播图效果

    3. 滚动条（scrollbar）：添加一个带有swiper-scrollbar类的div元素，可以在容器的底部添加一个滚动条，用以指示当前滚动的位置。 Swiper的配置灵活性很高，开发者可以使用官网提供的API进行深入自定义，以满足不同...

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    85:沪江英语网3图弹性广告下载 86：SOHU体育flash图片轮换下载 87:MSN频道4屏新闻广告效果下载 88：用层实现的滚动条效果下载 89:迅雷网七屏flash广告轮换下载 90：奥林匹克运动会焦点广告下载 91:一种选项卡样式...

    学习DIV+CSS难不难 需要掌握哪些知识

    6. **溢出（overflow）**：控制内容超出元素边界时的行为，可用于处理滚动条和浏览器兼容性问题。 7. **边框（border）**：设定元素边框的宽度、样式和颜色。 8. **列表样式（list-style）**：包括图像、位置和类型...

    sidebar

    "在视觉上做浮游生物"可能是指侧边栏随着页面滚动而保持固定在屏幕一侧的效果，这种效果称为“粘性侧边栏”或“固定侧边栏”，可以提高用户体验，使用户在任何时间都能快速访问侧边栏的内容。 "菜单侧面，标题为...

    HTML5+CSS3开发商业站点Chapter7.pptx

    - **适用场景**：适用于不需要滚动条的容器。 3. **使用after伪元素**：在父元素使用`:after`伪元素，并设置`content: "";`以及`clear: both;`。 - **适用场景**：适用于对HTML结构有要求的情况。 4. **使用...

    css-dictionary(CSS常用英语词汇详解)

    CSS中的`position:fixed`属性用于固定元素在视口中的位置，即使页面滚动也不会移动。 - **Four**: 四个。数量词，可用于描述CSS中的多个值，如`margin:10px 20px 30px 40px`。 - **GIF**: 一种图像格式。广泛用于...

Magicbox
Global site tag (gtag.js) - Google Analytics