龙空技术网

极客编程挑战015: jQuery或CSS3生成一个页面右下角的广告弹出效果

极客标签 82

前言:

现在大家对“jquery弹出按钮标签”大体比较重视,同学们都想要知道一些“jquery弹出按钮标签”的相关知识。那么小编在网摘上搜集了一些关于“jquery弹出按钮标签””的相关文章,希望我们能喜欢,我们快快来了解一下吧!

本期挑战

页面加载后,右小角滑出一个广告栏,代码如下, 点击“关闭”,广告栏滑出页面(滑动效果和方向随意,尽量酷一些,^_^)

基础HTML如下:

<div id="ads">

<span>关闭</span>

<p>广告内容:gbtags.com</p>

</div>

基础CSS如下:

/*CSS源代码*/

body{

background:#CFCFCF;

font-family: 'microsoft yahei',Arial,sans-serif;

}

#ads{

font-size:14px;

position: absolute;

right:0;

bottom: 0;

background: #222;

padding: 10px;

color: #FFF;

border-radius: 3px;

}

#ads p{

opacity: .6;

margin: 25px 10px 10px;

padding: 10px;

background: #444;

border-radius: 3px;

}

.close{

float:right;

font-size:12px;

cursor:pointer;

}

提交方式:

录制代码编写过程或最终代码:点击开始

跟帖发布代码预览地址(可以使用GB按钮直接嵌入留言): 演示地址

【强烈提醒】加入QQ群:157757552, 获奖用户及递交快递联系方式

礼品赞助

本期挑战礼品5份(抱枕 + T恤 + 毛巾)由 coding 鼎力赞助!

Coding.net 是一个面向开发者的云端软件协作开发平台,目前有 Git 代码仓库、在线 IDE、演示部署、团队协作等功能。Coding 为中小型团队提供快速的软件开发环境,极大地提高软件开发的效率。致力于改变现有的开发模式,推动软件开发云端化。

礼品介绍

抱枕

超柔短毛绒表面/优质三维pp棉

号称东半球最大IT抱枕商的经典吉祥物

程序员通宵加班必备暖心之物

Coding T恤

100%无污染生态棉花/牢固耐磨/不易脱线

绿色环保的免烫抗皱工艺

不同于一般公司文化衫的设计

简单个性,一切以舒适为主

Coding 毛巾

16S螺旋/21S 巴基斯坦棉/大毛圈加厚设计/三针五线精密锁边

超越五星级大酒店标准的顶级工艺定制

如婴儿肌肤般的细腻触感

简洁白,给你素雅自然的安全感

超乎你想象的柔软和舒适

如何增加获奖机率?

最快完成奖一名: 最快保存递交“合格”代码

最佳讲解奖一名: 代码录制过程及讲解详细完整

最佳人气奖一名: 点赞(点+)的人最多

本期新人奖两名: 新人参加本挑战均有机会

晒晒往期获奖礼物

点击这里晒晒礼物

参加挑战或了解详情,请点击“阅读原文”

标签: #jquery弹出按钮标签