jquery浮動圖片廣告代碼_頁面上漂浮圖片廣告代碼



126 501 168



特效描述:浮動圖片廣告 頁面漂浮圖片 頁面漂浮廣告,

代碼結構

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/ad.css" />
<link type="text/css" rel="stylesheet" href="css/ad.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/floatingAd.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/floatingAd.js"></script>

3. HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漂浮廣告</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
</style>
<script type="text/javascript">
$(function(){
	$.floatingAd({
		//頻率
		delay: 60,
		//超鏈接后是否關閉漂浮
		isLinkClosed: true,
		//漂浮內容
		ad:	[{
			//關閉區域背景透明度(0.1-1)
			headFilter: 0.3,
			//圖片
			'img': 'http://www.baidu.com/img/baidu_sylogo1.gif',
			//圖片高度
			//'imgHeight': 220,
			//圖片寬度
			//'imgWidth': 176,
			//圖片鏈接
			'linkUrl': 'http://www.baidu.com/',
			//浮動層級別
			'z-index': 100,
			//標題
			'title': '度娘'
		},{
			'img': 'http://img3.cache.netease.com/www/logo/logo_png.png',
			//'imgHeight': 220,
			//'imgWidth': 176,
			'linkUrl': 'http://www.163.com/',
			'z-index': 101,
			'title': '丁三石',
			//關閉按鍵圖片
			'closed-icon': 'images/list-remove.png'
		}],
		//關閉事件
		onClose: function(elem){
			alert('關閉');
		}
	});
	$("#aa").floatingAd({
		onClose:function(elem){}
	});
});
</script>
</head>
<body style="overflow:hidden;">
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 圖片廣告
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子