今天为大家分享一下刚刚总结好的html经验，以备不时之需。

　　首先介绍一下frameset标签，此标签用于同一页面内切换网页，在大多数网页中都可以看到，因为项目的需要，故而研究一二。

　　frameset标签不能放置在body标签之中，它的具体实现如下：

工程项目结构：

　　

主页面代码（index.jsp）：

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <!--
  3.     同一页面内相互切换
  4.     cols:左右分割框架
  5.     frameborder:设置分割线的宽度
  6.     noresize:设置分割线不可拖动
  7.  -->
  8. <frameset cols="10%,*" frameborder="no">
  9.     <frame src="title01.jsp" noresize/>
  10.     <frame src="content01.jsp" name="content"/><!-- name的值用来唯一标示该框架 -->
  11. </frameset>

左侧链接页面（title01.jsp）：

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8.   <body style="background-color: red;">
  9.     <a href="content01.jsp" target="content">标题1</a><br/><!-- target:用来指定跳转后显示的框架 -->
  10.     <a href="content02.jsp" target="content">标题2</a><br/>
  11.     <a href="content03.jsp" target="content">标题3</a><br/>
  12.     <a href="content04.jsp" target="content">标题4</a><br/>
  13.   </body>
  14. </html>

　　右侧内容显示界面（为普通的jsp界面），最后附一张效果图供大家研究。

　　下面为大家介绍一种最简单的Html中图片切换方法：

项目工程结构：

　　

页面代码（index.jsp）：

  1. <%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.  
  12.     <title>图片切换</title>
  13.     <meta http-equiv="pragma" content="no-cache">
  14.     <meta http-equiv="cache-control" content="no-cache">
  15.     <meta http-equiv="expires" content="0">
  16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  17.     <meta http-equiv="description" content="This is my page">
  18.     <link rel="stylesheet" type="text/css" href="css/common.css">
  19.     <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  20.     <script type="text/javascript" language="javascript">
  21.         $(function(){
  22.             $(".thumbs a").click(function(){
  23.                 var largePath = $(this).attr("href");
  24.                 var largeAlt = $(this).attr("title");
  25.                 $("#largeImg").attr({
  26.                     src : largePath,
  27.                     alt : largeAlt
  28.                 });
  29.                 return false;
  30.             });
  31.         });
  32.     </script>
  33.   </head>
  34.  
  35.   <body>
  36.       <h2>图片切换</h2>
  37.       <p><img id="largeImg" src="data:images/img1-lg.jpg" alt="Large Image"/></p>
  38.       <p class="thumbs">
  39.         <a href="images/img2-lg.jpg" title="Image2"><img src="data:images/img2-thumb.jpg"></a>
  40.         <a href="images/img3-lg.jpg" title="Image3"><img src="data:images/img3-thumb.jpg"></a>
  41.         <a href="images/img4-lg.jpg" title="Image4"><img src="data:images/img4-thumb.jpg"></a>
  42.         <a href="images/img5-lg.jpg" title="Image5"><img src="data:images/img5-thumb.jpg"></a>
  43.         <a href="images/img6-lg.jpg" title="Image6"><img src="data:images/img6-thumb.jpg"></a>
  44.     </p>
  45.   </body>
  46. </html>

效果图：

　　具体的工程源码，如需请留下邮箱，如果哪位有更好的效果还望指点。谢谢

Html标签之frameset&图片切换的更多相关文章

  1. JS图片切换效果

    源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  2. zoeDylan.ImgChange 图片切换插件

    墨芈深夜发布插件——图片切换 附上下载地址:http://pan.baidu.com/s/17kKF3共享天地/[墨芈 插件]zoeDylan Plugins Code JS (function ($ ...

  3. Jquery实现图片切换效果（IE,FF,Goole）都可以正常运行

    这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...

  4. 移动web：图片切换(焦点图)

    在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...

  5. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  6. 教你做炫酷的碎片式图片切换 (canvas)

    前言 老规矩,先上 DEMO 和 源码.图片区域是可以点击的,动画会从点击的位置开始发生. 本来这个效果是我3年前做的,只是当是是用无数个 div 标签完成的,性能比较成问题,在移动端完全跑不动.最近 ...

  7. iOS开发基础-图片切换(2)之懒加载

    延续:iOS开发基础-图片切换(1),对(1)里面的代码进行改善. 在 ViewController 类中添加新的数组属性:  @property (nonatomic, strong) NSArra ...

  8. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  9. Android中使用ImageViewSwitcher实现图片切换轮播导航效果

    前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(ViewPager未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用V ...

随机推荐

  1. vb---输入模式之文本输入与二进制输入区别

    使用 VB6 MSCOMM 控件 进行二进制收发 发布时间:2012-01-10 12:12:01 技术类别:嵌入式     MSCOMM 控件是用于串口通信的,使用方便.在VB中,这个串口控件缺省是 ...

  2. oracle创建视图

    create or replace view view_fwaqjcjl as select T_FWAQJCJL.FWAQJCJL_ID,T_FWAQJCJL.ZCBM,T_FWAQJCJL.FWB ...

  3. ubuntu使用经验整理

     ===================================================== 清理/boot分区 =================================== ...

  4. nginx实时记录请求状态信息( ngx_realtime_request_module)

    cd /usr/local/src/ wget "http://nginx.org/download/nginx-1.4.2.tar.gz" tar -xzvf nginx.tar ...

  5. WIN8 平台应用隐私声明

    隐私权声明 本应用连接网络仅为控制硬件设备,不会收集你的个人信息,也不共享你个个人信息. 应用名称 雅典娜监控平台移动客户端 关于本应用 本应仅为控制设备应用,不关注任何配置相关信息,所有数据均来自服 ...

  6. Windows 下使用git 将代码托管到开源中国-（http://git.oschina.net/）

    一.准备工作 当然是准备在windows 下使用需要的环境,和工具. msysgit  下载地址:http://msysgit.github.io/ TortoiseGit 下载地址:https:// ...

  7. Rabbitmq基本原理

    MQ全称为Message Queue, 是一种分布式应用程序的的通信方法,它是消费-生产者模型的一个典型的代表,producer往消息队列中不断写入消息,而另一端consumer则可以读取或者订阅队列 ...

  8. 运用DebugDiag诊断ASP.Net异常

    Debug Diagnostic Tool (DebugDiag)是用来帮助诊断IIS/COM+等应用假死.性能差.内存泄露及碎片和崩溃等问题的工具. 本文介绍如何运用DebugDiag诊断特定的AS ...

  9. ubuntu git 使用

    apt-get install git//ubuntu安装git mkdir -p /var/www/gitProj //创建文件夹 cd /var/www/gitProj //进入文件夹 git i ...

  10. 如何为编程爱好者设计一款好玩的智能硬件（八）——LCD1602点阵字符型液晶显示模块驱动封装（中）

    六.温湿度传感器DHT11驱动封装(下):如何为编程爱好者设计一款好玩的智能硬件(六)——初尝试·把温湿度给收集了(下)! 七.点阵字符型液晶显示模块LCD1602驱动封装(上):如何为编程爱好者设计 ...