关闭

实现如下图所示的列表文字切换图片的效果

标签: html列表文字切换图片
271人阅读 评论(0) 收藏 举报
分类:

<!DOCTYPE html PUBLIC "-//W3C//liD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.lid">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<style>
			ul,li {padding: 0; margin: 0;}
			.prduct_list {
				width: 420px;
				height: 340px;
				overflow: hidden;
			}
			.prduct_list ul {
				width: 195px;
				float: left;
			}
			.prduct_list ul li a {
				line-height: 25px;
				text-decoration: none;
				color: blue;
				display: block;
			}
			.prduct_list ul li a:hover {
				background-color: #CCCCCC;
				color: black;
			}
			.prduct_list .three {
				width: 215px;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="prduct_list">
			<ul>
				<li data-url="http://www.aeno.cn/category17.htm" data-img="http://www.aeno.cn/upload/20151208/150427301657.jpg">
					<a href="http://www.aeno.cn/category17.htm"><span>角行程气动执行器</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category18.htm" data-img="http://www.aeno.cn/upload/20151208/150713427342.jpg">
					<a href="http://www.aeno.cn/category18.htm"><span>直行程气动执行器</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category31.htm" data-img="http://www.aeno.cn/upload/20151208/150746055361.jpg">
					<a href="http://www.aeno.cn/category31.htm"><span>不锈钢气动执行器</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category32.htm" data-img="http://www.aeno.cn/upload/20151208/150826771178.jpg">
					<a href="http://www.aeno.cn/category32.htm"><span>三段式气动执行器</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category40.htm" data-img="http://www.aeno.cn/upload/20151208/150911103542.jpg">
					<a href="http://www.aeno.cn/category40.htm"><span>气动球阀</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category37.htm" data-img="http://www.aeno.cn/upload/20151208/151023957408.jpg">
					<a href="http://www.aeno.cn/category37.htm"><span>气动蝶阀</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category42.htm" data-img="http://www.aeno.cn/upload/20151208/151048134420.jpg">
					<a href="http://www.aeno.cn/category42.htm"><span>气动闸阀</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category39.htm" data-img="http://www.aeno.cn/upload/20151208/151118292956.jpg">
					<a href="http://www.aeno.cn/category39.htm"><span>气动截止阀</span></a>
				</li>
				<li data-url="http://www.aeno.cn/category38.htm" data-img="http://www.aeno.cn/upload/20151208/151139491730.jpg">
					<a href="http://www.aeno.cn/category38.htm"><span>气动角座阀</span></a>
				</li>
			</ul>
			<div class="three">				
				<a href="" target="_blank"><img src="" width="200" height="200"><p>点击查看</p></a>
			</div>
		</div>
		<script src="//cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
		<script type="text/javascript">
			$('.prduct_list ul li').mouseenter(function(){
//				console.log($(this).data('url'));
				$('.three a').attr('href',$(this).data('url'));
				$('.three a img').attr('src',$(this).data('img'));
			});
			$('.three a').attr('href',$('.prduct_list ul li:eq(0)').data('url'));
			$('.three a img').attr('src',$('.prduct_list ul li:eq(0)').data('img'));
		</script>
	</body>
</html>

实现如下图所示的列表文字切换图片的效果


代码如下:


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:25449次
    • 积分:248
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:4篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论