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

滚动的div

    博客分类:
  • js
阅读更多

<script>
function getPosition() {
var top = document.documentElement.scrollTop;
var left = document.documentElement.scrollLeft;
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
return {top:top,left:left,height:height,width:width};
}

function showPop(){
var width = 300; //弹出框的宽度
var height = 160; //弹出框的高度
var obj = document.getElementById("pop");

obj.style.display = "block";
obj.style.position = "absolute";
obj.style.zindex = "999";
obj.style.width = width + "px";
obj.style.height = height + "px";

var Position = getPosition();
leftadd = (Position.width-width)/2;
topadd = (Position.height-height)/2;
obj.style.top = (Position.top + topadd) + "px";
obj.style.left = (Position.left + leftadd) + "px";

window.onscroll = function (){
var Position = getPosition();
obj.style.top = (Position.top + topadd) +"px";
obj.style.left = (Position.left + leftadd) +"px";
};
}

function hidePop(){
document.getElementById("pop").style.display = "none";
}
</script>

<a href="javascript:showPop()">show</a>
<div id="pop" style="border:1px solid #CCC;display:none;">test<br /><a href="javascript:hidePop();">hide</a></div>

分享到:
评论

相关推荐

    鼠标滚动div内容

    在网页设计中,"鼠标滚动div内容"是一种常见的交互效果,它允许用户通过鼠标滚轮在特定的div区域内浏览上下内容。这种效果通常利用JavaScript(JS)实现,以增强用户体验,尤其是在内容丰富的页面中。接下来,我们将...

    滚动div,实现动态页面切换功能,实现图书翻页

    本文将详细讲解如何通过滚动div来实现这样的功能,让你的页面更加生动且富有交互性。 首先,我们需要理解“滚动div”是什么。在HTML中,div是一个常用的布局元素,可以用来组织网页内容。当我们将div设置为滚动条,...

    css3页面滚动div元素动画特效.zip

    本项目“css3页面滚动div元素动画特效.zip”显然是一个利用CSS3和JavaScript(具体是aos.js插件)来实现这一效果的资源包。下面我们将详细探讨这个主题。 首先,CSS3的动画特性让开发者能够创建出平滑、动态的视觉...

    6种效果jquery页面滚动div层固定插件hcsticky

    总的来说,jQuery HCSticky插件是实现页面滚动div层固定效果的有力工具,通过简单的配置即可实现多样化的效果,极大地提高了网页的交互性和可用性。通过分析`index.html`和各`demo.html`文件,开发者可以深入理解...

    css3页面滚动div元素动画插件aos.js

    AOS(Animate on Scroll)是一款非常流行的JavaScript库,它利用CSS3实现了页面滚动时对div元素进行动画处理的功能。这个插件简化了开发过程,使得无需编写复杂的JavaScript代码就能实现动态效果。 标题提到的"AOS....

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

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计,常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时,某个div元素(通常包含重要信息或导航)始终保持在视口顶部,...

    向上不间断滚动div+css+js模板.docx

    这个结构主要包含一个用于显示滚动内容的`&lt;div&gt;`元素。 ```html &lt;div id="mq"&gt; &lt;!-- 这里放置需要滚动显示的内容 --&gt; &lt;/div&gt; ``` #### 三、CSS样式设置 接下来是CSS部分,这部分主要用于控制滚动内容的外观以及...

    div滚动条 带滚动条的div div滚动条样式

    DIV 滚动条样式详解 在 HTML 中,我们经常需要在 DIV 元素中添加滚动条,以便在内容超出 DIV 区域时,能够滚动查看内容。这篇文章将详细介绍如何使用 CSS 样式表来实现 DIV 滚动条的样式设置。 什么是 DIV 滚动条...

    Div块上下左右循环滚动

    【Div块上下左右循环滚动】是一种常见的网页动态效果,它可以使网页中的某个Div元素实现持续不断的循环滚动,增强用户体验和视觉吸引力。这种效果通常通过JavaScript和CSS技术来实现,尤其在现代网页设计中,...

    jquery使用div实现滚动条效果

    当用户滚动div时,我们可以执行自定义的JavaScript代码,比如更新其他元素的状态或者执行动画效果。 除了基本的滚动事件监听,jQuery还提供了许多相关的函数,如`.scrollTop()`用于获取或设置元素的顶部滚动位置,`...

    Marquee配合DIV实现符合标准的文字滚动

    Marquee配合DIV实现符合标准的文字滚动

    js实现div随浏览器高度变化

    js实现div随浏览器高度变化,主要是高度变化和实现滚动条,还有侧栏显示隐藏,可以作为一个地图开发界面的参考

    DIV滚动悬浮层(滚动条动,层不动)

    在网页设计中,"DIV滚动悬浮层"是一种常见的交互效果,它使得某个元素(通常是一个包含重要信息或功能的div)在用户滚动页面时始终保持在屏幕的特定位置,提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...

    css3页面滚动div元素动画特效特效代码

    css3页面滚动div元素动画特效是一款基于aos.js插件实现的页面滚动元素动画。

    浮动div,页面两边滚随滚动条滚动的DIV

    在本案例中,"页面两边滚随滚动条滚动的DIV"是指一种特殊的效果,即一个div元素会随着用户滚动页面而始终保持在屏幕的一侧可见,这样的设计可以用来显示重要的导航栏或者侧边栏信息。 要实现这种效果,通常需要结合...

    滚动至DIV后,动画显示

    在网页设计中,"滚动至DIV后,动画显示"是一种增强用户体验的常见技术。这个功能通常结合JavaScript(尤其是jQuery库)和CSS3动画来实现,让网页内容在用户浏览到特定区域时动态呈现,增加了视觉吸引力。下面我们将...

    jQuery实现将div的滚动条滚动到指定位置

    当需要控制div元素中的滚动条滚动到特定位置时,jQuery提供了一个简单易用的方法。本篇文章将深入探讨如何利用jQuery实现这一功能。 首先,我们需要了解几个基本概念: 1. **div**: 在HTML中,div(division)是一...

    div滚动条优化

    在网页设计中,div元素是常用的布局容器,而滚动条则是当内容超出div范围时,帮助用户浏览更多内容的重要交互工具。"div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下,通过CSS样式和JavaScript技术来...

Global site tag (gtag.js) - Google Analytics