今天为大家分享一下刚刚总结好的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. spring AOP应用

    转自:http://wb284551926.iteye.com/blog/1887650 最近新项目要启动,在搭建项目基础架构的时候,想要加入日志功能和执行性能监控的功能,想了很多的想法,最后还是想到 ...

  2. [转]Java学习日记之 volatile

    用在多线程,同步变量. 线程为了提高效率,将某成员变量(如A)拷贝了一份(如B),线程中对A的访问其实访问的是B.只在某些动作时才进行A和B的同步.因此存在A和B不一致的情况.volatile就是用来 ...

  3. SSM+DUBBO/ZK异常

    1.Could not find resource(mybatis本身不支持通配符,是spring提供的ant匹配法) 2.ClassNotFoundException: org.I0Itec.zkc ...

  4. JMeter HTTP Cookie管理器的跨域使用

    Jmeter的一个测试计划只能有一个cookie管理器,当多个manager同时存在时,无法指定是用的哪一个manager.如果想让cookie manager跨域使用,修改JMeter.proper ...

  5. [XAF] How to represent an enumeration property via a drop-down box with check boxes

    https://www.devexpress.com/Support/Center/Example/Details/E689

  6. linux-11 基本命令之 -工作期目录切换命令-pwd,cd,

    pwd 命令用于显示当前的工作目录,格式为:pwd[选项] @1.查看当前的工作路径: [root@localhost /]# pwd cd 命令用于切换工作路径 格式为:"cd 目录名称& ...

  7. 微软Connect教程系列--自动生成增删改查页面工具介绍（二）

    本章课程描述了vs2015的三个特点,其中主要将描述在vs2015下面,使用命令自动生成增删改查界面,具体如下: 1.web.config文件不在存在,用config.json替代,以适应支撑vs的插 ...

  8. 手机淘宝UWP

    各位园主好! bug 走势: 哪天bug 足够少,哪天就可以发布了  :) 2015/10/23: 49 2015/10/26: 40 2015/10/27: 36 2015/10/28: 30 20 ...

  9. json-smart 使用示例(推荐fastjson)

    关于json库,请使用fastjson,这是我用过的最好用的json库! 地址:https://github.com/alibaba/fastjson ======================== ...

  10. java线程与并发（一）

    有好几个月没写博客了,各种破事儿忙完,决定继续写博客,恰好最近想了解下有关Java并发的一些知识,所以就准备这一段时间,用零碎的时间多记录一点有关并发的知识.希望这次能一直坚持下去. 想了解并发,必须 ...