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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 Javascript
微信小程序实现购物车小功能
Dec 30 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
搜索引擎技术核心揭密
2006/10/09 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
js中let和var定义变量的区别
2018/02/08 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
校长竞聘演讲稿
2014/05/16 职场文书
外国人来华邀请函
2015/01/31 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python