JQuery實現動態(tài)漂浮廣告

更新時間：2022年03月30日 17:03:01 作者：lyh_0301

這篇文章主要為大家詳細介紹了JQuery實現動態(tài)漂浮廣告，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

JQuery實現動態(tài)漂浮廣告&全局窗口，供大家參考，具體內容如下

以下是效果圖及實現代碼：

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
?? ?<meta charset="UTF-8">
?? ?<title>漂浮廣告欄</title>
?? ?<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
?? ?<style type="text/css">
?? ??? ?body{
?? ??? ??? ?height: 100%;
?? ??? ??? ?width: 100%;
?? ??? ??? ?margin: 0;
?? ??? ??? ?padding: 0;
?? ??? ??? ?text-align: center;
?? ??? ?}
?? ??? ?#floatdiv{
?? ??? ??? ?width: 200px;
?? ??? ??? ?height: 200px;
?? ??? ??? ?position: absolute;
?? ??? ??? ?top: 0;
?? ??? ??? ?left: 0;
?? ??? ??? ?background-color: #fbb;
?? ??? ??? ?z-index: 999;
?? ??? ??? ?border: 1px solid #ccc;
?? ??? ??? ?border-radius: 10px 10px ;
?? ??? ?}
?? ??? ?span{
?? ??? ??? ?position: absolute;
?? ??? ??? ?top: 0;
?? ??? ??? ?right: 0;
?? ??? ??? ?color: darksalmon;
?? ??? ??? ?background-color: rgba(0, 0, 0, 0.5);
?? ??? ??? ?padding: 0 5px;
?? ??? ??? ?cursor: pointer;
?? ??? ??? ?border-radius: 20% 20%;
?? ??? ?}
?? ?</style>
?? ?
</head>
<body>
<div id="floatdiv">
?? ?<span id="Clickclose" >X</span>
?? ?<p>鼠標懸停！</p>?? ?
?? ?<p>點擊關閉！</p>?? ?
</div>

<script type="text/javascript">
?? ??? ?var isinter;
?? ??? ?var millisec = 30;//定時器間隔執(zhí)行時間/毫秒
?? ??? ?var xfloat = 0; //漂浮層x坐標
?? ??? ?var yfloat = 0; //漂浮層y坐標
?? ??? ?var yistop = false;
?? ??? ?var xisleft = true;
?? ??? ?function floatanimation(){
?? ??? ?var?? ?visiblewidth = $(window).width();//可視區(qū)域寬度
?? ??? ?var?? ?visibleheight = $(window).height();//可視區(qū)域高度
?
?? ??? ?var?? ?divwidth = $('#floatdiv').width();//div漂浮層寬度
?? ??? ?var divheight = $('#floatdiv').height();//div漂浮層高度
?
?? ??? ?var hstop = jQuery(window).scrollTop();//滾動條距離頂部的高度
?? ??? ?var wsleft = jQuery(window).scrollLeft();//滾動條距離最左邊的距離
?
?? ??? ?var offwidth = (visiblewidth-divwidth);//div偏移的寬度
?? ??? ?var offheight = (visibleheight-divheight);//div偏移的高度
?
?? ??? ??? ?if (!yistop) {
?? ??? ??? ??? ?yfloat++;
?? ??? ??? ??? ?if (yfloat >= offheight) {
?? ??? ??? ??? ??? ?yistop = true;
?? ??? ??? ??? ?}
?? ??? ??? ?} else {
?? ??? ??? ??? ?yfloat--;
?? ??? ??? ??? ?if (yfloat <= 0) {
?? ??? ??? ??? ??? ?yistop = false;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?
?? ??? ??? ?if (xisleft) {
?? ??? ??? ??? ?xfloat++;
?? ??? ??? ??? ?if (xfloat >= offwidth) {
?? ??? ??? ??? ??? ?xisleft = false;
?? ??? ??? ??? ?}
?? ??? ??? ?} else {
?? ??? ??? ??? ?xfloat--;
?? ??? ??? ??? ?if (xfloat <= 0) {
?? ??? ??? ??? ??? ?xisleft = true;
?? ??? ??? ??? ?}
?? ??? ??? ?}
? ? ? ? ?/* 如果使用固定定位，請把加上滾動條的距離去掉即可 */
?? ??? ??? ?$('#floatdiv').css({'top':yfloat+hstop,'left':xfloat+wsleft});
?? ??? ?}
?
?? ??? ?$(function () {
?? ??? ??? ?isinter = setInterval("floatanimation()",millisec);
?? ??? ??? ?$('#floatdiv').mouseover(function () {
?? ??? ??? ??? ?clearInterval(isinter);
?? ??? ??? ?}).mouseout(function () {
?? ??? ??? ??? ?isinter = setInterval("floatanimation()",millisec);
?? ??? ??? ?});
?? ??? ??? ?$('#Clickclose').click(function () {
?? ??? ??? ??? ?$(this).parents("#floatdiv").slideUp(500,function(){
?? ??? ??? ??? ??? ?clearInterval(isinter);
?? ??? ??? ??? ??? ?$(this).remove();
?? ??? ??? ??? ?});
?? ??? ??? ?});
?? ??? ?});
?? ?</script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: