今天为大家分享一下刚刚总结好的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. JSON 基础解释.

    JSON.(JavaScript Object Notation) JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本 ...

  2. Hyper-V初涉:Hyper-V虚拟机常规操作

    a. 连接到虚拟机与开机 在Hyper-V管理器中双击待启动的虚拟机或在待启动的虚拟机上右键选择"启动"即可完成连接虚拟机的操作. 若此时虚拟机正在运行则直接进入虚拟机界面,若虚拟 ...

  3. 【转】java调用webservice

    互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示,下面就以获取天气预报数据和查询国内手机号码归属地为 ...

  4. cordova for ios(android一样)添加插件

    1.进入当前工程文件夹 终端:cd ~/Desktop/ cd piao 2.添加插件 :cordova plugin add Basic device information (Device API ...

  5. codeforces 484E

    题意:给定n<=105的数组h,有m<=105的询问,每个询问为l,r,w求[l,r]区间内连续w个的最小高度最大是多少.. 思路:首先把h数组从大到小排序,然后用建立一个可持久化的下标线 ...

  6. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  7. linux安装oracle 11g rac

    安装oracle 11gR2 RAC 一.网络规划及安装虚拟主机 主机名 主机版本 Ip rac1.localdomain Redhat 6.5 RAC节点1 192.168.100.11 rac2. ...

  8. Jquery Mobile 小结

    第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...

  9. Entity Framework 5.0系列之约定配置

    Code First之所以能够让开发人员以一种更加高效.灵活的方式进行数据操作有一个重要的原因在于它的约定配置.现在软件开发越来复杂,大家也都试图将软件设计的越来越灵活,很多内容我们都希望是可配置的, ...

  10. Python--增量循环删除MySQL表数据

    需求场景: 有一业务数据库,使用MySQL 5.5版本,每天会写入大量数据,需要不定期将多表中“指定时期前“的数据进行删除,在SQL SERVER中很容易实现,写几个WHILE循环就搞定,虽然MySQ ...