网站飘窗广告实现

叩叮ING

于 2024-01-18 17:04:29 发布

阅读量946

点赞数 8

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/weixin_43966996/article/details/135678993

版权

本文详细介绍了如何利用jQuery、CSS和JavaScript实现一个可浮动的飘窗广告，包括广告的显示、位置动态调整以及关闭按钮的功能。

摘要由CSDN通过智能技术生成

主要实现飘窗广告效果，效果如图：

一、准备

1、jquery，这个百度获取，

2、一个关闭按钮图标，根据项目要求自行设计。

二、实现

1、首先是前端代码，如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery.min.1.7.js" ></script>
	</head>
	<body>
		<!--整体飘窗内容-->
		<div id="imgDiv" style="cursor: pointer;">
			<!--此处a标签设置点击飘窗后跳转的页面-->
			<a href="https://www.baidu.com/" target="_blank">
				<span>广告标题</span>
			</a>
			<!--飘窗按钮-->
			<div class="imgDivreset"></div>
		</div>
		
	</body>
</html>

前端代码只简单的展示了飘窗部分，实际适用中只需要将#imgDiv放到最后即可。

2、css样式

<style type="text/css">
    #imgDiv {
	    position: absolute;
	    z-index: 9999;
		background-color: red;
	    cursor: pointer;
	    text-align: center;
	    /*width: 200px;
	    height: 150px;*/
	}
	#imgDiv .ImgFirLine {
	    margin-top: 6px;
	}
	#imgDiv span {
	    display: inline-block;
	    width: 100%;
	    margin-top: 4px;
	    font-weight: bold;
	    font-size: 18px;
	    background: linear-gradient(to bottom, #ffffff, #ffe537);
	    -webkit-background-clip: text;
	    color: transparent;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translateY(-50%) translateX(-50%);
	}
	#imgDiv .imgDivreset {
	    position: absolute;
	    /*关闭按钮图标*/
	    background-image: url(img/close.png);
	    -webkit-background-size: cover;
	    background-size: cover;
	    width: 20px;
	    height: 20px;
	    top: 1px;
	    right: 1px;
	}
	#imgDiv a {
	    display: inline-block;
	    width: 100%;
	    height: 100%;
	}
</style>

3、js代码实现功能

<script>
	(function($){
	    $.fn.adFloat=function(options){
	        return new AdFloat(this,options);
	    }
	    var AdFloat=function(element,options){
	        this.element=$(element);
	        this.options=$.extend({
	            width:230, //默认的广告的宽
	            height:118, //默认的广告的高
	            top:0, //默认的广告的Y坐标
	            left:0, //默认的广告的X坐标
	            delay:30, //延迟
	            step:1 //默认的广告每次移动的距离(像素)
	        },options);
	        this.interval=null;
	        this.xPos=this.options.left;
	        this.yPos=this.options.top;
	        this.yon=0;
	        this.xon=0;
	        this.isPause=false;
	        this.init();
	    };
	    AdFloat.prototype={
	        init:function(){
	            var me=this;
	            me.element.css("display","block");
	            me.element.css({position:"absolute",left:me.options.left,top:me.options.top,width:me.options.width,height:me.options.height,})
	            me.element.hover(function() {clearInterval(me.interval)},function(){me.interval=setInterval(function(){me.changePos();},me.options.delay);});
	            $(document).ready(function(){me.start();});
	        },
	        changePos:function(){
	            var me=this;
	            var clientWidth=$(window).width();
	            var clientHeight=$(window).height();
	            var Hoffset=me.options.height;
	            var Woffset=me.options.width;
	            me.element.css({left:me.xPos+$(document).scrollLeft(),top:me.yPos+$(document).scrollTop()});
	            if(me.yon){
	                me.yPos=me.yPos+me.options.step;
	            }else{
	                me.yPos=me.yPos-me.options.step;
	            }
	            if(me.yPos<0){me.yon=1;me.yPos=0;}
	            if(me.yPos>=(clientHeight-Hoffset)){me.yon=0;me.yPos=(clientHeight-Hoffset);}
	            if(me.xon){
	                me.xPos=me.xPos+me.options.step;
	            }else{
	                me.xPos=me.xPos-me.options.step;
	            }
	            if(me.xPos<0){me.xon=1;me.xPos=0;}
	            if(me.xPos>=(clientWidth-Woffset)){me.xon=0;me.xPos=(clientWidth-Woffset);}
	        },
	        start:function(){
	            var me=this;
	            me.element.css("top",me.yPos);
	            me.interval=setInterval(function(){me.changePos();},me.options.delay);
	        }
	    }
	})(jQuery);
	//飘窗展示
	$(function(){
	    $("#imgDiv").adFloat({width:270,height:100,top:0,left:0})
	});
	//飘窗关闭
	$(".imgDivreset").click(function() {
	    $("#imgDiv").css("display","none");
	}); 
</script>

亲测可用。。。