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 相关文章推荐
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
在WIN98下以apache模块方式安装php
2006/10/09 PHP
基于empty函数的输出详解
2013/06/17 PHP
关于crontab的使用详解
2013/06/24 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
js文件包含的几种方式介绍
2014/09/28 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
NumPy 如何生成多维数组的方法
2018/02/05 Python
python定时关机小脚本
2018/06/20 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
opencv 阈值分割的具体使用
2020/07/08 Python
用Python 执行cmd命令
2020/12/18 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
蔻驰美国官网:COACH美国
2016/08/18 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
几个MySql的面试题
2013/04/22 面试题
英语自我评价范文
2014/01/24 职场文书
课题研究阶段性总结
2015/08/13 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书