jquery浮动图片广告代码_页面上漂浮图片广告代码



122 487 163



特效描述:浮动图片广告 页面漂浮图片 页面漂浮广告,

代码结构

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

加群请备注:从官网了解到