记录京东广告两种方法

京东广告效果实现

最新推荐文章于 2025-06-13 16:37:58 发布

原创最新推荐文章于 2025-06-13 16:37:58 发布 · 258 阅读

1 ·

CC 4.0 BY-SA版权

第一种

鼠标放到广告条上，显示一张大的广告图片

广告条在左侧分类大盒子里，再定位到左边

动画效果：过渡（一开始大图片宽度设置为0，鼠标放上去大图片宽度恢复）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jd</title>
	<style>
		.w {  /* 版心的公共类 */
			width: 1190px;  /* 京东的版心是 1190 */  
			margin: 0 auto; 
		}
		.main {
			height: 480px;
			background-color: pink;
		}
		.main-col1 {
			width: 190px;
			height: 100%;
			position: relative;
		}
		.ad {
			width: 250px;
			height: 480px;
			position: absolute;
			top: 0;
			left: -250px;
		}
		.ad-r img {
			position: absolute;
			top: 0;
			left: 250px;
			z-index: 999;
			width: 0;
			height: 480px;
			background: url(../images/ad-r.jpg);
			/* 这个盒子做动画，所以给它添加过渡 */
			transition: all 0.8s;
		}
		.ad:hover .ad-r img {  
			/* 鼠标经过 ad 这个广告大盒子的时候， 里面的这个叫 ad-r的盒子的宽度由0变为 990 */
			width: 990px;
		}
	</style>
</head>
<body>
	<div class="w main">
		<div class="main-col1">
			<div class="ad">
				<img src="images/ad-l.png" alt="">
				<div class="ad-r">
					<img src="images/ad-r.jpg" " >
				</div>
			</div>
		</div>
	</div>
</body>
</html>

第二种

鼠标放在两侧广告栏区域会变为小手，放在中间蓝色的版心区域则不会，即版心内容不受影响。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jd</title>
	<style>
		.w {  /* 版心的公共类 */
			width: 1190px;  /* 京东的版心是 1190 */  
			margin: 0 auto; 
		}
		.jd {
			height: 480px;
			margin: 0 auto;
			position: relative;
		}
		.ad {
			width: 100%;
			height: 100%;
			background: url(images/bg.png) no-repeat top center;
			position: absolute;
			top: 0;
			left: 0;
		}
		.ad a {
			display: block;
			width: 100%;
			height: 100%;
			cursor: pointer;	
		}
		.jd-inner {
			height: 480px;
			background-color: skyblue;
			position: relative;
			z-index: 999;
		}
	</style>
</head>
<body>
	<div class="jd">
		<div class="w jd-inner">
		</div>
		<div class="ad">
			<a href="#"></a>
		</div>
	</div>
</body>
</html>