网页制作教学: 侧边栏浮动广告效果

炎藤 · 发表于 2012-12-8 17:53:24

本帖最后由炎藤于 2012-12-8 02:14 编辑

制作模板，应该从前段开发慢慢学起，这里分享侧边栏浮动广告效果的制作

1. 先完成简单 Style

<style>
body{
margin: 0px;
}
#bigContainer{
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #999;
color: #efd;
}
#content{
float: left;
width: 500px;
background: #333;
padding: 20px;
height: 2000px;
}
#sideBar{
position: fixed;
top: 0px;
padding: 20px;
float: left;
width: 300px;
background-color: #369;
}
</style>

复制代码

关键的是 #sideBar 的position必须是 fixed，这样就可以永久置顶了。

可是 #sideBar 是相对于 #bigContainer 的最右边位置来设置 position 的，在 CSS 中，并没有同时相对两个不同的 container 的设置方案，所以我们需要用到 JavaScript ，来协助我们完整这方面的设置。

2. 准备好 jQuery ，这是一个很强大的 JavaScript 框架，可以帮助我们快速编写 JavaScript 代码。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

复制代码

3. 然后，在 body 前的 JavaScript 部分这样设置 #sideBar 的内容。

<script type="text/javascript">
$(document).ready(function(){
$('#sideBar').offset({left: $('#bigContainer').offset().left + 540});
});
</script>

复制代码

恭喜你，仿 Facebook 固定位置的浮动广告功能完成啦!

完整代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="keywords" content="侧边栏, 浮动, Facebook, 固定位置"/>
<meta http-equiv="description" content="本文介绍固定浏览器位置，又相对 Container 的侧边栏的制作"/>
<meta property="og:description" content="本文介绍固定浏览器位置，又相对 Container 的侧边栏"/>
<title>类似Facebook的固定浮动广告位效果，最精简的代码 - 磨菇科技 | MoguTech</title>
<style>
body{
margin: 0px;
}
a{
color: #09F;
}
#bigContainer{
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #999;
color: #eee;
}
#content{
float: left;
width: 500px;
background: #333;
padding: 20px;
height: 2000px;
}
#sideBar{
position: fixed;
top: 0px;
padding: 20px;
float: left;
width: 300px;
background-color: #369;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#sideBar').offset({left: $('#bigContainer').offset().left + 540});
});
</script>
</head>
<body>
<div id="bigContainer">
<div id="content">
<p>这里介绍 sideBarFloat 的制作</p>
<p>1. 先完成简单 Style</p>
<textarea disabled="true" cols="60" rows="27"><style>
body{
margin: 0px;
}
#bigContainer{
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #999;
color: #efd;
}
#content{
float: left;
width: 500px;
background: #333;
padding: 20px;
height: 2000px;
}
#sideBar{
position: fixed;
top: 0px;
padding: 20px;
float: left;
width: 300px;
background-color: #369;
}
</style></textarea>
<p>关键的是 #sideBar 的<a target="_blank">position</a>必须是 fixed，这样就可以永久置顶了。</p>
<p>可是 #sideBar 是相对于 #bigContainer 的最右边位置来设置 position 的，在 CSS 中，并没有同时相对两个不同的 container 的设置方案，所以我们需要用到 JavaScript ，来协助我们完整这方面的设置。</p>
<p>2. 准备好 jQuery ，这是一个很强大的 JavaScript 框架，可以帮助我们快速编写 JavaScript 代码。</p>
<textarea disabled="true" cols="60" rows="3"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script></textarea>
<p>3. 然后，在 body 前的 JavaScript 部分这样设置 #sideBar 的内容。</p>
<textarea disabled="true" cols="60" rows="6"><script type="text/javascript">
$(document).ready(function(){
$('#sideBar').offset({left: $('#bigContainer').offset().left + 540});
});
</script></textarea>
<p>恭喜你，仿 Facebook 固定位置的浮动广告功能完成啦!</p>
</div>
<div id="sideBar">这里是 #sideBar 的内容。</div>
</div>
</body>
</html>

复制代码

星辰伴月 · 发表于 2013-4-27 23:16:19

不错收藏了！

zz26418264 · 发表于 2013-5-6 14:58:05

提示: 作者被禁止或删除内容自动屏蔽

zz26418264 · 发表于 2013-5-12 09:28:49

提示: 作者被禁止或删除内容自动屏蔽

Discuz耀 · 发表于 2014-6-20 11:42:54

不错支持一下。很牛逼。

		自动登录	找回密码
密码			立即注册

[素材] 网页制作教学: 侧边栏浮动广告效果