Maison >interface Web >tutoriel HTML >Html标签之frameset&图片切换_html/css_WEB-ITnose
Html标签之frameset&图片切换_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:49:42930parcourir
今天为大家分享一下刚刚总结好的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="title01.jsp" noresize/> <frame src="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="content01.jsp" target="content">标题1</a><br/><!-- target:用来指定跳转后显示的框架 --> <a href="content02.jsp" target="content">标题2</a><br/> <a href="content03.jsp" target="content">标题3</a><br/> <a href="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="<%=basePath%>"> <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="css/common.css"> <script type="text/javascript" src="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="images/img1-lg.jpg" alt="Large Image"/></p> <p class="thumbs"> <a href="images/img2-lg.jpg" title="Image2"><img src="images/img2-thumb.jpg" alt="Html标签之frameset&图片切换_html/css_WEB-ITnose" ></a> <a href="images/img3-lg.jpg" title="Image3"><img src="images/img3-thumb.jpg" alt="Html标签之frameset&图片切换_html/css_WEB-ITnose" ></a> <a href="images/img4-lg.jpg" title="Image4"><img src="images/img4-thumb.jpg" alt="Html标签之frameset&图片切换_html/css_WEB-ITnose" ></a> <a href="images/img5-lg.jpg" title="Image5"><img src="images/img5-thumb.jpg" alt="Html标签之frameset&图片切换_html/css_WEB-ITnose" ></a> <a href="images/img6-lg.jpg" title="Image6"><img src="images/img6-thumb.jpg" alt="Html标签之frameset&图片切换_html/css_WEB-ITnose" ></a> </p> </body></html> 效果图：
具体的工程源码，如需请留下邮箱，如果哪位有更好的效果还望指点。谢谢
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：纯css3实现的动画加载条_html/css_WEB-ITnoseArticle suivant：HTML实体对照表_html/css_WEB-ITnose