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

最新推荐文章于 2023-12-13 19:05:42 发布

a771948524

最新推荐文章于 2023-12-13 19:05:42 发布

阅读量1.3k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/zxlstudio/article/details/38401815

版权

Jquery 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

图片格式为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>