jquery implementiert den Code für das Lotterieankündigungsfenster, der in der unteren rechten Ecke der Webseite schwebt

jquery implementiert den Code für das Lotterieankündigungsfenster, der in der unteren rechten Ecke der Webseite schwebt_jquery

WBOY

Freigeben： 2016-05-16 15:40:46

Original

1384 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die JQuery-Implementierung des Lotterieankündigungsfensters, das in der unteren rechten Ecke der Webseite schwebt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein in der unteren rechten Ecke der Webseite schwebendes Lotterie-Ankündigungsfenster. Es kann als Werbecode in der unteren rechten Ecke verwendet werden. Dem Effekt wird eine einfache Animationsfunktion hinzugefügt Um Monotonie zu vermeiden, verfügt dieses schwebende Fenster außerdem über eine „Schließen“-Funktion, die vom Benutzer geschlossen werden kann.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-right-buttom-alert-dlg-codes/

Der spezifische Code lautet wie folgt:

<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 &#63; '; path=' + (options.path) : '';
var domain = options.domain &#63; '; domain=' + (options.domain) : '';
var secure = options.secure &#63; '; 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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.