js案例

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 85 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zygxfx/p/4421390.html

文章标签：

#javascript #ViewUI

本文介绍了一种将HTML页面标题自动固定至页面顶部的方法，并通过使用JavaScript监听滚动事件来实现这一功能。同时，文章还展示了如何利用localstorage进行数据存储，确保用户数据在不同页面间的持久性。此外，文章还提到了自动聚焦输入框的实现，提升了用户体验。

1、标题固定页面顶端

HTML页面：
<!--150410-->
        <div class="xqbox" id="title1">
            <div class="pd10">
                <h1>{$result.sItemName}</h1>
                <p class="f999 f12">
                    <span class="tap flor"><i class="gray">{$result.sAuditState}</i></span>更新时间：{$result.dPublishTime}
                </p>
            </div>
        </div>
        <div class="xqbox" id="title2" style="position:fixed;width:100%;top:0;left:0;z-index:9;display:none;">
            <div class="pd10">
                <h1>{$result.sItemName}</h1>
                <p class="f999 f12">
                    <span class="tap flor"><i class="gray">{$result.sAuditState}</i></span>更新时间：{$result.dPublishTime}
                </p>
            </div>
        </div>
        <!--150410 end-->

JS页面：
      // 标题固定页面顶端 
        $(window).on('scroll',function(){   
          if(document.body.scrollTop>130 || document.documentElement.scrollTop>130){
              $('#title2').css('display','block');
              $('#title1').css('visivility','hidden');
          }else{
            // alert(456);
              $('#title2').css('display','none');  
              $('#title1').css('visibility','visible');
          }  
        });

2、localstorage

html页面：
<input type="hidden" data-id="zhaopaiStorage" value="id~{$result.sParcelID};title~{$result.sParcelName};district~{$result.sParcelArea}~{$result.sParcelAreaCity}~{$result.sParcelAreaDis};class~1|" />
js页面：     
define(function(require,exports,module){
    "use strict";
    module.exports = function(options){
        var $ = require("jquery");
        var vars = seajs.data.vars;
        $("input[type=hidden]").each(function(index,element){
            vars[$(this).attr('data-id')] = element.value;
        });
        //设置localstorage
        var storage = window.localStorage;
        // 当localstorage为空时第一次存
        if(!storage.tudi_view_History){
            storage.setItem('tudi_view_History',vars.tudiStorage);
        }
        // 判断localstorage中是否已存在
        if(storage.tudi_view_History.indexOf(vars.tudiStorage)==-1){
            storage.tudi_view_History = storage.getItem('tudi_view_History')+vars.tudiStorage;
        }
    }
});

3、自动聚焦

//自动聚焦
        $("#textarea").focus();

转载于:https://www.cnblogs.com/zygxfx/p/4421390.html