天梯梦
天梯梦

视差滚动(Parallax Scrolling)效果的原理和实现

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。

 

可以先看看效果：http://www.ok-studios.de/home/

 
一、什么是视差滚动？

 

视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。 当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素 在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品 商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。
 
目前这种视差滚动效果被越来越多的国外网站所应用， 成为网页设计的热点趋势。
 
通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。 厌倦了千篇一律，呆板网页设计的你不放一试。
 

就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。

 

二、视差滚动效果的主要特点：

 

1、直观的设计，快速的响应速度，更合适运用于单页面
2、差异滚动 分层视差
页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层。
 
三、原理

 

通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果

页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层

　　差异滚动的实现规则：

  • 　　背景层的滚动(最慢)
  • 　　贴图层(内容层和背景层之间的元素)的滚动(次慢)
  • 　　内容层的滚动(可以和页面的滚动速度一致)

　　我们让三个图层的滚动速度不一致，就做出了漂亮的差异滚动效果

视差滚动(Parallax Scrolling)效果的原理和实现_第1张图片
视差滚动(Parallax Scrolling)效果的原理和实现_第2张图片
视差滚动(Parallax Scrolling)效果的原理和实现_第3张图片
视差滚动(Parallax Scrolling)效果的原理和实现_第4张图片

 

1、运用大背景

　　这些背景图像一般是高分辨率，大图，覆盖整个网站。高清照片是一个迅速抓住观众的好方式，可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上

　　注意：

　　1. 1、背景图的色彩、内容在选择时要十分讲究，前提是不要破坏用户的体验，不然再漂亮的照片也是枉然。

　　图片类型最好选取趋向于一些比较柔和、略带透明的一类，不要影响到网站主体内容的阅读，识别，讲究协调。

　　1.2、以大量图片为特色的页面应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验.

2、你也可以用简单的配色方案

     没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式，一个视差区间内颜色最好保持使用2到3种，我们可以调整颜色的透明度，来达到各种视觉效果

3、定位好背景层，贴图层和内容层之间的关系

     根据页面自身的功能来定义是否需要贴图层，贴图层的存在是为了更有效的传达视觉效果，但如果它成为了干扰，就会违背了我们使用的初衷

　　内容层的展现是最主要的，无论背景层和贴图层有多少花哨，在设计师设计过程中，内容层对用户的展示是最优先的

4、讲故事

　　有力的表现、简约的风格和设计的美感共同构成了一个出色地交互式叙事体验。我们经常听到这样的话：内容是王道，技术只是实现内容的一种工具。当 你能够成功地把有力的信息和漂亮的执行力结合起来，你就能创造出人们喜欢并且享受其中的体验。　————Wieden+Kennedy

　　TWO 数据可视化——信息图形设计　故事1 传统水银体温计和大字母水银体温计　　

 

四、实现方法和工具

 

1、在CSS中定义背景滚动方式的属性是backgroud-attacthment

 

background-attachment -- 定义背景图片随滚动轴的移动方式

  • 取值: scroll | fixed | inherit
    • scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
    • fixed: 当页面的其余部分滚动时，背景图像不会移动。
    • inherit: 规定应该从父元素继承 background-attachment 属性的设置。
    • 初始值: scroll
    • 继承性: 否
    • 适用于: 所有元素

附带w3c的链接：http://www.w3school.com.cn/css/pr_background-attachment.asp

 

浏览器的支持性：

 

测试了chrome,opera,safari,firefox,ie7-8都是可以的，所以就是说IE6下不行~

 

在IE6下使用这个属性，需要把background-attachment:fixed放置于body或html当中，就是说你说在其它标签里面是没用。上面的w3c里可以看得到效果就是因为它是放在body里的。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滚动视觉差示例</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            body{
                text-align:center;
                background-attachment:fixed;
            }
            #main{
                width: 1280px;
                margin:auto
            }
            .header{
                background:#fff;
                padding: 10px 0
            }
            .bg-attachment{
                background:url(6.jpg) center center no-repeat;
                box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                background-attachment:fixed;
            }
            .bg-attachment .shadow{
                width:80%;
                height:700px;
                overflow:hidden;
                margin:auto;
            }
            .div2{
                background:url(qingz.jpg) center center no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="header">
                <img src="5.jpg">
            </div>
            <div class="bg-attachment">
                <div class="shadow"></div>
            </div>
            <div class="header">
                <img src="qi.jpg">
            </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>

 

2、插件

Scrollorama

curtain.js  类似于幕布升起的效果

jQuery-Parallax

stellar.js

jparallax

Skrollr

Parallax.js

A Simple Parallax Scrolling Technique via Nettuts+

 

Parallax Slider

3、教程

 

四、超炫的视差滚动效果网站设计欣赏

 

GLP创意

视差滚动(Parallax Scrolling)效果的原理和实现_第5张图片

 

divups

视差滚动(Parallax Scrolling)效果的原理和实现_第6张图片

 

New ebay

360 Long Road Zurich

视差滚动(Parallax Scrolling)效果的原理和实现_第7张图片

Q Music Titanic

Putzengel

OK Studios

Nike Better World

Ben the Bodyguard

Egopop Creative Studio

Smokey Bones

Cultural Solutions

The Beatles Rock Band

XHTML Slicing

Farmhouse Fare

Sullivan NYC

I to Sie Ceni

Grab and Go

Micro-Site for Mario Kart Wii

Air Jordan 2012

Micro-site for Mario Kart Wii

Unfold

Dentsu Network

ResIm

Jan Ploch

Kry-Ptis

Anna Safroncik

Unfinished Business

Volkswagen-Beetle

Appmiral

Atlantis World’s Fair

Johan Reinhold

Iutopi

Beautiful Explorer

Bagigia

Activate Drinks

Tokyu Agency Recruit 2013

Von Dutch

Playtend

Phase 2 Design Studio

Friendly Gents

TokioLab

Krystalrae

No leath

Dangers of Fracking

Mo’s & Bows

Tinke

Whiteboard

New Zealand

Marcus Thomas

Fishy

Soleil Noir

kinvara3

Smokey Bones

Laurentius : Jaarverslag 2010

ala

Bomb Girls

Head2Heart

Michelberger Booze<

Ascensión Latorre

Biamar

inTacto 10 Years

 

你可能感兴趣的:(scroll)

  • DOM 中常见宽度属性详解与应用
    DOM中常见宽度属性详解与应用经常在做“文本是否超出容器”、“自适应布局”、“滚动条判断”等功能时，需要用到scrollWidth、clientWidth等属性。下面我们来系统讲清楚它们的区别与用法。一张图搞懂它们的区别+-----------------------------+←offsetWidth|padding|▕|+---------------------+|←clientWidth
  • vue使用scrollreveal库 数字浪儿 vuevue.js前端javascript
    vue项目安装scrollrevealnpminstallscrollreveal推荐使用cnpminstallscrollreveal代码展示如下：HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldimportScrollRevealfrom"scrollreveal";exportdefault{name:"App",dat
  • Added non-passive event listener to a scroll-blocking ‘touchmove‘ event解决方案 じòぴé南冸じょうげん vue问题集合vue.js前端javascript
    打开pc浏览器的控制台，发现了如下的警告：解释警告信息：上面警告的大概意思是：增加non-passive（非被动）来监听这个滚动块“触摸移动事件”，考虑将事件处理变成passive（被动），使页面更加具有响应性。那肯定在这个触摸事件（touchmove）中存在passive或者non-passive这个属性，需要让事件改为被动的。产生的原因：我们使用的是"饿了吗"，在ElementUI表单校验的过
  • VBA 精选示例代码库 ←か淡定☆ ヾ VBA杂坛VBAExcel代码片断Office编程
    目录1.厘米&英寸&像素&Point的转换2.固定滚动区域3.按特定数量的行、列或页滚动3.1`Window.SmallScroll`方法：按行或按列滚动窗口内容3.2`Window.LargeScroll`方法：按页滚动窗口内容4.工作簿VBA属性和操作4.1按名称引用工作簿4.2按状态引用工作簿4.3按打开顺序（时间）引用工作簿4.4将工作簿分配给变量4.5创建新工作簿4.6打开工作簿4.7计
  • Android开发——不同布局的定位属性 与 通用属性
    目录不同布局的定位属性1.线性布局（LinearLayout）2.相对布局（RelativeLayout）3.约束布局（ConstraintLayout）4.表格布局（TableLayout）5.网格布局（GridLayout）6.帧布局（FrameLayout）7.坐标布局（AbsoluteLayout）8.滚动布局（ScrollView）9.水平滚动布局（HorizontalScrollVie
  • Python 3 中tkinter 里的滚动文本框（ScrolledText） 彭啊彭
    最近在写一个模拟做题系统，里面有一个输出错题的功能，设置的文本框只有输出一道错题的大小，但是不能就一道题吧，就想到了平时页面里的滚动文本框，上网搜了搜，查到了ScrolledText，但是没找到实现我所需要功能的具体方法，没办法，我就自己研究了研究，好在最后实现了，现在就附上我的实现代码：defcuotiwin():globalscore#分数globallist2#存放错题var1=String
  • UIKit框架使用总结--看看你掌握了多少 CCCCCC1990 ui
    一、经常使用的，基本就是每次项目迭代都需要使用的UIView、UILabel、UIImage、UIColor、UIFont、UIImageView、UITextField、UIButton、UIScrollView、UITableView、UITableViewCell、UICollectionView、UICollectionViewCell、UITextView、UIViewControlle
  • Bootstrap 5学习教程，从入门到精通，Bootstrap 5 滚动监听（Scrollspy）语法知识点及案例代码（25） 知识分享小能手 网页开发Bootstrap5前端开发bootstrap学习前端javascripttypescripthtmlcss
    Bootstrap5滚动监听（Scrollspy）语法知识点及案例代码Bootstrap5的Scrollspy组件允许根据用户的滚动位置自动更新导航链接的激活状态。这对于创建具有固定导航栏的单页网站特别有用，能够提升用户体验和导航的便捷性。一、Scrollspy语法知识点1.基本结构要使用Scrollspy，需要以下几个关键部分：导航栏（Navbar）：包含指向页面不同部分的链接。目标容器（Tar
  • 【鸿蒙开发】ArkUI滚动类组件-Scroll、Scroller 胡辰和 鸿蒙开发HarmonyOS移动开发harmonyos鸿蒙开发ArkUI组件化容器移动开发Scroll
    鸿蒙开发往期学习笔录：鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……Scroll作为可滚动的容器类组件，它最多包含一个子组件，当子组件的布局尺寸在指定的
  • 鸿蒙5.0开发进阶：Scroll容器嵌套多种组件事件处理实现案例 焦味猪腩饭 鸿蒙5.0harmonyosandroid嵌入式硬件前端鸿蒙系统ArkUIUI框架
    往期鸿蒙全套实战文章必看：（文中附带鸿蒙全栈学习资料）鸿蒙开发核心知识点，看这篇文章就够了最新版！鸿蒙HarmonyOSNext应用开发实战学习路线鸿蒙HarmonyOSNEXT开发技术最全学习路线指南
  • 鸿蒙ArkTS容器组件：【Scroll】 鸿蒙系统小能手Mr.Li 鸿蒙开发harmonyos鸿蒙鸿蒙开发OpenHarmony组件arkts程序员
    Scroll可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。说明：开发前请熟悉鸿蒙开发指导文档：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。该组件从APIversion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。该组件嵌套List子组件滚动时，若List不设置
  • react gsap动画库使用详解之scroll滑动动画 伍哥的传说 前端源码分享react.js前端前端框架vue.jsvue动画javascript
    简介gsap高性能的JavaScript动画库，在现代网页设计和开发中运用。安装npminstallgsapReact框架中使用可以考滤使用react-gsap-enhancer库，或者@gasp/react。类组件使用react-gsap-enhancer高阶组件，函数组件使用@gasp/react自定义Hook。npminstallreact-gsap-enhancer#oryarnaddre
  • python selenium 滚动页面到定位元素 我有一个希哥 pythonselenium前端
    用js语句target=driver.find_element_by_id("id")driver.execute_script("arguments[0].scrollIntoView();",target)或target=WebDriverWait(driver,3).until(expected_conditions.presence_of_element_located((By.ID,"i
  • Python Selenium 滚动到特定元素 Humbunklung 学海泛舟pythonselenium开发语言
    文章目录PythonSelenium滚动到特定元素⚙️**1.使用`scrollIntoView()`方法（最推荐）**️**2.结合`ActionChains`移动鼠标（模拟用户行为）****3.使用坐标计算滚动（精确控制像素）**⚠️**4.处理复杂场景的进阶技巧****（1）元素在iframe中****（2）动态加载内容****（3）横向滚动****5.常见问题与解决方案****总结：根据场
  • 解决vue移动端哈希模式页面返回滚动条置顶问题 【03】 vue笔记vue.jsjavascript
    问题：如a页面为列表，点击列表进入b页面，再返回a页面，a页面的滚动条置顶了解决思路：使用keep-alive缓存页面，在路由跳转时存储滚动条高度，在页面显示是设置滚动条高度全局js文件GFN.jsexportdefault{/***储存列表滚动条高度*@paramt*/saveScroller:(t)=>{t.scrollY=t.$refs.v_list.scroller.scrollTop},
  • 浏览器移动端html右边有一点白_手机端页面在项目中遇到的一些问题及解决办法... weixin_39804335
    1.解决页面使用overflow:scroll在iOS上滑动卡顿的问题?首先你可能会给页面的html和body增加了height:100%,然后就可能造成IOS上页面滑动的卡顿问题。解决方案是：(1)看是否能把body和html的height:100%去除掉。(2)在滚动的容器中增加：-webkit-overflow-scrolling:touch或者给body增加：body{overflow-x
  • Vue SPA 路由跳转无法回到顶部问题排查与解决 浪裡遊 vue.jsjavascriptecmascriptpiniarouterhtml
    VueSPA路由跳转无法回到顶部问题排查与解决1.问题现象描述在使用Vue3+VueRouter4开发单页应用（SPA）时，遇到如下问题：点击导航栏或页脚的路由跳转后，页面没有自动回到顶部。即使配置了VueRouter的scrollBehavior，页面依然没有回到顶部的效果。有时内容会被导航栏遮住，看起来像"没有回到顶部"。2.常见原因分析内容区没有为导航栏预留空间导航栏是fixed或stick
  • HarmonyOS 中 Scroll 组件：轻松构建丝滑可滚动页面 大雨淅淅 #HarmonyOS开发harmonyos华为
    目录HarmonyOS中Scroll组件：轻松构建丝滑可滚动页面一、认识HarmonyOSScroll组件二、Scroll组件基础使用三、Scroll组件属性详解1.滚动相关属性2.样式相关属性3.事件相关属性四、高级应用场景1.嵌套滚动2.惯性滑动五、常见问题与解决方案1.滚动不流畅2.滚动条显示异常在HarmonyOS应用开发中，可滚动页面是提升用户体验的重要元素。无论是新闻资讯展示、商品列表
  • swiftui TextEditor去除背景方法 泓博 swiftui
    去除TextEditor背景的方法使用.scrollContentBackground(.hidden)修饰符可以隐藏TextEditor的背景。该方法适用于iOS16及以上版本。TextEditor(text:$text).scrollContentBackground(.hidden).background(Color.clear)使用ZStack叠加透明背景通过ZStack将TextEdit
  • 分页器封装 牧杉-惊蛰 javascript前端vue.jselementui
    项目场景：提示：这里简述项目相关背景：在做项目中，我们对于一般的element组件使用时都会进行二次封装，这个就是对分页器的封装方案：提示：这里填写该问题的具体解决方案：1：组件import{scrollTo}from'@/utils/scroll-to'constprops=defineProps({total:{required:true,type:Number},page:{type:Num
  • 微信小程序组件库深度解析（2025精选版）
    本文全面解析官方+高星第三方组件库，附每个组件的实战案例代码一、官方基础组件库（WeUI）1.视图容器组件(1)scroll-view-滚动视图商品{{item.id}}-{{item.name}}加载中...核心属性：scroll-y：允许垂直滚动scroll-top：设置滚动位置bindscrolltolower：触底事件2.表单组件(1)form-表单容器登录Page({submitForm
  • react native 解决键盘弹起遮挡输入框问题
    问题:使用Textinput组件时,ios模拟器软键盘弹出会遮挡住输入框.如何调出软键盘:解决思路:(其他情况类似)1、Textinput在ScrollView中当弹出软键盘时,计算软键盘的高度,state设置ScrollView的paddingBottom值加上软键盘的高度2、Textinput固定在屏幕底部当弹出软键盘时,计算软键盘的高度,state设置Textinput定位的bottom值加
  • QT6中控件QScrollArea AI+程序员在路上 QT&C++实战系列开发语言qt
    一.QScrollArea概述1.QScrollArea是Qt中用于创建可滚动区域的容器控件，当内容超出可视区域时，会自动显示滚动条。在QT6中，它保持了与之前版本相似的接口，但进行了内部优化。2.核心特性：支持水平和垂直滚动自动显示/隐藏滚动条可调整内容小部件大小策略支持自定义滚动条行为与布局管理器无缝集成二.UI设计器中使用方法1.添加QScrollArea在QtDesigner左侧控件面板中
  • uniapp scroll-view横向滚动不起效、纵向滚动自适应高度 赫卡夹 前端uni-app前端
    1.scroll-view纵向滚动自适应高度使用竖向滚动时，需要给一个固定高度，通过css设置height；如果不想写死、不想通过js计算，希望灵活获取高度应该怎么做呢，用css即可示例：//外层内容1内容2滚动区域即可；后面在真机测试下纵向滚动还遇到问题，切换到不同tab时，滚动条不复位，依然保持在上一次的滚动位置；增加:scroll-top=“scrollTop”，在切换tab时把scroll
  • react native关于在ScrollView里使用WebView会有大片多余空白的问题 angan0295 json
    本人也是reactnative的菜鸟，下面只是说说解决方案，具体为什么可以实现目前还不懂。我在项目里因为需求关系，在ScrollView里放置了WebView。方法一：一开始我按照网上的一些方法在js里的代码如下：12{8this.setState({9WebViewHeight:(parseInt(title.title))10})11}}12onMessage={(e)=>{13this.ha
  • ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview 2401_84447417 程序员reactnativereact.jsjavascript
    文章目录一、概述二、属性2.1Style2.2方法2.2.1scrollTo()2.2.2crollToEnd()三、拓展阅读一、概述ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确
  • 深入探索前端世界的“侦察兵”：Observer API 家族全解析 斯~内克 前端javaScript前端
    在现代复杂的前端应用中，高效、精准地感知DOM变化、元素可见性、视口交叉状态以及性能指标至关重要。传统的事件监听（如scroll、resize）或轮询（setInterval）方式不仅性能开销大，而且难以精确控制。此时，ObserverAPI家族应运而生，它们如同前端世界的“专业侦察兵”，提供了更优雅、更高效的异步观察机制。本文将深入剖析MutationObserver、IntersectionO
  • 在UniApp中实现滚动时导航栏渐显固定效果 时无诳语Imp uni-app
    由于有时候UI出图很丰富,根本没有固定的导航栏,但是又要实现滚动页面有固定导航栏,还是渐渐显示的效果我的导航栏exportdefault{data(){return{navbarOpacity:0,//透明度navbarFixed:false,//是否固定navbarHeight:44,//导航栏高度，根据实际调整scrollTop:0//滚动位置}},methods:{handleScroll(
  • 【慧游鲁博】【11】小程序端·游览画卷修改·支持图片url格式·结合图床上传和加载·数据对接 哇哦哇哦~~ 创新实训个人记录小程序vuespringboot后端
    文章目录需求修改细节前端主要修改点说明：前端传递格式后端ArtifactItem类：ScrollServiceImpl类：修改`InfoPanel`结构重构`ScrollHorizontalRollComposer`修改后的`ScrollHorizontalRollComposer`移除冗余代码修改总结数据流图片格式兼容性问题成果展示需求由于图片和文字交流是相互独立的，故仅保留文字交互信息，然后根
  • uniapp下拉渐显自定义导航栏 是小张呀！ uni-app前端javascript
    通过自定义导航栏实现：导航栏往下滑动exportdefault{data(){return{h:uni.getSystemInfoSync().statusBarHeight+45,opacity:0}},onPageScroll:function(Object){console.log(Object)this.opacity=(Object.scrollTop/this.h)console.lo
  • Linux的Initrd机制 被触发 linux
    Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
  • maven本地仓库路径修改 bitcarter maven
    默认maven本地仓库路径：C:\Users\Administrator\.m2 修改maven本地仓库路径方法：     1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml     2.找到        
  • XSD和XML中的命名空间 darrenzhu xmlxsdschemanamespace命名空间
    http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml http://blog.csdn.net/wanghuan203/article/details/9203621 http://blog.csdn.net/wanghuan203/article/details/9204337 http://www.cn
  • Java 求素数运算 周凡杨 java算法素数
    网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。 第一种：   原理: 6N(+-)1法         任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…)   
  • java 单例模式 g21121 java
    想必单例模式大家都不会陌生，有如下两种方式来实现单例模式：   class Singleton { private static Singleton instance=new Singleton(); private Singleton(){} static Singleton getInstance() { return instance; }
  • Linux下Mysql源码安装 510888780 mysql
    1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz (1)创建mysql的安装目录及数据库存放目录       解压缩下载的源码包，目录结构，特殊指定的目录除外：           
  • 32位和64位操作系统 墙头上一根草 32位和64位操作系统
    32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了
  • 我的spring学习笔记10-轻量级_Spring框架 aijuans Spring 3
    一、问题提问：     → 请简单介绍一下什么是轻量级？     轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。  
  • mongodb 环境搭建及简单CURD antlove WebInstallcurdNoSQLmongo
    一 搭建mongodb环境 1. 在mongo官网下载mongodb 2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db" 3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
  • 数据字典和动态视图 百合不是茶 oracle数据字典动态视图系统和对象权限
    数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭   数据字典中包含   数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等) 数据库为一
  • 多线程编程一般规则 bijian1013 javathread多线程java多线程
           如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。        不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
  • 将文件或目录拷贝到另一个Linux系统的命令scp bijian1013 linuxunixscp
    一.功能说明        scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下：        scp 远程用户名@IP地址：文件的绝对路径
  • 【持久化框架MyBatis3五】MyBatis3一对多关联查询 bit1129 Mybatis3
    以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。   示例数据：   地址表：   CREATE TABLE ADDRESSES ( ADDR_ID INT(11) NOT NULL AUTO_INCREMENT, STREET VAR
  • cookie状态判断引发的查找问题 bitcarter formcgi
    先说一下我们的业务背景： 1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩 2.form中action是一个cgi服务 3.后台cgi服务同时供PC，H5，APP 4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题） 问题：（折腾两天。。。。） 1.PC端cgi服务正常调用，cookie判断没
  • 通过Nginx,Tomcat访问日志(access log)记录请求耗时 ronin47
    一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间 nginx.conf使用配置方式： log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
  • java-67- n个骰子的点数。 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 bylijinnan java
    public class ProbabilityOfDice { /** * Q67 n个骰子的点数 * 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。 * 在以下求解过程中，我们把骰子看作是有序的。 * 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况 */ private stati
  • 看别人的博客，觉得心情很好 Cb123456 博客心情
       以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客:    职业规划:    http://www.iteye.com/blogs/subjects/zhiyeguihua      android学习:    1.http://byandby.i
  • [JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析 comsci 工作流
        我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误      在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到
  • JS常用的事件及方法 cwqcwqmax9 js
    事件 描述 onactivate 当对象设置为活动元素时触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecut 当选中区从文档中删除之前在源对象触发。 onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
  • 正则表达式验证日期格式 dashuaifu 正则表达式IT其它java其它
    正则表达式验证日期格式 function isDate(d){ var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i); if(!v) { this.focus(); return false; } } <input value="2000-8-8" onblu
  • Yii CModel.rules() 方法 、validate预定义完整列表、以及说说验证 dcj3sjt126com yii
    public array rules () {return} array 要调用 validate() 时应用的有效性规则。 返回属性的有效性规则。声明验证规则，应重写此方法。 每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
  • UITextAttributeTextColor = deprecated in iOS 7.0 dcj3sjt126com ios
    In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0." Ins
  • 判断一个数是质数的几种方法 EmmaZhao Mathpython
    质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。 判断一个数是质数的最简单的方法如下： def isPrime1(n): for i in range(2, n): if n % i == 0: return False return True 但是在上面的方法中有一些冗余的计算，所以
  • SpringSecurity工作原理小解读 坏我一锅粥 SpringSecurity
      SecurityContextPersistenceFilter   ConcurrentSessionFilter   WebAsyncManagerIntegrationFilter   HeaderWriterFilter   CsrfFilter   LogoutFilter   Use
  • JS实现自适应宽度的Tag切换 ini JavaScripthtmlWebcsshtml5
    效果体验：http://hovertree.com/texiao/js/3.htm   该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。 HTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"
  • Hbase Rest API : 数据查询 kane_xie RESThbase
    hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。   启动命令：./bin/hbase rest s
  • JQuery实现鼠标拖动元素移动位置（源码+注释） 明子健 jqueryjs源码拖动鼠标
    欢迎讨论指正！   print.html代码： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <title>发票打印</title> &l
  • Postgresql 连表更新字段语法 update qifeifei PostgreSQL
    下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下： UPDATE tops_visa.visa_order SET op_audit_abort_pass_date = now() FROM tops_visa.visa_order as t1 INNER JOIN tops_visa.visa_visitor as t2 ON t1.
  • 将redis,memcache结合使用的方案? tcrct rediscache
    公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi
  • 开发中遇到的诡异的bug wudixiaotie bug
    今天我们服务器组遇到个问题： 我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他