底部悬浮通栏可以关闭广告位的实现方法


Posted in Javascript onJune 01, 2016

效果一:

底部悬浮通栏可以关闭广告位的实现方法

1.首先,整个底部悬浮通栏广告是固定在浏览器的底部,随着浏览器的滚动,底部悬浮广告始终在浏览器窗口中。这里有几个关键点:通栏,固定,黑色。

所以:首先我们必须给悬浮通栏广告整体一个100%的宽度,其次给它设定固定定位,固定在浏览器底部,背景色为黑色,透明度为0.7。

.footfixed{
width:100%; 

height:140px;   /* 图片大小,宽度必须100% */

position:fixed;

bottom:0;     /*固定定位,固定在浏览器底部。*/

background: #081628;

opacity: .7;  /*Chrome、Safari、Firefox、Opera */ 

 filter:alpha(opacity=70);/* 针对 IE8 以及更早的版本 */
}

2. 底部悬浮通栏广告的图片,可以看出比背景要高(背景height:140px,内图height: 218px)

且整体内容部分居中。

.fimg {
   height: 218px;    /*注意此处图片高度高于140px*/
   width: 1190px; 
   margin: 0px auto;  /*整体内容部分居中*/
 }

然而由于底部悬浮广告内容部分高度218px大于设定的父元素的高度140px,高度相差78px

产生如下效果,图片没能完成的展现出来:

 底部悬浮通栏可以关闭广告位的实现方法

这需要图片上移78px,需要对整个底部悬浮广告内容部分整体做相对定位

.fimg {
   position: relative;  /*父元素相对定位*/
   top:-78px;
 }

结果:

底部悬浮通栏可以关闭广告位的实现方法

这里有个问题:

图片不是很清楚,因为加了透明度。

解决这个问题,用一个div来设置背景,而不在.footfixed里设置背景色。

<div class="ftbj"></div>
.ftbj{
  position: absolute;
  background:#081628;
  height:100%;
  width:100%;
  top: 0;
  left: 0;
  opacity: .7;/*Chrome、Safari、Firefox、Opera */ 
  filter: alpha(opacity=70);}/* 针对 IE8 以及更早的版本 */
.footfixed{
  width:100%; 
  height:140px;   /* 图片大小,宽度必须100% */
  position:fixed;
  bottom:0;     /*固定定位,固定在浏览器底部。*/
  background: #081628;
  opacity: .7;    /*Chrome、Safari、Firefox、Opera */     

filter:alpha(opacity=70);/* 针对 IE8 以及更早的版本 */
}

这样一来,效果图片:

底部悬浮通栏可以关闭广告位的实现方法

这样就清楚多了。

3.其中关闭按钮的效果:

首先按钮是由图片通过定位实现固定在整个底部悬浮广告图片右上角。需设定图片大小,图片引入路径,需要对整个底部悬浮广告内容部分整体做相对定位,关闭按钮是做绝对定位

.fimg {
  position: relative;  /*父元素相对定位*/
}
.close {
  width: 33px;
  height: 33px;     /* 图片大小 */
  background: url(images/close.png) no-repeat center center;  /*图片引入路径 */
  position: absolute;
  right: 15px;
  top: 85px;       /*通过定位实现固定固定在整个底部悬浮广告图片右上角 */
}

其次,鼠标移到关闭按钮上,有小手出现,关闭按钮旋转。

为了产生动画效果,加transition

.close {
  transition: .5s;
  cursor: pointer; /*通过定位实现固定固定在整个底部悬浮广告图片右上角 */
}
.close:hover {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);     /* IE 9 */
  -moz-transform: rotate(180deg);    /* Firefox */
  -webkit-transform: rotate(180deg);  /* Safari 和 Chrome */
  -o-transform: rotate(180deg);    /* Opera */
} /*旋转 图片*/

然后是点击关闭按钮,广告消失,侧边出现效果

底部悬浮通栏可以关闭广告位的实现方法

#fimg-min{
  width: 80px;
  height: 140px;           /* 图片大小 */
  position: fixed; 
  bottom: 0px; 
  left: 0px;             /*定位*/  
  display: none;          /*隐藏*/
  cursor: pointer;        /*小手 */
}

点击图中圈出来的图标,底部广告再次出现

<script>
$(document).ready(function(){
  $(".close").click(function () {
    $('.footfixed').animate(
      {height: '10px', opacity: '0.4'}, "slow", function () {
    $('.footfixed').hide();
    $('#fimg-min').show();
    });
  });  
  $('#fimg-min').click(function(){
      $('.footfixed').show().css({height:'140px',opacity:'1'});
      $('#fimg-min').hide();
  });  
});
</script>

注:在ie9以下浏览器中关闭按钮图片旋转效果未能实现。

以上这篇底部悬浮通栏可以关闭广告位的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jquery插件格式实例分析
Jun 16 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
深入理解node exports和module.exports区别
Jun 01 #Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 #Javascript
jQuery图片轮播插件——前端开发必看
May 31 #Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 #Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 #Javascript
基于jQuery实现点击列表加载更多效果
May 31 #Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 #Javascript
You might like
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
PHP实现倒计时功能
2020/11/16 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
jQuery参数列表集合
2011/04/06 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
django_orm查询性能优化方法
2018/08/20 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python3 实现调用串口功能
2019/12/26 Python
Python中的Cookie模块如何使用
2020/06/04 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
学校门卫管理制度
2014/01/30 职场文书
2014年团队工作总结
2014/11/24 职场文书
干部个人考察材料
2014/12/24 职场文书
统招统分证明
2015/06/23 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS