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

原创 2015年12月09日 10:54:46

<!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>

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


代码如下:


如何实现如图所示的效果呢

  • 2008年07月02日 09:16
  • 377KB
  • 下载

任务3:使用GridView组件实现如下图所示的效果

【程序截屏】

使用GridView组件实现如下图所示的效果

package cn.edu.bzu.grid.activity; import com.example.grid.R; import cn.edu.bzu.grid.mode...

JQuery页面图片切换和新闻列表滚动效果的具体实现

最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下:   前段代码: jQuery(document).ready(function() { ...

(浮动+盒模型+无序列表)实现切换图片效果

下面做个毒霸首页中图片切换的效果,如下: 实现代码如下: .zong { width: 600px; ...

3. 设计一个带有菜单的图形用户界面程序,使用级联菜单控制文字的字体和颜色,运行结果如下图所示

3. 设计一个带有菜单的图形用户界面程序,使用级联菜单控制文字的字体和颜色,运行结果如下图所示 import javax.swing.*;import java.awt.event.*;impo...
  • zyw0713
  • zyw0713
  • 2015年07月21日 18:54
  • 1047

文字和图片切换效果

  • 2015年03月23日 13:42
  • 138KB
  • 下载

iView多效果图片与文字切换特效

  • 2013年12月06日 15:22
  • 1.67MB
  • 下载

jQuery 超实用的图片列表布局切换效果

jQuery 超实用的图片列表布局切换效果 body {     font-size: 12px; } p.switch {     width: 122px;     heigh...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现如下图所示的列表文字切换图片的效果
举报原因:
原因补充:

(最多只允许输入30个字)