天梯梦
天梯梦

视差滚动(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的内容宽度，避免布
  • Algorithm 香水浓 javaAlgorithm
    冒泡排序 public static void sort(Integer[] param) { for (int i = param.length - 1; i > 0; i--) { for (int j = 0; j < i; j++) { int current = param[j]; int next = param[j + 1];
  • mongoDB 复杂查询表达式 开窍的石头 mongodb
    1:count    Pg: db.user.find().count();    统计多少条数据 2:不等于$ne    Pg: db.user.find({_id:{$ne:3}},{name:1,sex:1,_id:0});    查询id不等于3的数据。 3：大于$gt $gte(大于等于) &n
  • Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space 0624chenhong jvmjboss
    转自 http://blog.csdn.net/zou274/article/details/5552630 解决办法： window->preferences->java->installed jres->edit jre 把default vm arguments 的参数设为-Xms64m -Xmx512m ----------------
  • 文件上传 下载 解析 相对路径 不懂事的小屁孩 文件上传
    有点坑吧，弄这么一个简单的东西弄了一天多，身边还有大神指导着，网上各种百度着。 下面总结一下遇到的问题： 文件上传，在页面上传的时候，不要想着去操作绝对路径，浏览器会对客户端的信息进行保护，避免用户信息收到攻击。 在上传图片，或者文件时，使用form表单来操作。 前台通过form表单传输一个流到后台，而不是ajax传递参数到后台，代码如下: <form action=&
  • 怎么实现qq空间批量点赞 换个号韩国红果果 qq
    纯粹为了好玩！！ 逻辑很简单 1 打开浏览器console；输入以下代码。 先上添加赞的代码 var tools={}; //添加所有赞 function init(){ document.body.scrollTop=10000; setTimeout(function(){document.body.scrollTop=0;},2000);//加
  • 判断是否为中文 灵静志远 中文
    方法一： public class Zhidao { public static void main(String args[]) { String s = "sdf灭礌 kjl d{';\fdsjlk是"; int n=0; for(int i=0; i<s.length(); i++) { n = (int)s.charAt(i); if((
  • 一个电话面试后总结 a-john 面试
    今天，接了一个电话面试，对于还是初学者的我来说，紧张了半天。 面试的问题分了层次，对于一类问题，由简到难。自己觉得回答不好的地方作了一下总结：   在谈到集合类的时候，举几个常用的集合类，想都没想，直接说了list,map。   然后对list和map分别举几个类型：   list方面：ArrayList,LinkedList。在谈到他们的区别时，愣住了
  • MSSQL中Escape转义的使用 aijuans MSSQL
    IF OBJECT_ID('tempdb..#ABC') is not null drop table tempdb..#ABC create table #ABC ( PATHNAME NVARCHAR(50) ) insert into #ABC SELECT N'/ABCDEFGHI' UNION ALL SELECT N'/ABCDGAFGASASSDFA' UNION ALL
  • 一个简单的存储过程 asialee mysql存储过程构造数据批量插入
               今天要批量的生成一批测试数据，其中中间有部分数据是变化的，本来想写个程序来生成的，后来想到存储过程就可以搞定，所以随手写了一个，记录在此：            DELIMITER $$ DROP PROCEDURE IF EXISTS inse
  • annot convert from HomeFragment_1 to Fragment 百合不是茶 android导包错误
    创建了几个类继承Fragment, 需要将创建的类存储在ArrayList<Fragment>中; 出现不能将new 出来的对象放到队列中,原因很简单;     创建类时引入包是:import android.app.Fragment;      创建队列和对象时使用的包是:import android.support.v4.ap
  • Weblogic10两种修改端口的方法 bijian1013 weblogic端口号配置管理config.xml
    一.进入控制台进行修改    1.进入控制台:  http://127.0.0.1:7001/console     2.展开左边树菜单         域结构->环境->服务器-->点击AdminServer(管理) &
  • mysql 操作指令 征客丶 mysql
    一、连接mysql 进入 mysql 的安装目录； $ bin/mysql -p [host IP 如果是登录本地的mysql 可以不写 -p 直接 -u] -u [userName] -p 输入密码，回车，接连； 二、权限操作［如果你很了解mysql数据库后，你可以直接去修改系统表，然后用 mysql> flush privileges; 指令让权限生效］ 1、赋权 mys
  • 【Hive一】Hive入门 bit1129 hive
    Hive安装与配置 Hive的运行需要依赖于Hadoop，因此需要首先安装Hadoop2.5.2，并且Hive的启动前需要首先启动Hadoop。   Hive安装和配置的步骤   1. 从如下地址下载Hive0.14.0   http://mirror.bit.edu.cn/apache/hive/    2.解压hive，在系统变
  • ajax 三种提交请求的方法 BlueSkator Ajaxjqery
    1、ajax 提交请求 $.ajax({ type:"post", url : "${ctx}/front/Hotel/getAllHotelByAjax.do", dataType : "json", success : function(result) { try { for(v
  • mongodb开发环境下的搭建入门 braveCS 运维
      linux下安装mongodb 1）官网下载mongodb-linux-x86_64-rhel62-3.0.4.gz 2）linux 解压  gzip -d mongodb-linux-x86_64-rhel62-3.0.4.gz; mv mongodb-linux-x86_64-rhel62-3.0.4 mongodb-linux-x86_64-rhel62-
  • 编程之美-最短摘要的生成 bylijinnan java数据结构算法编程之美
    import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; public class ShortestAbstract { /** * 编程之美 最短摘要的生成 * 扫描过程始终保持一个[pBegin,pEnd]的range,初始化确保[pBegin,pEnd]的ran
  • json数据解析及typeof chengxuyuancsdn jstypeofjson解析
    // json格式 var people='{"authors": [{"firstName": "AAA","lastName": "BBB"},' +' {"firstName": "CCC&
  • 流程系统设计的层次和目标 comsci 设计模式数据结构sql框架脚本
                                  流程系统设计的层次和目标  
  • RMAN List和report 命令 daizj oraclelistreportrman
    LIST 命令 使用RMAN LIST 命令显示有关资料档案库中记录的备份集、代理副本和映像副本的 信息。使用此命令可列出： • RMAN 资料档案库中状态不是AVAILABLE 的备份和副本 • 可用的且可以用于还原操作的数据文件备份和副本 • 备份集和副本，其中包含指定数据文件列表或指定表空间的备份 • 包含指定名称或范围的所有归档日志备份的备份集和副本 • 由标记、完成时间、可
  • 二叉树:红黑树 dieslrae 二叉树
        红黑树是一种自平衡的二叉树,它的查找,插入,删除操作时间复杂度皆为O(logN),不会出现普通二叉搜索树在最差情况时时间复杂度会变为O(N)的问题.     红黑树必须遵循红黑规则,规则如下     1、每个节点不是红就是黑。     2、根总是黑的  &
  • C语言homework3，7个小题目的代码 dcj3sjt126com c
    1、打印100以内的所有奇数。 # include <stdio.h> int main(void) { int i; for (i=1; i<=100; i++) { if (i%2 != 0) printf("%d ", i); } return 0; }  2、从键盘上输入10个整数，
  • 自定义按钮, 图片在上, 文字在下, 居中显示 dcj3sjt126com 自定义
    #import <UIKit/UIKit.h> @interface MyButton : UIButton -(void)setFrame:(CGRect)frame ImageName:(NSString*)imageName Target:(id)target Action:(SEL)action Title:(NSString*)title Font:(CGFloa
  • MySQL查询语句练习题，测试足够用了 flyvszhb sqlmysql
    http://blog.sina.com.cn/s/blog_767d65530101861c.html 1.创建student和score表 CREATE  TABLE  student ( id  INT(10)  NOT NULL  UNIQUE  PRIMARY KEY  , name  VARCHAR
  • 转：MyBatis Generator 详解 happyqing mybatis
      MyBatis Generator 详解 http://blog.csdn.net/isea533/article/details/42102297   MyBatis Generator详解 http://git.oschina.net/free/Mybatis_Utils/blob/master/MybatisGeneator/MybatisGeneator.
  • 让程序员少走弯路的14个忠告 jingjing0907 工作计划学习
      无论是谁，在刚进入某个领域之时，有再大的雄心壮志也敌不过眼前的迷茫：不知道应该怎么做，不知道应该做什么。下面是一名软件开发人员所学到的经验，希望能对大家有所帮助   1.不要害怕在工作中学习。 只要有电脑，就可以通过电子阅读器阅读报纸和大多数书籍。如果你只是做好自己的本职工作以及分配的任务，那是学不到很多东西的。如果你盲目地要求更多的工作，也是不可能提升自己的。放
  • nginx和NetScaler区别 流浪鱼 nginx
    NetScaler是一个完整的包含操作系统和应用交付功能的产品，Nginx并不包含操作系统，在处理连接方面，需要依赖于操作系统，所以在并发连接数方面和防DoS攻击方面，Nginx不具备优势。 2.易用性方面差别也比较大。Nginx对管理员的水平要求比较高，参数比较多，不确定性给运营带来隐患。在NetScaler常见的配置如健康检查，HA等，在Nginx上的配置的实现相对复杂。 3.策略灵活度方
  • 第11章 动画效果（下） onestopweb 动画
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • FAQ - SAP BW BO roadmap blueoxygen BOBW
    http://www.sdn.sap.com/irj/boc/business-objects-for-sap-faq   Besides, I care that how to integrate tightly.   By the way, for BW consultants, please just focus on Query Designer which i
  • 关于java堆内存溢出的几种情况 tomcat_oracle javajvmjdkthread
    【情况一】： 　　 java.lang.OutOfMemoryError: Java heap space：这种是java堆内存不够，一个原因是真不够，另一个原因是程序中有死循环； 　　如果是java堆内存不够的话，可以通过调整JVM下面的配置来解决： 　　<jvm-arg>-Xms3062m</jvm-arg> 　　<jvm-arg>-Xmx
  • Manifest.permission_group权限组 阿尔萨斯 Permission
    结构 继承关系 public static final class Manifest.permission_group extends Object java.lang.Object android. Manifest.permission_group 常量 ACCOUNTS 直接通过统计管理器访问管理的统计 COST_MONEY可以用来让用户花钱但不需要通过与他们直接牵涉的权限 D
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他