今天为大家分享一下刚刚总结好的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="data:images/img1-lg.jpg" alt="Large Image"/></p>

      <p class="thumbs">

        <a href="images/img2-lg.jpg" title="Image2"><img src="data:images/img2-thumb.jpg"></a>

        <a href="images/img3-lg.jpg" title="Image3"><img src="data:images/img3-thumb.jpg"></a>

        <a href="images/img4-lg.jpg" title="Image4"><img src="data:images/img4-thumb.jpg"></a>

        <a href="images/img5-lg.jpg" title="Image5"><img src="data:images/img5-thumb.jpg"></a>

        <a href="images/img6-lg.jpg" title="Image6"><img src="data:images/img6-thumb.jpg"></a>

    </p>

  </body>

</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. ruby中数组的常用方法----例子

    #初始化 a = Array.new p a #=>[] a = Array.new(5) p a #=>[nil, nil, nil, nil, nil] a = Array.new(5 ...

  2. Ubuntu下eclipse开发hadoop应用程序环境配置

    第一步:下载eclipse-jee-kepler-SR2-linux-gtk-x86_64.tar.gz 注意:如果电脑是64位,就下载linux下的64位eclipse,不要下载32位的eclips ...

  3. 一个demo让你彻底理解Android触摸事件的并发

    注:本文涉及的demo的地址:https://github.com/absfree/TouchDispatch 1. 触摸动作及事件序列 (1)触摸事件的动作 触摸动作一共有三种:ACTION_DOW ...

  4. MVC4 学习备忘

    WebConfig文件里添加数据库链接字符: <add name="MovieDBContext(可以自己取字符串名字)" connectionString="Da ...

  5. Linux之源码包安装软件

    安装准备      安装c语言编辑器 gcc      压缩包  node-v6.2.0-linux-x64.tar.gz   源码包保存位置  /usr/local/src/ 源码包安装位置 /us ...

  6. Android（5）— Mono For Android 两个功能型外包

    0.前言 距上一篇博文貌似很久了,其中原因种种,归根结底是自己没有坚持好,没有静下心来归纳总结,希望从这一刻起每个月坚持写两篇.(哈哈,突然想起老师说起一句话, 晚上在被窝里悄悄发誓好好学习,第二天涛 ...

  7. mac下android环境搭建笔记(android studio)

    本文记录了本人在mac上配置android开发环境的一些过程,为了方便直接选用了官方的IDE– Android Studio .本文包括了android studio的安装.创建第一个hello wo ...

  8. Ubuntu 14.4 下安装 Tomcat + Solr5.2

    okbt.net 网站采用  Lucene.net 3.03 做数据引擎..不是很理想...后来试用了 Solr 后感觉很不错.多点同步.原子更新等很方便..抽空安装学习了下.. 1. ubuntu ...

  9. 设计模式之美：Template Method（模板方法）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Template Method 模式结构样式代码. 意图 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中. Templat ...

  10. DeviceOne 竟然做出来如此复杂的App

    分享来自DeviceOne论坛 此文章分享自DeviceOne的论坛,论坛上的用户分享,下面有二维码扫描,可以进行安装和试用.支持android和ios两个 操作系统. 这个还没做完,目前已经完成了初 ...