`
jjklmm
  • 浏览: 57056 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

底部浮动js

阅读更多

查看效果:http://www.leyikao.com

 

源代码如下:

 

<!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>底部浮动js</title>
</head>
<style>
#wgcss_dingwei { background-position: top center; position: absolute; width:1040px;height:94px; z-index: 10000;}
#wgcss_k { width:1040px; z-index: 8999;height:94px; overflow:hidden;}
</style>
<body>
<div id="wgcss_dingwei">
 <div id="wgcss_k"><img src="http://www.leyikao.com/templets/default/Images/bottomnav.png" width="1040" height="94" border="0" usemap="#Map31" />
<map name="Map31" id="Map31">
  <area shape="rect" coords="145,56,236,89" href="http://chat10.live800.com/live800/chatClient/chatbox.jsp?jid=1340831441&amp;companyID=195572&amp;configID=174342&amp;skillId=10416&amp;enterurl=http%3A%2F%2Fwww.leyikao.com%2Fbaoming%2F&amp;tm=1341218397608" target="_blank" />
  <area shape="rect" coords="387,57,480,88" href="http://www.leyikao.com/category/32/" target="_blank" />
  <area shape="rect" coords="665,56,757,87" href="http://www.leyikao.com/category/32/" target="_blank" />
  <area shape="rect" coords="886,56,988,88" href="http://www.leyikao.com/baoming/" target="_blank" />
</map>
 </div>
</div>
</body>
</html>
<script>
function piaofu_div(){
var bottompiaofu=document.getElementById("wgcss_dingwei");
bottompiaofu.style.left=(document.documentElement.scrollWidth-bottompiaofu.offsetWidth)/2+"px";
bottompiaofu.style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-bottompiaofu.offsetHeight)+'px'
setTimeout(piaofu_div,100);
}
piaofu_div();
</script>

 

 

查看效果:http://www.leyikao.com

 

分享到:
评论

相关推荐

    图片左右浮动底部浮动

    js 图片广告可以左浮动 右浮动 底部浮动 底部浮动是一直置于底部

    jquery百度百科底部浮动导航页面滚动预览

    《jQuery实现百度百科底部浮动导航页面滚动预览详解》 在网页设计中,提升用户体验是一项重要的任务,而底部浮动导航栏则是一种常见的优化手段。它可以让用户在浏览长页面时,始终保持导航菜单可见,便于快速跳转。...

    网页底部浮动导航条

    提供的文件“网页底部浮动导航条.html”可能是示例代码,通过查看和分析此文件,可以了解具体实现细节,如HTML结构、CSS样式和可能的JavaScript代码。实践中,可以参考该示例并根据自己的需求进行调整。 总结,网页...

    添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码

    在网页中添加一个添加浮动按钮,点击该按钮则滚动到网页底部。纯JavaScript。在IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常。 相关说明文章:...

    网页底部浮动通栏.rar

    实现网页底部浮动通栏的技术主要包括HTML、CSS和JavaScript三大部分: 1. HTML(HyperText Markup Language):用于构建页面的基本结构,可以创建如链接、段落、标题等元素。在这个场景中,HTML可能会定义浮动通栏...

    广告代码网站底部浮动弹出

    在网页设计中,"广告代码网站底部浮动弹出"是一种常见的广告展示形式,它通常用于在用户浏览页面时,从页面底部以浮动的方式弹出广告、提示信息或视频内容。这种设计可以吸引用户的注意力,同时不会完全遮挡主要内容...

    jQuery网页底部阴影浮动层文字滚动

    在网页设计中,为了增强用户体验和视觉效果,经常会使用到各种动态效果,其中"jQuery网页底部阴影浮动层文字滚动"就是一个常见的交互设计手法。这个效果主要用于在网页底部创建一个带有阴影效果的浮动层,上面的文字...

    网页底部浮动通栏、导航条

    总的来说,创建网页底部浮动通栏和导航条需要结合HTML结构、CSS样式和可能的JavaScript交互。设计时应考虑响应式布局,确保在不同设备和屏幕尺寸上都能良好显示。理解并熟练运用这些技术,可以提升网页的用户体验,...

    jQuery鼠标滚动条到页面底部浮动层滑动弹出信息

    在网页设计中,有时我们需要实现一种效果:当用户滚动页面至底部时,一个浮动层会自动弹出显示信息。这种功能常用于展示广告、提示消息或者加载更多内容等。jQuery库提供了一种简单且强大的方式来实现这样的交互效果...

    超过一定高度出现左右浮动导航及底部固定导航代码

    - `css`、`images`、`js`:这三个目录分别存储了CSS样式文件、图像资源和JavaScript代码。 总的来说,这个设计模式结合了现代Web技术,以提供更佳的用户导航体验。通过理解并应用这些知识点,开发者可以创建出更...

    网页底部浮动通栏特效代码

    网页底部浮动通栏特效代码是一种常见的网页设计技术,主要用于创建在页面滚动时始终保持在屏幕底部的横幅或栏。这种效果常用于放置版权信息、联系方式、社交媒体图标等,确保用户在浏览网页时能轻松访问这些内容。...

    jquery仿百度百科底部浮动导航特效

    本例中提到了“jquery仿百度百科底部浮动导航特效”,说明使用了jQuery库来实现特定的页面效果。 2. CSS浮动布局:在本例的CSS代码中使用了“float”属性,这表明了页面布局使用了浮动的方式。浮动布局是Web开发中...

    js浮动框示例

    总的来说,"js浮动框示例"是一个展示如何使用JavaScript、HTML和CSS实现交互式浮动信息窗口的例子。通过理解和实践这个示例,开发者可以掌握创建动态、可交互网页元素的技能,提升网站的用户体验。

    兼容各大浏览器的浮动广告JS代码

    `index.html`是网页的主体部分,它包含了HTML结构和引用外部JS脚本的地方,而`Ad.js`则是实现浮动广告功能的JavaScript代码。 在`index.html`中,你需要在合适的位置引入`Ad.js`,通常是`&lt;head&gt;`标签内的`&lt;script&gt;`...

    js设置浮动div的特效

    然而,当涉及到JavaScript(简称JS)时,我们可以进一步增强这些浮动元素,例如添加动态效果或者交互性。在这个场景中,"js设置浮动div的特效"指的是使用JavaScript来操控浮动的`div`元素,以实现更复杂的视觉表现。...

    JavaScript 多级联动浮动菜单

    浮动菜单(Fixed Menu)则指的是菜单在页面滚动时始终保持在屏幕的某一位置,如顶部或底部,这样用户无需滚动回顶部就能访问导航。在CSS中,我们可以使用`position: fixed;`属性来实现这一效果。 接下来,我们来看...

    网页的浮动飘窗(Javascript)

    网页的浮动飘窗,也称为悬浮窗口或浮动广告,是一种常见的网页设计技术,它使得某个元素(通常是广告、通知或导航菜单)在用户滚动页面时始终保持在屏幕的特定位置。这种效果可以增加用户体验,因为用户无需滚动回...

    JS网页浮动广告

    JavaScript(简称JS)是一种轻量级的编程语言,常用于网页和网络应用开发,包括创建交互式的用户界面。在本例中,我们关注的是利用JS实现的网页浮动广告。浮动广告是指在用户浏览网页时,始终停留在屏幕某一位置,...

    js特效--图片浮动

    需要注意的是,为了让图片在页面加载后立即开始浮动,这段JS代码应放在`&lt;body&gt;`标签的底部,或者通过`window.onload`或`DOMContentLoaded`事件来确保DOM已经完全加载。 此外,为了使浮动效果更平滑,可以考虑使用...

    jquery ui页面滚动底部显示浮动弹出层图文列表展示

    本文将深入探讨如何使用 jQuery UI 实现一个功能:当页面滚动到底部时,显示一个浮动的弹出层,用于展示图文列表。这个功能在许多网站中常见,比如加载更多内容、展示评论或广告等。 首先,我们需要理解 jQuery UI ...

Global site tag (gtag.js) - Google Analytics