jquery实现浮动在网页右下角的彩票开奖公告窗口代码


Posted in Javascript onSeptember 04, 2015

本文实例讲述了jquery实现浮动在网页右下角的彩票开奖公告窗口。分享给大家供大家参考。具体如下:

这是一个浮动在网页右下角的彩票开奖公告窗口,完全可当作一个右下角广告的代码来使用,而且效果中加入了简洁的动画功能,浮动窗口是从下往上滑出的,避免单调;另外本浮动窗口带有“关闭”功能,用户可以关闭它。

运行效果截图如下:

jquery实现浮动在网页右下角的彩票开奖公告窗口代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页右下角弹出jQuery广告代码</title>
<style>
body{font-family:Arial,Helvetica,sans-serif;font-size:12px;background:#FFF; line-height:20px;}
#win_ad{z-index:100;background:#FFFFCC;position:absolute;right:0px;bottom:0px;height:22px;width:145px;overflow:hidden;}
#win_ad dl{background:#FFF;height:376px;border:2px solid #990000;overflow:hidden;}
#win_ad dl dt{background:#990000 url(none);padding:5px 10px 0 10px;height:22px;border-bottom:1px solid #990000;}
#win_ad dl dt a{font-weight:bold;color:#FFF;}
#win_ad dl dt em{float:right;font-style:normal;font-size:12px;color:#FFF;cursor:pointer;}
#win_ad dl dd{padding:7px 0 0 10px;height:20px;line-height:27px;}
#win_ad dl dd strong{display:block;float:left;width:55px;font-weight:normal;line-height:18px;color:#990000;}
#win_ad dl dd em{display:block;float:left;width:55px;font-style:normal;font-size:12px;line-height:18px;color:#000;}
#win_ad dl dd a{display:block;float:left;height:16px;width:16px;line-height:16px;background:red url() no-repeat center center;color:#FFF;font-size:12px;text-align:center;padding:0;margin-left:5px;font-weight:normal;}
#win_ad dl dd b{display:block;float:left;height:16px;width:16px;line-height:16px;background:blue url) no-repeat center center;color:#FFF;font-size:12px;text-align:center;padding:0;margin-left:5px;font-weight:normal;}
#win_ad dt{background:#C5DBE8 url() repeat-x;}
</style>
</head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
//cookie
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') {
options = options || {};
if (value === null){value = '';options = $.extend({}, options);options.expires = -1;}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number'){date = new Date();date.setTime(date.getTime() + (options.expires * 60 * 60 * 1000));}
else {date = options.expires;}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {cookieValue = decodeURIComponent(cookie.substring(name.length + 1));break;
}
}
}
return cookieValue;
}
};
$(document).ready(function(){if($.browser.msie && $.browser.version == 6) {followDiv.myfollow();clickDiv.myclick();}
var cookie_rbat = $.cookie("mycookieat");
if(cookie_rbat == "2"){}
else {$("#win_ad").animate({width:"305"},500,function(){});$("#win_ad").animate({height:"280"},500,function(){});$(".win_close").text("关闭");}
$(".win_close").click(function(){
cookie_rbat = $.cookie("mycookieat");
if (cookie_rbat == "2"){$("#win_ad").animate({width:"305"},500,function(){});$("#win_ad").animate({height:"280"},500,function(){});$(".win_close").text("关闭");$.cookie("mycookieat","1",{path:'/',expires: 1});}
else {$("#win_ad").animate({height:"24"},500,function(){});$("#win_ad").animate({width:"145"},500,function(){});$(".win_close").text("展开");$.cookie("mycookieat","2",{path:'/',expires: 1});}
})
});
followDiv = {myfollow : function(){$('#win_ad').css('position','absolute');$(window).scroll(function(){var f_top = $(window).scrollTop() + $(window).height() - $("#win_ad").outerHeight();$('#win_ad').css('top',f_top);});}}
clickDiv = {myclick : function(){$('#win_ad').css('position','absolute');$("#win_ad").resize(function(){var f_top = $(window).scrollTop() + $(window).height() - $("#win_ad").outerHeight();$('#win_ad').css('top',f_top);});}}
document.writeln("<div id=\"win_ad\">\n<dl class=\"win_ad\">\n<dt><em class=\"win_close\">展开</em><a href=\"\">彩票开奖结果</a></dt>\n<dd>\n<strong>3D</strong><em>2011077</em>\n<a>2</a><a>0</a><a>6</a>\n</dd>\n\n<dd>\n<strong>排列三</strong><em>2011077</em>\n<a>7</a><a>8</a><a>7</a>\n</dd>\n<dd>\n<strong>排列五</strong><em>2011077</em>\n<a>7</a><a>8</a><a>7</a><a>5</a><a>7</a>\n</dd>\n\n<dd>\n<strong>22选5</strong><em>2011077</em>\n<a>07</a><a>10</a><a>18</a><a>19</a><a>22</a>\n</dd>\n\n\n<dd>\n<strong>双色球</strong><em>2011033</em>\n<a>02</a><a>08</a><a>12</a><a>13</a><a>19</a><a>29</a><b>04</b>\n</dd>\n\n<dd>\n<strong>大乐透</strong><em>2011033</em>\n<a>03</a><a>19</a><a>24</a><a>29</a><a>33</a><b>03</b><b>09</b>\n</dd>\n\n<dd>\n<strong>七星彩</strong><em>2011033</em>\n<a>2</a><a>0</a><a>5</a><a>2</a><a>5</a><a>3</a><a>6</a>\n</dd>\n\n<dd>\n<strong>七乐彩</strong><em>2011033</em>\n<a>04</a><a>08</a><a>18</a><a>20</a><a>28</a><a>29</a><a>30</a><b>27</b>\n</dd>\n\n<dd>\n<strong>东方6+1</strong><em>2011033</em>\n<a>5</a><a>5</a><a>8</a><a>9</a><a>8</a><a>3</a><b>蛇</b>\n</dd>\n\n</dl>\n</div>");
</script>
<body>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
原生js写的放大镜效果
Aug 22 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
js模糊查询实例分享
Dec 26 Javascript
js 颜色选择插件
Jan 23 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 #Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 #Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 #Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 #Javascript
js实现拉幕效果的广告代码
Sep 02 #Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 #Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 #Javascript
You might like
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
轻松实现php文件上传功能
2017/02/17 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
python 字符串split的用法分享
2013/03/23 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python版本单链表实现代码
2018/09/28 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Python自动登录QQ的实现示例
2020/08/28 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
财政局长自荐信范文
2013/12/22 职场文书
中学生检讨书1000字
2014/10/28 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
青年联谊会致辞
2015/07/31 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android