天梯梦
天梯梦

视差滚动(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)

  • uniapp使用内置地图选择插件，实现地址选择并在地图上标点 神夜大侠 Uniappvue.jsuniapp
    uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
  • LVGL 控件之列表（lv_list） Projectsauron #LVGlLVGL嵌入式
    目录一、概述二、列表1、添加列表按钮2、设置列表文本3、API函数一、概述List（列表）基本上是一个垂直布局的矩形，按钮指向该矩形并且可以添加文本。列表部件由两个部分组成：LV_PART_MAIN使用所有典型背景属性的列表的主要部分LV_PART_SCROLLBAR滚动条。二、列表1、添加列表按钮在默认的情况下，列表部件被创建出来后，只有一个矩形背景框，并没有任何的文本和按钮，用户需要自行往列表
  • Unity3D多线程UI之ScrollYExtand 胡强_79a4
    先附上git地址https://github.com/huqiang0204/huqiang.UnitySubThreadUI示例代码请看ScrollExTestPage可以绑定三种模型，头部，尾部，和中间数据部分这里只用到了中间数据模型和头部模型Listdatas=newList();ScrollYExtand.DataTemplatetmp=newScrollYExtand.DataTempl
  • 全新品牌升级的 Pencils Protocol 产品篇：层次化 Staking Blockchain_yumi 区块链
    PencilsProtocol是一个Scroll生态中的一个综合应用平台，在全新的品牌升级后(原为Penpad)，其在原有的LaunchPad的基础上，进一步向收益聚合器、RWA等板块进行全新的拓展。目前，PencilsProtocol生态的整体功能板块包括LaunchPad、Staking、Vault以及Shop功能，能够为Scroll生态用户提供全面的交易服务，并且这些板块与板块间，以及与其他
  • Qt QTableWidget 触摸屏上滑动效果 hss2799 Qt
    要实现QTableWidget在触摸屏上，滑动记录，记录会跟着滑动，只需要加QScroller*pScroller=QScroller::scroller(tablewidget);pScroller->grabGesture(tablewidget,QScroller::LeftMouseButtonGesture);tablewidget->setVerticalScrollMode(QLis
  • vue vueUse利用useInfiniteScroll API 实现虚拟滚动 小白小白从不日白 Vue3vue.js前端
    前言中文网地址：开始使用|VueUse中文网官网地址：VueUse元素的无限滚动。useInfiniteScroll详细解析地址效果组件封装
  • 封装better-scroll 你喜欢吃青椒吗_c744
    安装npminstallbetter-scroll--save-dev创建一个scroll.vue组件importBScrollfrom'better-scroll';//引入better-scroll//详细参数可以了解better-scroll的文档exportdefault{props:{probeType:{//probeType为3的时候，不仅在屏幕滑动的过程中，而且在momentum滚
  • css3溢出隐藏的方法 DDOS防御 网络技术css3前端css
    CSS3提供了几种方法来处理元素内容的溢出问题，以下是一些常见的方法：1.**使用`overflow`属性**：-`overflow:hidden;`：隐藏溢出的内容。-`overflow:scroll;`：如果内容溢出，将显示滚动条。-`overflow:auto;`：如果内容溢出，将显示滚动条，但滚动条只在需要时显示。2.**使用`text-overflow`和`white-space`属性*
  • html ios 滚动条隐藏,CSS溢出滚动和隐藏滚动条（iOS） 社长从来不假装 htmlios滚动条隐藏
    6个答案:答案0:(得分：5)我只是玩了这个codepen(https://codepen.io/devstreak/pen/dMYgeO)，看来如果你为下面的所有三个属性设置background-color到transparent，滚动(在这个例子中)同时删除box-shadows)，根本看不到滚动条：#style-1::-webkit-scrollbar-track{//-webkit-box
  • css滚动条隐藏但是可以滚动 每一天，每一步 HTML/CSScss前端javascript
    要实现滚动条隐藏但仍然可以滚动的效果，可以使用CSS来隐藏滚动条，同时允许鼠标的滚轮或触摸板滚动。/*隐藏滚动条，但仍可滚动*/.scrollable{overflow:auto;/*保持内容可滚动*/scrollbar-width:none;/*对于现代浏览器，隐藏滚动条*/}/*针对IE和Edge的隐藏滚动条样式*/.scrollable::-webkit-scrollbar{display:
  • CSS 元素超出部分滚动, 并隐藏滚动条（2种方法） 就像风1样 cssCSS样式专栏css溢出滚动隐藏滚动条
    方法一,利用css3的新特性-webkit-scrollbar,但是这种方式不兼容火狐和IE超出部分隐藏滚动条#box{width:500px;height:300px;overflow-x:hidden;overflow-y:scroll;line-height:30px;text-align:center;}#box::-webkit-scrollbar{display:none;}你好你好你
  • 微信小程序仿微信聊天界面 微特尔普拉斯 微信小程序微信notepad++
    界面结构:消息列表:使用scroll-view实现滚动，每条消息使用view组件包裹，根据消息类型(文本、图片、文件)显示不同内容。输入框区域:包含输入框(textarea)、发送按钮(button)和上传文件按钮(view组件模拟)。头像:使用image组件展示。功能实现:多行输入框高度自适应:使用textarea组件的auto-height属性，并监听linechange事件动态调整高度。消息
  • WPF中图片的宫格显示 Vae_Mars WPF-AI对话wpf
    1.解释说明-使用ScrollViewer控件来达到滑动的效果-使用WrapPanel的自动换行特性，保证图片在占满横向空间后自动往下排布-使用foreach的方法来游历所有的图片url2.xaml代码示例3.cs代码示例//加载url转换成BitmapImageprivateasyncTaskLoadImageFromUrl(stringurl){try{using(HttpClientclie
  • react native ScrollView实现滑动锚定，滑动到指定位置 君君yui 前端reactnativereact.jsjavascript
    实现ScrollView滑动视图组件滑动到指定位置，实现tab与具体位置相锚定给需要锚定的组件加上onLayout属性//event.nativeEvent.layout.x是水平方向值，event.nativeEvent.layout.y是数值方向值//this.layoutList用于存储组件位置onLayout={(event)=>{this.layoutList.push(event.na
  • 基于react native的锚点 miao_zz Reactreact-nativereactnativeandroidreact.js
    基于reactnative的锚点效果示例图示例代码效果示例图示例代码/*eslint-disablereact-native/no-inline-styles*/importReact,{useEffect,useRef,useState}from'react';import{Image,ImageBackground,ScrollView,StyleSheet,Text,TouchableOpa
  • Flutter学习之九 ListView MQ_Twist
    极端很容易，平衡才是最难的。Flutter学习之八Container前言Flutter中的ListView的地位，就好比于iOS中的UITableView，算是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持列表项懒加载（在需要时才会创建）。默认构造函数我们看看ListView的默认构造函数定义：ListView({...//可滚动widget公共参数AxisscrollD
  • iOS使用UIScrollView实现左右滑动UITableView和UICollectionView 泥孩儿0107 ios开发
    iOS使用UIScrollView实现左右滑动UITableView和UICollectionView标签：iOS左右滑动UIScrollViewUICollectionView在UIScrollView中嵌套UITableView的文章很多，但是项目需要，需要嵌套UICollectionView，而UICollectionView和UITableView有很多不同，有些知识到现在也没搞清楚，一遍
  • Qscrollarea去除边框的办法 莫毅忆 qt
    1.代码去除QScrollArea是派生于QFrame，如果设置QFrame的FrameShape值为NoFrame那么就可以实现边框去除ui->scrollArea->setFrameShape(QFrame::NoFrame);2.样式去除QScrollArea{color:#c3f8ff;font-family:"等线";font-size:15px;background-color:tra
  • 04.css入门笔记-浮动以及清除浮动的方法 Mr_LiuP css基础css前端
    文章目录前言一、pc端传统布局方式有哪些？二、浮动1.浮动的定义2.浮动的特性（重难点）3.为什么要清除浮动3.清除浮动的本质4.清除浮动的方式1.额外标签法（隔墙法），是W3C推荐的做法2.父元素添加overflow属性，属性值有auto\hidden\scroll3.父元素添加:after伪元素4.父元素添加双伪元素总结前言今天分享的是css的浮动，以及清除浮动的四种方法！在分享之前，也会简单
  • 微信小程序入门【三】：实现简单登录退出和个人信息页面 山岫 微信小程序微信小程序小程序
    效果图预览这个框很是惆怅，但是真机调试没出现过，这个bug下次再解决吧。这次说说登录。效果图：附上代码：home.wxml-->-->-->-->Hi游客{{userInfo.nickName}}-->退出登录@技术支持：江阔jk921home.wxss/*pages/scroll/scroll.wxss*/.top{width:100%;height:400rpx;background-colo
  • 求教大佬们react native 如何实现fiexd固定列 小时候丶_2e0a
    上图是我用reactnative封装的一个table，但是固定列没有同步滚动fiexd的固定列，我的思路是将表格分为左右两个flatlist，分别放fiexd和非fiexd列，然后滚动右边的flatlist监听onScroll事件，并设置scrollEventThrottle频率次数，然后在onScroll的自定义方法里去同步更改左边的flatlist偏移。结果，数据量很少的时候还看不出什么，数据
  • el-tree添加滚动条只需一步 momo_via 小Tipsvue.jsjavascript前端
    只需要在el-tree组件外添加el-scrollbar组件，自行设置高度即可
  • element-ui table 点击分页table滚到顶部 烂笔头儿@ vue.js前端
    在开发项目过程中遇到这样一个问题使用table表格的时候，切换分页之后不会回到顶部，还是停留在之前滚动的位置话不多说以下是解决方法：设置table的ref=‘multipleTable’//切换分页的方法加上下面这句，table就能自动滚到顶部this.$refs.multipleTable.bodyWrapper.scrollTop=0;希望能够帮到你看到这如果帮到你了留个小心心吧关注不迷路~
  • 鸿蒙OS之UI架构解析 爱桥代码的程序媛 鸿蒙harmonyosui架构鸿蒙开发鸿蒙系统ArkUI移动开发
    初步布局Index当我们新建一个工程之后，首先会进入Index页。我们先简单的做一个文章列表的显示classArticle{title?:stringdesc?:stringlink?:string}@Entry@ComponentstructIndex{@Statearticles:Article[]=[]build(){Row(){Scroll(){Column(){ForEach(this.
  • vue 获取指定元素 MrLi-2018 vue
    在想要获取元素上添加“ref”ref="scroll"scroll为函数名vue获取指定元素xiaFn:function(){console.log(this.$refs.scroll)}
  • vue-seamless-scroll 点击click失效 int_Q7 vuevue.jsjavascript前端
    安装vue-seamless-scrollnpminstallvue-seamless-scroll--save引入1.main.js中全局引入importscrollfrom'vue-seamless-scroll'Vue.use(scroll)2.局部引入importvueSeamlessfrom'vue-seamless-scroll'exportdefault{components:{vu
  • vue-seamless-scroll 点击事件不生效 毛三仙 后台管理系统vue项目中常用操作大屏vue.js前端javascript
    问题：在使用此插件时发现，列表内容前几行还是能正常点击的，但是从第二次出现的列表开始就没有点击事件了原因：因为html元素是复制出来的（滚动组件是将后面的复制出来一份，进行填铺页面，方便滚动）解决：往滚动组件的父节点上添加绑定事件（js冒泡机制），通过e.target定位到具体点击位置，然后判断点击位置是否是你滚动组件的一列/行具体实现0":data="companyList":class-opt
  • vue-seamless-scroll(二)点击事件 .ლ. vue.jsjavascript前端
    继上一篇文章vue-seamless-scroll(一)使用在表格数据滚动的时候想要点击某一行获取当前行的数据，但是当数据在第二轮数据滚动的时候点击没有反应，获取不到数据，该怎么解决？首先需要在父级添加一个点击事件，然后在这一行添加相同的类名，这样点击这一行就可以获取当前行的数据了时间区域名称{{item.time}}{{item.address}}{{item.cname}}importvueS
  • el-tabs el-tabs 插槽自定义 昕er vue.jselementuijavascript
    el-tab-pane的el-tabs__nav-scroll是ElementPlus中el-tabs组件的内部结构，如果你想在el-tabs导航部分(el-tabs__nav-scroll)中添加自定义元素，可以通过以下几种方式实现：方法1:使用v-slot插槽ElementPlus组件通常支持插槽功能，可以通过自定义插槽的方式在导航部分插入元素。自定义元素Content1Content2exp
  • 滚动条出现时不占用 `div` 空间 昕er 前端
    在滚动条出现时不占用div空间，通常可以通过CSS中的scrollbar-gutter属性来控制。以下是实现方式：div{width:100%;height:300px;overflow-y:auto;scrollbar-gutter:stable;/*保证滚动条出现时不会改变布局*/}解释：scrollbar-gutter:stable;：这个属性确保滚动条出现时不会改变div的内容宽度，避免布
  • Nginx负载均衡 510888780 nginx应用服务器
    Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）       每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight       指定轮询几率，weight和访问比率成正比
  • RedHat 6.4 安装 rabbitmq bylijinnan erlangrabbitmqredhat
    在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功 机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
  • FilenameUtils工具类 eksliang FilenameUtilscommon-io
    转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • xml文件解析SAX 不懂事的小屁孩 xml
    xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
  • 通过定时任务执行mysql的定期删除和新建分区，此处是按日分区 酷的飞上天空 mysql
    使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
  • 如何搭建数据湖架构？听听专家的意见 蓝儿唯美 架构
    Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据  “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
  • spring学习——控制反转与依赖注入 a-john spring
           控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。 控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。  
  • 用spool+unixshell生成文本文件的方法 aijuans xshell
    例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
  • 1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
    OOA:Object-Oriented Analysis（面向对象分析方法） 是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。 　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
  • 浅谈java转成json编码格式技术 百合不是茶 json编码java转成json编码
    json编码;是一个轻量级的数据存储和传输的语言       在java中需要引入json相关的包,引包方式在工程的lib下就可以了   JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非   常适合于服务器与 JavaScript 之间的数据的交
  • web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 javaweb.xmlSSIspring配置
    指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
  • Installing SonarQube（Fail to download libraries from server） sunjing InstallSonar
    1.  Download and unzip the SonarQube distribution 2.  Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
  • 【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
    一、创建复本集   假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令：   mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
  • Anychart图表系列二之执行Flash和HTML5渲染 白糖_ Flash
    今天介绍Anychart的Flash和HTML5渲染功能   HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。 这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
  • Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
    昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
  • 编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析 问题： 有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头， 能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
  • lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引lunce
    import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
  • [IT与投资]坚持独立自主的研究核心技术 comsci it
           和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段.....        所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
  • flashback transaction闪回事务查询 daizj oraclesql闪回事务
       闪回事务查询有别于闪回查询的特点有以下3个： （1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。 （2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。 （3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
  • Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件 游其是你 FilenameFilter
    这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
  • C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
    # include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
  • 今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
    今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again   处理很简单，修改文件“/etc/yum.repos.d/epel.repo”， 将baseurl的注释取消， mirrorlist注释掉。即可。 &n
  • 单例模式 shuizhaosi888 单例模式
    单例模式      懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
  • Spring Security（09）——Filter 234390216 Spring Security
    Filter 目录 1.1     Filter顺序 1.2     添加Filter到FilterChain 1.3     DelegatingFilterProxy 1.4     FilterChainProxy 1.5
  • 公司项目NODEJS实践0.1 逐行分析JS源代码 mongodbnginxubuntunodejs
      一、前言         前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。         网上有很多nod
  • java.lang.Math liuhaibo_ljf javaMathlang
    System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
  • linux下时间同步 nonobaba ntp
    今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误  PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
  • ZooKeeper3.4.6的集群部署 roadrunners zookeeper集群部署
    ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。   1、准备工作 我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。   数据存储目录
  • Java高效读取大文件 tomcat_oracle java
    　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法： 　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
  • 微信支付api返回的xml转换为Map的方法 xu3508620 xmlmap微信api
    举例如下： <xml>    <return_code><![CDATA[SUCCESS]]></return_code>    <return_msg><![CDATA[OK]]></return_msg>    <appid><
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他