仿酒仙网品牌活动动画效果 (鼠标移上 图片平移)

图片格式为280*80像素的图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head></head>
	<body>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<style>
		.storeListBox {	width: 180px; height: 80px; overflow: hidden; position: relative; }
		.storeListCon { width: 360px; height: 80px; position: absolute;	left: 0; top: 0; }
		li{	width:180px; height: 80px; list-style:none; }
		</style>
		<script>
		$(document).ready(function(){
			$(".storeListWrap li").mouseover(function() {
			$(this).find(".storeListCon").stop().animate({
					"left" : "-100px"
				}, 300)
			});
			$(".storeListWrap li").mouseout(function() {
				$(this).find(".storeListCon").stop().animate({
					"left" : "0px"
				}, 300)
			});
		});
		</script>

		<div class="storeListWrap">
			<div class="storeList" >
				<ul>
					<li>
						<div class="storeListBox">
							<div class="storeListCon" >
								<a href="http://ytcar.com">
									<img src="http://img07.jiuxian.com/bill/2014/0214/3a4feafda6824b6390336d78105c5733.jpg" width="280" height="80" />
								</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>


你可能感兴趣的:(仿酒仙网品牌活动动画效果 (鼠标移上 图片平移))