爱前端的茂茂
爱前端的茂茂

用Javascript实现固定侧边栏

用Javascript实现固定侧边栏

正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教

我们在逛某某商城的时候，或者某些网站的时候，通常会遇到有个东西叫做侧边栏，这个东西会跟随我们浏览器浏览长度来进行变化1，从而实现相对窗口的固定位置1 **代码如下** 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cm{
     
            position: absolute;
            top: 300px;
            margin-left: 1150px;
            width: 60px;
            height: 130px;
            background-color: pink;
        }
        .w{
     
            margin: 10px auto;
            width: 80%;
        }
        .head{
     
            height: 200px;
            background-color: blue;
        }
        .banner{
     
            height: 400px;
            background-color: green;
        }
        .main{
     
            height: 1000px;
            background-color: hotpink;
        }
        span {
     
            display: none;
            /*position: absolute;
             bottom: 0;*/
        }
    </style>
</head>
<body>
    <div class="cm">
        <span class="backTop">返回顶部</span>
    </div>
    <div class="head w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体区域</div>
    <script>
        var cm=document.querySelector('.cm')
        var banner=document.querySelector('.banner')
        /*console.log(banner.offsetTop)*/
        //被卷曲头部的大小位置,写在外面
        var bannertop=banner.offsetTop
        var cmtop=cm.offsetTop-bannertop
        var main=document.querySelector('.main')
        var goback=document.querySelector('.backTop')
        var maintop=main.offsetTop
        document.addEventListener('scroll',function () {
     
            //页面被卷去的头部
            /*console.log(window.pageYOffset)*/
            //当卷曲头部大于214，侧边栏改为固定
            if (window.pageYOffset>bannertop){
     
                cm.style.position='fixed'
                cm.style.top=cmtop+'px'
            }else {
     
                cm.style.position='absolute'
                cm.style.top='300px'
            }
            if (window.pageYOffset>maintop){
     
                goback.style.display='block'
            }else {
     
                goback.style.display='none'
            }
        })
    </script>
</body>
</html>

演示效果
用Javascript实现固定侧边栏_第1张图片

代码解释

这里用到了document的添加事件scroll，浏览器滚动事件，当滚动时，触发函数。
这里设置了一个变量为bannerTop，是中间那个绿色模块顶部距离页面最上方的距离，然后定义cmtop这个变量，cm为侧边栏到顶部的距离，cmtop=bannerTop-cm.offsetTop。然后判断页面卷曲的长度是否大于中间那个模块距离顶部的距离，意思的页面是否划到中间这个模块，如果划到了中间这个模块，那么让侧边栏的位置固定，然后侧边栏距离顶部的距离相应改变，这里这个情况因为侧边栏与中间拿块是相对静止，所以，未卷到中间区域时，cmtop的值是恒定不变的，当卷到中间区域时，banner。Top的值变为负值，所以cmtop的值在相应的增加，并且把这个增加的值传给侧边栏距离顶部的值，这也就出现了划到中间区域，侧边栏相对静止的情况。如果没有滑倒中间区域，那么侧边栏的位置还是默认的位置。
然后如果划到了最后一个区域则出现‘回到顶部’这四个字在侧边栏上

别喷我，写的不好就劳烦指点一二，觉得有帮助就留下个大拇指点个关注再走哈哈哈！

你可能感兴趣的:(JS,javascript,css,html,html5)

  • RedisJSON 的 JSON.STRAPPEND字符串追加的正确姿势
    1·写在前面在数据模型中，“追加”是个高频需求：日志拼接、状态堆栈、消息跟踪……如果把这些信息存在RedisJSON文档里，与其整段读出再写回，不如直接用JSON.STRAPPEND就地完成。本文将带你从语法、返回值到性能陷阱，全方位掌握JSON.STRAPPEND的使用，并配套一段Go-Redis代码示例，随取随用。2·指令总览指令功能复杂度JSON.STRAPPENDkey[path]valu
  • jQuery.jsonview.js 简单用法 聂曦r
    Title测试结果：切换展开折叠$.get('/protocol/plugin/test/',{},function(r){if(r.code==200){$("#test_result").JSONView(r.ret,{collapsed:true,nl2br:true,recursive_collapser:true});$('#collapse-btn').on('click',funct
  • esp32 idf 使用http访问json直接拼接content_length = -1 包罗万码 httpjson网络协议esp32espidf
    CMakeLists.txt添加网络请求库REQUIRESesp_http_client效果图D(14235)HTTP_CLIENT:content_length=-1需要直接拼接content_length才能打印#include#include#include"esp_log.h"#include"esp_system.h"#include"esp_event.h"#include"esp_n
  • Crash Course：10分钟心理学速成-【第23集】人格测量 ado_l
    链接：https://open.163.com/newview/movie/courseintro?newurl=%2Fspecial%2Fopencourse%2Fcrashcoursepsychology.html重点1、人格特质（Trait）理论根据稳定持久的行为模式和有意识的动机来定义不同类型的人格。奥尔波特：通过“基本特质”的概念来描述人格。特质就是特征行为和有意识的动机，但他并没有对人
  • HTML5+CSS3小实例：流星划过天际的动画效果 艾恩小灰灰
    实例：流星划过天际的动画效果技术栈：HTML+CSS效果：源码：【html】流星划过天际的动画效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*溢出隐藏*/overflow:hidden;}.container{/*绝对定位*/position:absolute;top:0;left:0;width:100%;h
  • url scheme 实现跳转到小程序页面 stand_forever 小程序
    获取小程序scheme码，适用于短信、邮件、外部网页等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码参考文档:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html/***获取urlscheme接口*/publicfu
  • web前端进阶之Javascript设计模式面向对象篇 jia林
    前言：在此说明Javascript设计模式所讲内容和知识点来自双越老师（wangEditor富文本开源作者）的视频，内容通俗易懂，受益匪浅，结合自己的学习心得整理成笔记，与大家分享，愿在前端的道路上越走越远.....从“写好代码”到“设计代码”的过程，不仅是技术的提升，更是编程思维的提升，而这其中最关键的就是设计模式，是否理解并掌握设计模式，也是衡量程序员能力的标准之一。学习前提使用过jquery
  • BERT 的“池化策略” AI扶我青云志 bert人工智能深度学习
    为什么在BERT的config.json中会出现池化层（pooling）相关的参数。这个问题其实触及了BERT输出与下游任务之间的桥梁设计，也是你理解BERT在实际应用中如何工作的关键环节。首先明确：BERT的原始Transformer模块没有传统的池化层BERT是基于Transformer构建的，Transformer输出的是：sequence_output:Tensorofshape(batc
  • python里class转换_python实现class对象转换成json/字典的方法 八决子 python里class转换
    python实现class对象转换成json/字典的方法发布于2016-03-2808:05:44|153次阅读|评论:0|来源:网友投递Python编程语言Python是一种面向对象、解释型计算机程序设计语言，由GuidovanRossum于1989年底发明，第一个公开发行版发行于1991年。Python语法简洁而清晰，具有丰富和强大的类库。它常被昵称为胶水语言，它能够把用其他语言制作的各种模块
  • 封装el-table 基于element封装可配置JSON表格组件 心肝到爆 前端jsonjavascript开发语言vue.js前端elementui前端框架
    基于element封装可配置JSON表格组件话不多说直接贴代码，复制运行即可查看效果子组件全部代码<
  • DPDK Sample Applications User Guides(42)Eventdev管道示例应用程序 超帅浩浩 SampleApplicationsUserGuidesDPDKeventdevpipeline
    官方文档查看地址：http://doc.dpdk.org/guides/sample_app_ug/eventdev_pipeline.htmlPDF下载地址：https://www.intel.com/content/www/us/en/embedded/technology/packet-processing/dpdk/dpdk-sample-applications-user-guide.h
  • Vue的ubus emit/on使用 搞个项目 前端vue.js前端javascript
    这段代码是Vue.js组件中的mounted生命周期钩子函数，主要作用是监听一个名为“macSelectData”的全局事件。具体行为如下：分步解释：mounted()生命周期钩子当组件被挂载到DOM后，Vue会自动调用mounted()方法。这里常用于初始化操作，比如数据请求、事件监听等。this.$bus.on("macSelectData",this.open)this.$bus：通常指通过
  • Android Gson复杂数据结构（如Map、List）的序列化逻辑原理剖析
    一、复杂数据结构序列化概述1.1复杂数据结构处理的重要性在Android开发中，JSON数据往往包含复杂数据结构，如Map、List等。Gson作为常用的JSON处理库，其对复杂数据结构的序列化能力至关重要。准确处理这些结构能确保数据在网络传输、本地存储等场景下保持完整的语义和结构，避免数据丢失或格式错乱。1.2核心处理流程Gson对复杂数据结构的序列化主要包含以下步骤：类型识别：确定待序列化对象
  • 深入理解 UniApp：跨平台开发的终极解决方案
    深入理解UniApp：跨平台开发的终极解决方案一、UniApp概述：重新定义跨平台开发（一）UniApp的诞生背景在移动互联网高速发展的今天，多端适配成为开发者面临的主要挑战。传统开发模式下，针对iOS、Android、微信小程序、H5等不同平台需要编写多套代码，开发成本高且维护困难。DCloud公司于2019年推出的UniApp，正是为了解决这一行业痛点而生。它基于Vue.js语法规范，实现了"
  • uni-app跨平台开发知识点总结
    uni-app简介uni-app概述：uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者
  • ubuntu18.04安装geemap 阿西是有梦想的咸鱼 python编程之路遥感影像处理可视化可视化pythonubuntu
    文章目录安装测试GEE提供了JavaScript和PythonAPI，可以向EarthEngine服务器发出计算请求。与GEEJavaScriptAPI相比，PythonAPI缺乏易于理解的操作文档和交互式可视化结果的功能。由此，geemap诞生并填补了这一空白[1]。这里给大家介绍下我折腾了一晚上才搞定的geemap的安装及测试过程。这里是geemap的GitHub参考链接。安装如Github中
  • java 结合 FreeMarker 和 Docx4j 来生成包含图片的 docx 文件 liangblog Java生产环境全栈开发Java进阶javapython开发语言
    使用FreeMarker生成HTML，然后通过Docx4j将HTML转换为.docx文件;步骤1.添加依赖确保你的项目中包含了FreeMarker和Docx4j的依赖。以下是Maven的pom.xml示例：
  • 基于注入的一种状态管理的思路 自然框架
    开始尝试做自己的状态管理。上文说了，我们可以定义一个reactive结构的userOnline，然后注入到根组件里面，那么相关的处理函数要怎么办呢？我么可以写一个单独的js文件，然后用import的方式引入进来，然后我们就可以做统一的处理了。js文件如下：import{provide,inject,reactive,readonly}from'vue'importsysUserInfofrom'.
  • 如何在 Stimulsoft JavaScript 报表组件中，设置设计器与查看器主题风格 CodeCraft Studio 控件报表图表开发javascript开发语言ecmascriptStimulsoftDashboardReport报表仪表盘工具
    在现代软件开发中，图形用户界面（GUI）不仅仅是功能的承载体，更是用户体验的关键组成部分。一个美观、统一且具备高度可定制性的界面，能够显著提升系统的专业感和使用效率。Stimulsoft作为功能强大的报表和仪表板解决方案提供商，其JavaScript版本（StimulsoftReports.JS与StimulsoftDashboards.JS）为开发者提供了丰富的内置主题支持，助力快速构建符合品牌
  • Blazor使用TXTextControl控件编辑报告 落叶飞花_ javascript开发语言
    文章目录1环境2课程链接3学习使用（加载TextControl控件）3.1DocumentEditor3.2DocumentViewer4javascriptApi列表5加载文档（TextControl加载文档，JS互操作）6开启修改跟踪（word中的修订）7文档修改保存8文档编辑，拖拽展示图片9文档编辑，使用ApplicationField10模板设计11插入图片11.1拖拽插入图片11.2Me
  • 基于selenium的pyse自动化测试框架 鱼鱼说测试 selenium测试工具
    Python接口自动化测试零基础入门到精通（2025最新版）介绍：pyse基于selenium（webdriver）进行了简单的二次封装，比selenium所提供的方法操作更简洁。特点：默认使用CSS定位，同时支持多种定位方法（id\name\class\link_text\xpath\css）。本框架只是对selenium（webdriver）原生方法进行了简单的封装，精简为大约30个方法，这些
  • 彻底拆解 Vue scoped 指令：从编译原理到工程实践的全链路解析 是罐装可乐 vue.js前端javascript
    引言我们在开发Vue项目时，经常会给标签加上scoped特性来实现组件的样式隔离。但它究竟是如何做到这一点的呢？作为开发者，我们不仅要会用这个特性，更要深入了解其底层原理。只有这样，在实际开发中才能避开各种潜在的陷阱，提升解决问题的效率。接下来，我们就来彻底剖析一下Vue的scoped指令，看看它到底是如何实现样式隔离的。css编译当标签带有scoped属性时，其CSS样式仅作用于当前组件内的元素
  • 重塑未来：AI如何重新定义全栈开发 熊猫钓鱼>_> 人工智能
    在传统认知中，全栈开发者被誉为技术界的“全能选手”。——他们需要精通前端界面构建（HTML/CSS/JavaScript）、后端业务逻辑实现（Python/Java/Node.js）、数据库设计优化（MySQL/MongoDB）以及服务器部署运维（Linux/Docker）。这种“一人包打天下”的能力模型长期被视为高效开发的黄金标准，尤其受到创业公司和小型团队的青睐，因为它能大幅减少沟通成本，加速
  • Javascript 严格模式use strict详解 滴水成川 JavaScript学习记录javascriptusestrict
    一、概述除了正常运行模式，ECMAscript5添加了第二种运行模式："严格模式"（strictmode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的，主要有以下几个：-消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;-消除代码运行的一些不安全之处，保证代码运行的安全；-提高编译器效率，增加运行速度；-为未来新版本的Javascr
  • os.path.join坑的记录 半步江南
    importrequestsimportosfromos.pathimportjointar=r"\219\1.html"root=os.getcwd()print(root)file_path=join(str(root),str(tar))print(file_path)输出为D:\workdir\py-dir\crapt_web_siteD:\219\1.html与需要的D:\workdir
  • XSS Payload 学习浏览器解码 菜鸟一个昂 servlet
    目录问题一：问题二：问题三：问题四：问题五：问题六：问题七：问题八：问题九：问题十：问题十一：问题十二：问题十三：问题十四：问题十五：问题一：无法弹窗原因：urlcode无法识别协议（javascript:）html解码顺序：1、html实体编码2、urlcode编码3,unicode编码问题二：可以弹窗首先先HTML实体编码解码，得到href中为URL，URL模块可识别为javascript协议
  • 解决跨域的几种方法 大佩梨 开发前端
    解决跨域的方法主要有以下几种：1.CORS（跨域资源共享）CORS是一种W3C规范，它定义了一种浏览器和服务器交互的方式来确定是否允许跨源请求。服务器通过设置响应头Access-Control-Allow-Origin来允许或拒绝跨域请求。例如，header(‘Access-Control-Allow-Origin:*’);允许所有来源的访问。CORS支持POST、GET等多种请求方式，相较于JS
  • 浏览器解码过程分析
    浏览器解码过程分析前言在学习xss漏洞的过程中我发现一个问题，当我想绕过过滤机制时，可以采用编码的方式进行绕过这种方法，但是并不是每一种编码格式都能绕过，需要不停的尝试才行，这样过于浪费时间。后来我发现浏览器与服务器数据传输过程中有好几种编码格式，不同的编码格式有着不同的解析引擎，作为一个浏览器，在解析一篇HTML文档时主要有三个处理过程：HTML解析，URL解析和JavaScript解析。每个解
  • js生成器 m0dw javascript前端vue.js
    文章目录概念生成器函数如何中途结束生成器的执行使用yield*迭代可迭代对象概念生成器是ES6中新增的一种特殊的函数，所以也称为“生成器函数”。它可以更灵活地控制函数什么时候执行，什么时候暂停。生成器是一种特殊的迭代器返回值调用生成器函数返回一个新的对应的生成器，通过生成器next方法可以控制其迭代，next方法则返回下一个状态的生成器由于生成器是一种特殊的迭代器，故生成器的属性与其类似如下{va
  • php中的hmac,JavaScript通过CryptoJS等效实现php中hash_hmac函数加密raw_output配置 好想不取名 php中的hmac
    在一个项目中，客户需要从前端签名，加密插件使用的cryptoJS，使用与后端一样的签名流程(HmacSHA1后Base64.encode)发现并不能通过签名认证，签名校验方后端php代码中使用hash_hmac函数，先来看一下则会个函数的官网说明：说明hash_hmac(string$algo,string$data,string$key[,bool$raw_output=FALSE]):stri
  • 开发者关心的那些事 圣子足道 ios游戏编程apple支付
    我要在app里添加IAP，必须要注册自己的产品标识符（product identifiers）。产品标识符是什么？ 产品标识符（Product Identifiers）是一串字符串，它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息，标识符只能包含大小写字母（A-Z）、数字（0-9）、下划线（-）、以及圆点(.)。你可以任意排列这些元素，但我们建议你创建标识符时使用
  • 负载均衡器技术Nginx和F5的优缺点对比 bijian1013 nginxF5
            对于数据流量过大的网络中，往往单一设备无法承担，需要多台设备进行数据分流，而负载均衡器就是用来将数据分流到多台设备的一个转发器。         目前有许多不同的负载均衡技术用以满足不同的应用需求，如软/硬件负载均衡、本地/全局负载均衡、更高
  • LeetCode[Math] - #9 Palindrome Number Cwind javaAlgorithm题解LeetCodeMath
    原题链接：#9 Palindrome Number   要求： 判断一个整数是否是回文数，不要使用额外的存储空间   难度：简单   分析： 题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间，O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转，然后与原数字进行比较。 注：没有看到有关负数是否可以是回文数的明确结论，例如
  • 画图板的基本实现 15700786134 画图板
     要实现画图板的基本功能，除了在qq登陆界面中用到的组件和方法外，还需要添加鼠标监听器，和接口实现。 首先，需要显示一个JFrame界面： public class DrameFrame extends JFrame {              //显示
  • linux的ps命令 被触发 linux
    Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照，就是执行ps命令的那个时刻的那些进程，如果想要动态的显示进程信息，就可以使用top命令。 要对进程进行监测和控制，首先必须要了解当前进程的情况，也就是需要查看当前进程，而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行
  • Android 音乐播放器 下一曲 连续跳几首歌 肆无忌惮_ android
    最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调 player.setOnCompletionListener(new OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.reset(); Log.i("H
  • java导出txt文件的例子 知了ing javaservlet
    代码很简单就一个servlet,如下： package com.eastcom.servlet; import java.io.BufferedOutputStream; import java.io.IOException; import java.net.URLEncoder; import java.sql.Connection; import java.sql.Resu
  • Scala stack试玩, 提高第三方依赖下载速度 矮蛋蛋 scalasbt
    原文地址： http://segmentfault.com/a/1190000002894524 sbt下载速度实在是惨不忍睹, 需要做些配置优化 下载typesafe离线包, 保存为ivy本地库 wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip 解压r
  • phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。 alleni123 linuxspider
    1. 首先从官网 http://phantomjs.org/下载phantomjs压缩包，解压缩到/root/phantomjs文件夹。 2. 安装依赖 sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6 3. 配置环境变量 vi /etc/profil
  • JAVA IO FileInputStream和FileOutputStream，字节流的打包输出 百合不是茶 java核心思想JAVA IO操作字节流
    在程序设计语言中，数据的保存是基本，如果某程序语言不能保存数据那么该语言是不可能存在的，JAVA是当今最流行的面向对象设计语言之一，在保存数据中也有自己独特的一面，字节流和字符流 1，字节流是由字节构成的，字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流   类 FileInputStream
  • Spring基础实例（依赖注入和控制反转） bijian1013 spring
    前提条件：在http://www.springsource.org/download网站上下载Spring框架，并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口 package com.bijian.spring.base3; public interface Weapon { void kil
  • HR看重的十大技能 bijian1013 提升能力HR成长
        一个人掌握何种技能取决于他的兴趣、能力和聪明程度，也取决于他所能支配的资源以及制定的事业目标，拥有过硬技能的人有更多的工作机会。但是，由于经济发展前景不确定，掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。 　　一、解决问题的能力 　　每天，我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决
  • 【Thrift一】Thrift编译安装 bit1129 thrift
    什么是Thrift The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s
  • 【Avro三】Hadoop MapReduce读写Avro文件 bit1129 mapreduce
    Avro是Doug Cutting(此人绝对是神一般的存在）牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的（使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景）,因此Hadoop MapReduce集成Avro也就是自然而然的事情。 这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计，然后将计算结果
  • nginx定制500，502，503，504页面 ronin47 nginx　错误显示
    server { listen 80; error_page 500/500.html; error_page 502/502.html; error_page 503/503.html; error_page 504/504.html; location /test {return502;}} 配置很简单，和配
  • java-1.二叉查找树转为双向链表 bylijinnan 二叉查找树
    import java.util.ArrayList; import java.util.List; public class BSTreeToLinkedList { /* 把二元查找树转变成排序的双向链表 题目： 输入一棵二元查找树，将该二元查找树转换成一个排序的双向链表。 要求不能创建任何新的结点，只调整指针的指向。 10 / \ 6 14 / \
  • Netty源码学习-HTTP-tunnel bylijinnan javanetty
    Netty关于HTTP tunnel的说明： http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description 这个说明有点太简略了 一个完整的例子在这里： https://github.com/bylijinnan
  • JSONUtil.serialize(map)和JSON.toJSONString(map)的区别 coder_xpf jqueryjsonmapval()
     JSONUtil.serialize(map)和JSON.toJSONString(map)的区别   数据库查询出来的map有一个字段为空   通过System.out.println()输出 JSONUtil.serialize(map)： {"one":"1","two":"nul
  • Hibernate缓存总结 cuishikuan 开源sshjavawebhibernate缓存三大框架
    一、为什么要用Hibernate缓存？ Hibernate是一个持久层框架，经常访问物理数据库。 为了降低应用程序对物理数据源访问的频次，从而提高应用程序的运行性能。 缓存内的数据是对物理数据源中的数据的复制，应用程序在运行时从缓存读写数据，在特定的时刻或事件会同步缓存和物理数据源的数据。   二、Hibernate缓存原理是怎样的？ Hibernate缓存包括两大类：Hib
  • CentOs6 dalan_123 centos
    首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块：yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang
  • 10款用 jquery 实现滚动条至页面底端自动加载数据效果 dcj3sjt126com JavaScript
      无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条
  • ImageButton去边框&Button或者ImageButton的背景透明 dcj3sjt126com imagebutton
    在ImageButton中载入图片后，很多人会觉得有图片周围的白边会影响到美观，其实解决这个问题有两种方法 一种方法是将ImageButton的背景改为所需要的图片。如：android:background="@drawable/XXX" 第二种方法就是将ImageButton背景改为透明，这个方法更常用 在XML里；    <ImageBut
  • JSP之c:foreach eksliang jspforearch
    原文出自：http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html <c:forEach>标签用于通用数据循环，它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1
  • Android实现主动连接蓝牙耳机 gqdy365 android
    在Android程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型，这篇文字只讨论如何与蓝牙耳机连接。 大致可以分三步： 一、扫描蓝牙设备： 1、注册并监听广播： BluetoothAdapter.ACTION_DISCOVERY_STARTED BluetoothDevice.ACTION_FOUND BluetoothAdapter.ACTION_DIS
  • android学习轨迹之四：org.json.JSONException: No value for hyz301 json
    org.json.JSONException: No value for items  在JSON解析中会遇到一种错误，很常见的错误   06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&
  • 干货分享：从零开始学编程 系列汇总 justjavac 编程
    程序员总爱重新发明轮子，于是做了要给轮子汇总。 从零开始写个编译器吧系列 (知乎专栏) 从零开始写一个简单的操作系统 (伯乐在线) 从零开始写JavaScript框架 (图灵社区) 从零开始写jQuery框架 (蓝色理想 ) 从零开始nodejs系列文章 (粉丝日志) 从零开始编写网络游戏 
  • jquery-autocomplete 使用手册 macroli jqueryAjax脚本
    jquery-autocomplete学习 一、用前必备 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 当前版本：1.1 需要JQuery版本：1.2.6 二、使用 <script src="./jquery-1.3.2.js" type="text/ja
  • PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改 超声波 oracleplsql
    　　在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库，常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错，什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户
  • 数据仓库数据模型之：极限存储--历史拉链表 superlxw1234 极限存储数据仓库数据模型拉链历史表
    在数据仓库的数据模型设计过程中，经常会遇到这样的需求： 1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址，产品的描述信息，订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息，比如，查看某一个订单在历史某一个时间点的状态，    比如，查看某一个用户在过去某一段时间内，更新过几次等等; 4. 变化的比例和频率不是很大，比如，总共有10
  • 10点睛Spring MVC4.1-全局异常处理 wiselyman spring mvc
    10.1 全局异常处理 使用@ControllerAdvice注解来实现全局异常处理; 使用@ControllerAdvice的属性缩小处理范围 10.2 演示 演示控制器 package com.wisely.web; import org.springframework.stereotype.Controller; import org.spring
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他