cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery melaksanakan kod tetingkap pengumuman loteri terapung di sudut kanan bawah halaman web_jquery

jquery melaksanakan kod tetingkap pengumuman loteri terapung di sudut kanan bawah halaman web_jquery

WBOY
WBOYasal
2016-05-16 15:40:461346semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan jquery bagi tetingkap pengumuman loteri terapung di penjuru kanan sebelah bawah halaman web. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah tetingkap pengumuman loteri yang terapung di sudut kanan bawah halaman web. Ia boleh digunakan sebagai kod pengiklanan di sudut kanan bawah. Selain itu, fungsi animasi yang mudah ditambah kepada kesan tetingkap terapung keluar dari bawah ke atas, untuk mengelakkan monotoni, tetingkap terapung ini mempunyai fungsi "tutup", dan pengguna boleh menutupnya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

<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>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bercakap secara ringkas tentang kemahiran javascript Date type_javascriptArtikel seterusnya：Bercakap secara ringkas tentang kemahiran javascript Date type_javascript

Artikel berkaitan

Lihat lagi