当前位置：Gxlcms > JavaScript > jquery插件splitScren实现页面分屏切换模板特效_jquery

jquery插件splitScren实现页面分屏切换模板特效_jquery

时间：2021-07-01 10:21:17 帮助过：2人阅读

闲来无事，搞了个页面的分屏效果，先来看下效果：

出于可自定义宽高的目的,屏幕分块由CSS控制，由js控制估计等分模块效果一般.

程序相关说明：

HTML结构：

  1. <div class="header">
  2.       header
  3. </div>
  4.   <div class="container" id="displayArea">
  5.       <!-- 分屏内容渲染区域 -->
  6.   </div>
  7. <div class="footer">
  8.  <!--省略其他代码-->
  9. </div>

js调用：

splitScreen.js相关代码说明：

1.定义一个类

2.prototype主要方法

3.screenMode()方法说明：

主要是根据不同的分屏切换不同的Class，通过CSS类去控制分屏布局.这样写的好处应该是可以自定义布局的宽高大小，但是比较繁琐。如下：

CSS布局控制：

  1. .fp-box{position:absolute;border:1px solid #000;background:#fff;}
  2.       .fp-1-1{top:0;left:0;right: 0;bottom: 0;}
  3.       .fp-2-1{top:0;left:0;right: 300px;bottom: 0;}
  4.       .fp-2-2{top:0;right: 0px;bottom: 0; width: 300px;}
  5.       .fp-3-1{top:0;left:0;right: 300px;bottom: 0;}
  6.       .fp-3-2{top:0;right: 0;width:300px;height:50%;}
  7.       .fp-3-3{top:50%;right: 0;bottom: 0;width:300px;}
  8.       .fp-4-1{top:0;left:0;right: 50%;height:50%;}
  9.       .fp-4-2{top:50%;left:0;right: 50%;bottom: 0;}
  10.       .fp-4-3{top:0;right: 0;width:50%;height:50%;}
  11.       .fp-4-4{top:50%;right: 0;bottom: 0;width:50%;}
  12.   
  13.       .fp-5-1{top:0;left:0;right: 300px;bottom: 252px;}
  14.       .fp-5-2{top:0px;width:300px;right: 0;bottom: 252px;}
  15.       .fp-5-3{height: 250px;left:0;width:30%;bottom: 0;}
  16.       .fp-5-4{height: 250px;left:30%;width:30%;bottom: 0;}
  17.       .fp-5-5{height: 250px;left:60%;bottom: 0;right: 0;}
  18.       .fp-6-1{top:0;left:0;right: 300px;bottom: 252px;}
  19.       .fp-6-2{top:0;width:300px;right: 0;height:250px;}
  20.       .fp-6-3{top:250px;width:300px;right: 0;bottom: 252px;}
  21.       .fp-6-4{height: 250px;left:0;width:30%;bottom: 0;}
  22.       .fp-6-5{height: 250px;left:30%;width:30%;bottom: 0;}
  23.       .fp-6-6{height: 250px;left:60%;bottom: 0;right: 0;}

完整代码：

HTML：

  2.   <meta charset="UTF-8">
  3.   <title>fp version2</title>
  4.   
  5.   <style type="text/css">
  6.       *{margin:0;padding:0;}
  7.       .header{background:#ddd;height:120px;}
  8.       .footerCon{width:320px;margin: 0 auto;}
  9.       .footerCon .dropDiv{background: #fff; margin: 10px 0 0 0; float: left;}
  10.       .footerCon .fpmodel{display: none;float: right;width:160px;}
  11.       .footerCon .saveBtn{margin: 10px 0 0 10px; padding: 2px 10px;border:1px solid #CCC;cursor: pointer;}
  12.       .clearFix:after{content:'';display:block;height:0;overflow:hidden;clear:both;} 
  13.       .footer { height: 40px; background: #ABABAB; position: fixed; bottom: 0px; width: 100%; }
  14.       .footer .ulTab {list-style-type: none;width:200px;overflow: hidden;float: left;}
  15.       .footer .ulTab li{float: left;height:16px;padding: 12px 15px;cursor: pointer;}
  16.       .footer .ulTab li.currentLi{background: #fff;}
  17.       
  18.       .tabImg{width:18px;height: 14px;border:1px solid #707070;background:#fff;}
  19.       .tabImg td{width: 9px;height: 5px;border:1px solid #707070;}
  20.       .divImg{border-width:2px;height: 12px;}
  21.       .td3Img td{height: 3px;}
  22.       .currentLi .tabImg,.currentLi .tabImg td{border-color:#1e7be4;}
  23.       .topbarDiv{position: absolute;left: 0;top:0;right:0;border:1px solid #dedede;z-index: 1;height:25px;padding:3px;background: #61C0FA;display: none;}
  24.       .changeBtn{cursor:pointer; padding: 2px 10px;float: left;}
  25.       .dropDiv,.footer .dropDiv{position: relative;width: 100px;z-index: 100;}
  26.       .dropDiv .curSrc,.footer .dropDiv .curSrc{display: inline-block;height: 20px;line-height: 20px;padding: 0 2px;}
  27.       .dropDiv ul,.footer .dropDiv ul{position: absolute;left: -1px;top:20px;background: #fff;width:100px;border:1px solid #1E7BE4;display: none;}
  28.       .dropDiv ul li,.footer .dropDiv ul li{line-height: 20px;padding: 0 2px;}
  29.       .dropDiv ul li.currentSrc,.footer .dropDiv ul li.currentSrc{background: #1E7BE4;color: #fff;cursor: pointer;}
  30.       .dropDiv ul li:hover,.footer .dropDiv ul li:hover{background:#AEC9F3;color: #fff;cursor: pointer;}
  31.       .optionsWrap{float: right;}
  32.       .optionsWrap a{font-family: 'MicroSoft YaHei';color:#fff;text-decoration:none;float: left;}
  33.       .optionsWrap a:hover{color: #fdd;cursor:pointer;}
  34.       .btnBig{width: 50px;height:30px;text-align: center;}
  35.       .btnSmall{width: 50px;height:30px;text-align: center;}
  36.       .btnCls{width: 50px;height:30px;text-align: center;}
  37.       /*分屏模块布局*/
  38.       .container{position: relative;}
  39.       .fp-box{position:absolute;border:1px solid #000;background:#fff;}
  40.       .fp-1-1{top:0;left:0;right: 0;bottom: 0;}
  41.       .fp-2-1{top:0;left:0;right: 300px;bottom: 0;}
  42.       .fp-2-2{top:0;right: 0px;bottom: 0; width: 300px;}
  43.       .fp-3-1{top:0;left:0;right: 300px;bottom: 0;}
  44.       .fp-3-2{top:0;right: 0;width:300px;height:50%;}
  45.       .fp-3-3{top:50%;right: 0;bottom: 0;width:300px;}
  46.       .fp-4-1{top:0;left:0;right: 50%;height:50%;}
  47.       .fp-4-2{top:50%;left:0;right: 50%;bottom: 0;}
  48.       .fp-4-3{top:0;right: 0;width:50%;height:50%;}
  49.       .fp-4-4{top:50%;right: 0;bottom: 0;width:50%;}
  50.   
  51.       .fp-5-1{top:0;left:0;right: 300px;bottom: 252px;}
  52.       .fp-5-2{top:0px;width:300px;right: 0;bottom: 252px;}
  53.       .fp-5-3{height: 250px;left:0;width:30%;bottom: 0;}
  54.       .fp-5-4{height: 250px;left:30%;width:30%;bottom: 0;}
  55.       .fp-5-5{height: 250px;left:60%;bottom: 0;right: 0;}
  56.       .fp-6-1{top:0;left:0;right: 300px;bottom: 252px;}
  57.       .fp-6-2{top:0;width:300px;right: 0;height:250px;}
  58.       .fp-6-3{top:250px;width:300px;right: 0;bottom: 252px;}
  59.       .fp-6-4{height: 250px;left:0;width:30%;bottom: 0;}
  60.       .fp-6-5{height: 250px;left:30%;width:30%;bottom: 0;}
  61.       .fp-6-6{height: 250px;left:60%;bottom: 0;right: 0;}
  62.   </style>
  63.   
  64.     <div class="header">
  65.       header
  66.     </div>
  67.     <div class="container" id="displayArea">
  68.       <!-- 分屏内容区 -->
  69.     </div>
  70.     <div class="footer">
  71.     <div class="footerCon clearFix">
  72.       <ul class="ulTab">
  73.         <li class="currentLi" data-fp="1" onclick="changeModel(this)">
  74.           <div class="tabImg divImg"></div>
  75.         </li>
  76.         <li data-fp="3" onclick="changeModel(this)">
  77.           <table class="tabImg" cellpadding="0" cellspacing="0">
  78.             <tbody><tr>
  79.               <td rowspan="2"></td>
  80.               <td></td>
  81.             </tr>
  82.             <tr>
  83.               <td></td>
  84.             </tr>
  85.           </tbody></table>
  86.         </li>
  87.         <li data-fp="6" onclick="changeModel(this)">
  88.           <table class="tabImg td3Img" cellpadding="0" cellspacing="0">
  89.             <tbody><tr>
  90.               <td rowspan="2" colspan="2"></td>
  91.               <td></td>
  92.             </tr>
  93.             <tr>
  94.               <td></td>
  95.             </tr>
  96.             <tr>
  97.               <td></td>
  98.               <td></td>
  99.               <td></td>
  100.             </tr>
  101.           </tbody></table>
  102.         </li>
  103.         <li data-fp="setting" onclick="changeModel(this)" title="设置">
  104.           <table class="tabImg td3Img" cellpadding="0" cellspacing="0">
  105.             <tbody><tr>
  106.               <td rowspan="2" colspan="2"></td>
  107.               <td></td>
  108.             </tr>
  109.             <tr>
  110.               <td></td>
  111.             </tr>
  112.             <tr>
  113.               <td></td>
  114.             </tr>
  115.           </tbody></table>
  116.         </li>
  117.       </ul>
  118.     </div>
  119.   </div>
  120.

JS：

以上所述就是本文的全部内容了，希望大家能够喜欢。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！