zoukankan      html  css  js  c++  java
  • Html标签之frameset&图片切换

      今天为大家分享一下刚刚总结好的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"></a>
            <a href="images/img3-lg.jpg" title="Image3"><img src="images/img3-thumb.jpg"></a>
            <a href="images/img4-lg.jpg" title="Image4"><img src="images/img4-thumb.jpg"></a>
            <a href="images/img5-lg.jpg" title="Image5"><img src="images/img5-thumb.jpg"></a>
            <a href="images/img6-lg.jpg" title="Image6"><img src="images/img6-thumb.jpg"></a>
        </p>
      </body>
    </html>

    效果图:

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

  • 相关阅读:
    Java实现 LeetCode 27 移除元素
    Java实现 LeetCode 26 删除排序数组中的重复项
    Java实现 LeetCode 26 删除排序数组中的重复项
    Java实现 LeetCode 26 删除排序数组中的重复项
    Java实现 LeetCode 25 K个一组翻转链表
    Java实现 LeetCode 25 K个一组翻转链表
    Java实现 LeetCode 25 K个一组翻转链表
    Java实现 LeetCode 24 两两交换链表中的节点
    Java实现 LeetCode 24 两两交换链表中的节点
    Java实现 LeetCode 24 两两交换链表中的节点
  • 原文地址:https://www.cnblogs.com/AndroidJotting/p/4270957.html
Copyright © 2011-2022 走看看