首页 > 代码库 > Html标签之frameset&图片切换
Html标签之frameset&图片切换
今天为大家分享一下刚刚总结好的html经验，以备不时之需。
首先介绍一下frameset标签，此标签用于同一页面内切换网页，在大多数网页中都可以看到，因为项目的需要，故而研究一二。
frameset标签不能放置在body标签之中，它的具体实现如下：
工程项目结构：
主页面代码（index.jsp）：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!-- 同一页面内相互切换 cols:左右分割框架 frameborder:设置分割线的宽度 noresize:设置分割线不可拖动 --><frameset cols="10%,*" frameborder="no"> <frame src="http://www.mamicode.com/title01.jsp" noresize/> <frame src="http://www.mamicode.com/content01.jsp" name="content"/><!-- name的值用来唯一标示该框架 --></frameset>
左侧链接页面（title01.jsp）：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <body style="background-color: red;"> <a href="http://www.mamicode.com/content01.jsp" target="content">标题1</a><br/><!-- target:用来指定跳转后显示的框架 --> <a href="http://www.mamicode.com/content02.jsp" target="content">标题2</a><br/> <a href="http://www.mamicode.com/content03.jsp" target="content">标题3</a><br/> <a href="http://www.mamicode.com/content04.jsp" target="content">标题4</a><br/> </body></html>
右侧内容显示界面（为普通的jsp界面），最后附一张效果图供大家研究。
下面为大家介绍一种最简单的Html中图片切换方法：
项目工程结构：
页面代码（index.jsp）：
<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="http://www.mamicode.com/"> <title>图片切换</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/common.css"> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.11.1.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $(".thumbs a").click(function(){ var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src : largePath, alt : largeAlt }); return false; }); }); </script> </head> <body> <h2>图片切换</h2> <p><img id="largeImg" src="http://www.mamicode.com/images/img1-lg.jpg" alt="Large Image"/></p> <p class="thumbs"> <a href="http://www.mamicode.com/images/img2-lg.jpg" title="Image2"><img src="http://www.mamicode.com/images/img2-thumb.jpg"></a> <a href="http://www.mamicode.com/images/img3-lg.jpg" title="Image3"><img src="http://www.mamicode.com/images/img3-thumb.jpg"></a> <a href="http://www.mamicode.com/images/img4-lg.jpg" title="Image4"><img src="http://www.mamicode.com/images/img4-thumb.jpg"></a> <a href="http://www.mamicode.com/images/img5-lg.jpg" title="Image5"><img src="http://www.mamicode.com/images/img5-thumb.jpg"></a> <a href="http://www.mamicode.com/images/img6-lg.jpg" title="Image6"><img src="http://www.mamicode.com/images/img6-thumb.jpg"></a> </p> </body></html>
效果图：
具体的工程源码，如需请留下邮箱，如果哪位有更好的效果还望指点。谢谢
Html标签之frameset&图片切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。