查看效果: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&companyID=195572&configID=174342&skillId=10416&enterurl=http%3A%2F%2Fwww.leyikao.com%2Fbaoming%2F&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实现百度百科底部浮动导航页面滚动预览详解》 在网页设计中,提升用户体验是一项重要的任务,而底部浮动导航栏则是一种常见的优化手段。它可以让用户在浏览长页面时,始终保持导航菜单可见,便于快速跳转。...
提供的文件“网页底部浮动导航条.html”可能是示例代码,通过查看和分析此文件,可以了解具体实现细节,如HTML结构、CSS样式和可能的JavaScript代码。实践中,可以参考该示例并根据自己的需求进行调整。 总结,网页...
在网页中添加一个添加浮动按钮,点击该按钮则滚动到网页底部。纯JavaScript。在IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常。 相关说明文章:...
实现网页底部浮动通栏的技术主要包括HTML、CSS和JavaScript三大部分: 1. HTML(HyperText Markup Language):用于构建页面的基本结构,可以创建如链接、段落、标题等元素。在这个场景中,HTML可能会定义浮动通栏...
在网页设计中,"广告代码网站底部浮动弹出"是一种常见的广告展示形式,它通常用于在用户浏览页面时,从页面底部以浮动的方式弹出广告、提示信息或视频内容。这种设计可以吸引用户的注意力,同时不会完全遮挡主要内容...
在网页设计中,为了增强用户体验和视觉效果,经常会使用到各种动态效果,其中"jQuery网页底部阴影浮动层文字滚动"就是一个常见的交互设计手法。这个效果主要用于在网页底部创建一个带有阴影效果的浮动层,上面的文字...
总的来说,创建网页底部浮动通栏和导航条需要结合HTML结构、CSS样式和可能的JavaScript交互。设计时应考虑响应式布局,确保在不同设备和屏幕尺寸上都能良好显示。理解并熟练运用这些技术,可以提升网页的用户体验,...
在网页设计中,有时我们需要实现一种效果:当用户滚动页面至底部时,一个浮动层会自动弹出显示信息。这种功能常用于展示广告、提示消息或者加载更多内容等。jQuery库提供了一种简单且强大的方式来实现这样的交互效果...
- `css`、`images`、`js`:这三个目录分别存储了CSS样式文件、图像资源和JavaScript代码。 总的来说,这个设计模式结合了现代Web技术,以提供更佳的用户导航体验。通过理解并应用这些知识点,开发者可以创建出更...
网页底部浮动通栏特效代码是一种常见的网页设计技术,主要用于创建在页面滚动时始终保持在屏幕底部的横幅或栏。这种效果常用于放置版权信息、联系方式、社交媒体图标等,确保用户在浏览网页时能轻松访问这些内容。...
本例中提到了“jquery仿百度百科底部浮动导航特效”,说明使用了jQuery库来实现特定的页面效果。 2. CSS浮动布局:在本例的CSS代码中使用了“float”属性,这表明了页面布局使用了浮动的方式。浮动布局是Web开发中...
总的来说,"js浮动框示例"是一个展示如何使用JavaScript、HTML和CSS实现交互式浮动信息窗口的例子。通过理解和实践这个示例,开发者可以掌握创建动态、可交互网页元素的技能,提升网站的用户体验。
`index.html`是网页的主体部分,它包含了HTML结构和引用外部JS脚本的地方,而`Ad.js`则是实现浮动广告功能的JavaScript代码。 在`index.html`中,你需要在合适的位置引入`Ad.js`,通常是`<head>`标签内的`<script>`...
然而,当涉及到JavaScript(简称JS)时,我们可以进一步增强这些浮动元素,例如添加动态效果或者交互性。在这个场景中,"js设置浮动div的特效"指的是使用JavaScript来操控浮动的`div`元素,以实现更复杂的视觉表现。...
浮动菜单(Fixed Menu)则指的是菜单在页面滚动时始终保持在屏幕的某一位置,如顶部或底部,这样用户无需滚动回顶部就能访问导航。在CSS中,我们可以使用`position: fixed;`属性来实现这一效果。 接下来,我们来看...
网页的浮动飘窗,也称为悬浮窗口或浮动广告,是一种常见的网页设计技术,它使得某个元素(通常是广告、通知或导航菜单)在用户滚动页面时始终保持在屏幕的特定位置。这种效果可以增加用户体验,因为用户无需滚动回...
JavaScript(简称JS)是一种轻量级的编程语言,常用于网页和网络应用开发,包括创建交互式的用户界面。在本例中,我们关注的是利用JS实现的网页浮动广告。浮动广告是指在用户浏览网页时,始终停留在屏幕某一位置,...
需要注意的是,为了让图片在页面加载后立即开始浮动,这段JS代码应放在`<body>`标签的底部,或者通过`window.onload`或`DOMContentLoaded`事件来确保DOM已经完全加载。 此外,为了使浮动效果更平滑,可以考虑使用...
本文将深入探讨如何使用 jQuery UI 实现一个功能:当页面滚动到底部时,显示一个浮动的弹出层,用于展示图文列表。这个功能在许多网站中常见,比如加载更多内容、展示评论或广告等。 首先,我们需要理解 jQuery UI ...