qq_31179919
qq_31179919

全屏切换效果

基于慕课网教程学习笔记

全屏的要素

竖屏

全屏的元素和其父元素height都要设置成100%

将html body的height设置成100%

height：100% 意为高度随父元素高度的变化而变化

html,body{
height: 100%;
overflow: hidden;//去掉滚动条
  }

横屏

1.浮动

2.若有4个子DIV 每个div宽度25%

3.父类宽度400%

代码演示

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面切换</title>
	<style type="text/css">
		h1,body,html{
			padding: 0;
			margin: 0;
		}
		body{
			font-family: Arial,"Microsoft YaHei","Hiragino Sans GB",sans-serif;
		}
		html,body{
			height: 100%;
			overflow: hidden;
		}
		h1{
			font-size: 6em;
			font-weight: normal;
		}
		p{
			font-size: 2em;
			margin:0.5em 0 2em 0;
		}
		#container,.section{
			height: 100%;
			position: relative;
		}
		#section0,
		#section1,
		#section2,
		#section3{
			background-color: #000;
			background-size: cover;
			background-position: 50% 50%;
		}
		#section0{
			background-image: url(images/1.jpg);
			color: #fff;
			text-shadow:1px 1px 1px #333;
		}
		#section1{
			color: #fff;
			text-shadow:1px 1px 1px #333;
			background-image: url(images/2.jpg);
		}
		#section2{
			background-image: url(images/3.jpg);
			color: #fff;
			text-shadow:1px 1px 1px #666;
		}
		#section3{
			color: #008283;
			background-image: url(images/4.jpg);
			text-shadow:1px 1px 1px #fff;
		}
		#section0 p{
			color: #F1FF00;
		}
		#section3 p{
			color: #00A3AF;
		}
		.left{
			float: left;
		}
		.intro{
			position: absolute;
			top: 50%;
			width: 100%;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
			text-align: center;
		}
		#pages{
			position:fixed;
			right: 10px;
			top: 50%;
			list-style: none;
		}
		#pages li{
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: #fff;
			margin: 0 0 10px 5px;
		}
		#pages li.active{
			width: 14px;
			height: 14px;
			border: 2px solid #FFFE00;
			background: none;
			margin-left: 0;
		}
		#section0 .title{
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
			-webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
			animation: sectitle0 1s ease-in-out 100ms forwards;
		}
		#section0 p{
			-webkit-transform: translateX(100%);
			transform: translateX(100%);
			-webkit-animation: sec0 1s ease-in-out 100ms forwards;
			animation: sec0 1s ease-in-out 100ms forwards;
		}
		@-webkit-keyframes sectitle0{
			0%{
				-webkit-transform: translateX(-100%);
				transform: translateX(-100%);
			}
			100%{
				-webkit-transform: translateX(0);
				transform: translateX(0);
			}
		}
		@keyframes sectitle0{
			0%{
				-webkit-transform: translateX(-100%);
				transform: translateX(-100%);
			}
			100%{
				-webkit-transform: translateX(0);
				transform: translateX(0);
			}
		}
		@-webkit-keyframes sec0{
			0%{
				-webkit-transform: translateX(100%);
				transform: translateX(100%);
			}
			100%{
				-webkit-transform: translateX(0);
				transform: translateX(0);
			}
		}
		@keyframes sec0{
			0%{
				-webkit-transform: translateX(100%);
				transform: translateX(100%);
			}
			100%{
				-webkit-transform: translateX(0);
				transform: translateX(0);
			}
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="section active" id="section0">
			<div class="intro">
				<h1 class="title">switchPage</h1>
				<p>Create Beautiful Fullscreen Scrolling Websites</p>
			</div>
		</div>
		<div class="section" id="section1">
			<div class="intro">
				<h1 class="title">Example</h1>
				<p>HTML markup example to define 4 sections</p>
				<img src="images/example.png"/>
			</div>
			
		</div>
		<div class="section" id="section2">
			<div class="intro">
				<h1 class="title">Example</h1>
				<p>The plug-in configuration parameters</p>
				<img src="images/example2.png"/>
			</div>
		</div>
		<div class="section" id="section3">
			<div class="intro">
				<h1 class="title">THE END</h1>
				<p>Everything will be okay in the end. If it's not okay, it's not the end.</p>
			</div>
		</div>
	</div>

使用范例
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="pageswitch.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#container").switchPage({
				'loop' : true,
				'keyboard' : true,
				'direction' : 'horizontal'
			});
		});
	</script>

插件对外提供的属性

                'container' : '#container',//容器
		'sections' : '.section',//子容器
		'easing' : 'ease',//特效方式，ease-in,ease-out,linear
		'duration' : 1000,//每次动画执行的时间
		'pagination' : true,//是否显示分页
		'loop' : false,//是否循环
		'keyboard' : true,//是否支持键盘
		'direction' : 'vertical',//滑动的方向 horizontal,vertical,
		'onpageSwitch' : function(pagenum){}
onpageSwitch 为页面回掉函数



你可能感兴趣的:(js,jquery,全屏切换效果)

  • Vue2 视频推荐页面：完整布局与动态数据实现 用 Vue2 开发视频推荐页面：简洁优雅的实现方式 Vue2 项目实战：多分类动态内容展示的实现 用 Vue2 打造视频推荐系统：从零开始完整教程 Vu 南北极之间 web前端特效源码cssjavascript网页设计html前端网站首页视频网站
    效果图【定制化开发服务，让您的项目领先一步】如有需求，直接私信留下您的联系方式。谢谢。我的邮箱：[email protected]完整代码以下包括导航栏、分类切换、推荐内容展示等。使用虚拟假数据模拟真实场景，图片用占位符代替。代码实现<html
  • 破局并发困境：Python 协程 async/await 深度解析与实战指南 清水白石008 pythonPython题库python开发语言
    破局并发困境：Python协程async/await深度解析与实战指南一、写在前面：为什么我们仍在为并发编程头疼？在构建高性能的网络服务、实时数据处理系统、自动化调度工具时，你可能遇到过这些困境：多线程写起来麻烦，线程之间切换的开销不容忽视；多进程占用大量内存，IPC（进程间通信）复杂又笨重；I/O密集型任务跑得慢，CPU明明闲着却像在等月亮升起。正因为如此，Python在3.5之后正式引入了as
  • 深入理解Python协程：async def、async for、await、yield详解
    前言在现代编程中，异步编程已成为提高程序效率和性能的重要方式。Python作为一种流行的编程语言，自然也提供了强大的异步编程支持。本文将详细介绍Python中的协程，以及asyncdef、asyncfor、await和yield等关键字的使用。协程简介协程是一种比传统函数更高级的控制结构。它们在一个过程中暂停，然后在另一个地方恢复执行。协程可以在程序的多个点之间切换，从而实现并发执行，而无需多线程
  • 创建Django项目 小叶萝 Openlayers开发djangosqlite数据库
    我这里利用conda+Pycharm创建Django项目1、打开condaPrompt激活python的conda环境（创建了多个环境可以考虑切换一下python环境）condaactivatebase2、安装DjangocondainstallDjango查看安装成功了没有？django-admin--help出现常用的命令：checkcompilemessagescreatecachetabl
  • python+django/flask+springboot的招聘求职系统 QQ1963288475 pythondjangoflaskspringbootnode.jsphp
    目录技术栈介绍具体实现截图系统设计研究方法：设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示技术栈介绍Django-SpringBoot-php-Node.js-flask本课题的研究方法和研究步骤基本合理，难度适中，本选题是学生所学专业知识的延续，符合学生专业发展方向，对于提高学生的基本知识和技能以及钻研能力有益。该学生能够在预定时间内完成该课题的设计。
  • .NET Core配置系统详解：JSON、环境变量与多源配置
    目录一、配置系统架构全景1.1配置系统核心组件1.2配置源加载顺序对比二、JSON配置深度解析2.1多环境JSON配置实战2.2JSON配置结构最佳实践三、环境变量配置策略3.1环境变量命名规范3.2环境变量与JSON对比四、多配置源融合技术4.1配置提供程序组合示例4.2自定义配置提供程序五、配置数据消费模式5.1配置绑定技术对比5.2选项模式最佳实践六、高级配置场景6.1动态配置更新6.2多租
  • VUE——Ajax【请求方式】 时间sk VUE疑难杂症vue.jsajax前端
    一、XMLHttpRequest示例1.GET请求（获取数据）//创建对象constxhr=newXMLHttpRequest();//配置请求（异步GET）xhr.open('GET','https://api.example.com/users/123',true);//设置响应类型为JSON（可选）xhr.responseType='json';//监听请求状态变化xhr.onreadyst
  • JS 读取JSON数据 凌冰_ JS
    JSON数据：varinfos={"name":"Aimee","age":18,"boyfriend":true,"dog":{"name":"旺财","sex":"男","color":"yellow"},"cars":[{"name":"宝马","type":"X11系列"},{"name":"爱玛","type":"C11系列"},{"name":"婴儿","type":"B15系列"}]
  • JS 模仿京东秒杀倒计时
    使用定时器页面：.box{height:300px;width:200px;background-color:red;}.box2{padding-top:10px;}h2{color:white;text-align:center;}img{margin-left:70px;}p{color:white;text-align:center;}li{font-family:"微软雅黑";font-
  • JS 使用节点实现简单购物车数量和金额 凌冰_ JS
    一、购物车中商品数量二、计算金额HTML页面:购物车序号商品名称数量单价小计1羊肉串5.005.002草莓奶茶9.009.003饼干20.1020.104葡萄8.058.05共计消费:￥42.15元JS脚本//add+varadds=document.getElementsByClassName("add");//循环for(vari=0;itoFixed(2)this.parentNode.ne
  • 在Ubuntu 24.04主机上创建Ubuntu 14.04编译环境的完整指南 精英的英 ubuntulinux运维
    在Ubuntu24.04主机上创建Ubuntu14.04编译环境的完整指南1.背景与挑战1.1问题描述在Ubuntu24.04主机上开发需要Ubuntu14.04环境编译的项目时，面临以下挑战：Ubuntu14.04已结束生命周期（EOL），官方软件源不再维护不同Ubuntu版本间的库依赖和工具链存在兼容性问题直接安装旧版库可能导致系统冲突频繁切换系统环境效率低下1.2核心需求创建隔离的Ubunt
  • Ajax 入门 凌冰_ JSajax前端javascript
    一、Ajax概念Ajax（AsynchronousJavaScriptandXML）是一种在不刷新整个页面的情况下，与服务器进行异步通信并更新部分网页的技术。尽管名称中包含“XML”，但现代Ajax更多使用JSON作为数据格式。二、核心概念异步通信：无需刷新整个页面，可在后台与服务器交换数据。核心技术：XMLHttpRequest（XHR）：原生JavaScriptAPI（旧版）FetchAPI：
  • webpack未转译第三方依赖axios为es5导致低端机型功能异常
    背景：兼容性测试流程中，遇到华为p9手机上的页面按钮点击无反应的问题。开发者工具查看后发现报错如下：根据报错信息检查了一下页面引用的vendors包，发现有...语法，来自于第三方依赖axios。原因：axios包有es6语法，而我的项目的webpack.config.js配置的babel-loader排除了所有的node_modules的编译。如下：{test:/\.js$/,exclude:/
  • 构建个人博客系统：基于Vue和Element UI的静态网页实现 布兰妮甜 javascriptvue.jsui个人博客系统前端
    Hi，我是布兰妮甜！在当今数字化时代，拥有个人博客系统已成为展示技术能力、分享知识和建立个人品牌的重要方式。本文将详细介绍如何使用Vue.js框架配合ElementUI组件库构建一个功能完善的静态个人博客系统。文章目录一、项目概述1.1技术选型理由1.2系统功能规划二、环境搭建2.1初始化Vue项目2.2安装ElementUI2.3配置ElementUI2.4安装其他必要依赖三、项目结构设计四、核
  • 需要scl来指定编译器的clangd+cmake在vscode/cursor开发环境下的配置 yanjiee LinuxCursorvscodeide编辑器
    最近cursor更新了插件商店，只能使用默认它魔改的c/c++插件（基于clangd的），手头刚好在折腾一个cmake工程，试试水尝试直接配置在cursor上可以编译运行。主要是本地环境使用scl来管理gcc/g++，所以在配置过程中需要特殊的处理，settings.json如下：{"cmake.cmakePath":"/usr/bin/cmake3","cmake.buildDirectory"
  • js加减乘除出现很多小数 木头没有瓜 javascript开发语言ecmascript
    计算购物车支付价格价格if(that.cartList.length){that.cartList.forEach(v=>{v.sku.price=(v.sku.price/100).toFixed(2);v.sku.price=v.sku.price.toLocaleString();}lettotalPrice=0;list.forEach(item=>{totalPrice+=item.sk
  • 使用Puppeteer抓取动态网页的完整指南
    当遇到React/Vue等现代前端框架构建的SPA（单页应用）时，传统爬虫无法获取JavaScript动态渲染的内容。本文将教你使用Puppeteer破解这个难题，实现真正的动态网页抓取。我们开始准备环境1.安装Node.js版本至少要在14以上才行哦2.初始化开发项目的命令在这里mkdirpuppeteer-crawler&&cdpuppeteer-crawlernpminit-y3.在项目里边
  • 项目中使用Redis 配置步骤 Savannah_Wen redis
    一、maven项目pom.xml文件中除了Springboot相关依赖还要加入com.alibabafastjson1.2.42org.springframework.bootspring-boot-starter-data-redis二、在resource下的application.yml配置文件中加入redis服务器地址等配置信息三、创建一个base包下的config包，写RedisConfi
  • Qt编程-qml操作（js，c++，canvas） 其实我今天想吃河北正宗安徽牛肉板面 Qtqt开发语言
    QML与C++深度整合及Canvas绘图技术详解一、QML与C++交互机制深度解析1.1交互的必要性与优势核心价值对比表：技术维度QML优势C++优势交互价值界面开发声明式UI，快速布局界面能力有限QML构建UI，C++提供逻辑计算性能JavaScript性能受限高性能计算C++处理复杂算法硬件访问无法直接访问完备的硬件访问能力C++封装硬件接口代码复用适合UI组件集成现有库/系统组件复用C++业
  • 飞算JavaAI：AI赋能的Java开发助手 山峰哥 人工智能java开发语言数据库信息可视化人机交互
    『AI先锋杯·14天征文挑战第一期』AI技术如何重塑你的工作与行业？一、前言在2025年人工智能技术爆发的时代，开发者的工作方式正经历着革命性变革。智能编码工具已经从简单的代码补全进化到能够理解复杂需求、生成完整工程的能力。本文将深入分析国产Java开发助手飞算JavaAI如何通过自然语言交互彻底改变传统开发流程，并结合电商系统、金融交易引擎等实战案例，验证其在实际项目中的生产力提升效果。二、飞算
  • Python, Rust 开发机关事业单位公文写作助手APP
    #机关事业单位公文写作助手应用设计基于Python和Rust开发机关事业单位公文写作APP的方案如下：##系统架构设计```桌面端/Web应用(Tauri/Vue.js)|RESTAPI/WebSocket|Rust核心服务(Actix-web/Axum)←───PythonNLP服务(FastAPI)|公文要素提取/模板生成/智能校对PostgreSQL数据库|Redis缓存(模板缓存/会话管理
  • 记忆翻牌记忆力小游戏流量主微信小程序开源 云起SAAS 微信小程序小程序记忆翻牌记忆力小游戏流量主微信
    记忆翻牌游戏包含以下功能：游戏界面采用4x4网格布局，共16张卡片卡片使用emoji图标，每次游戏随机打乱顺序记录游戏步数和用时匹配成功的卡片会保持翻开状态游戏结束后显示成绩并可以重新开始项目结构严格遵循微信小程序规范：app.js小程序入口app.json全局配置app.wxss全局样式pages/index/下是游戏页面相关文件
  • 基于python+django+vue.js开发的停车管理系统源码+运行
    功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。技术学习共同进步功能包括：车位管理、会员管理、停车场管理、违规管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_parking演示地址http://parking.gitapp.cn演示帐号：用户名：admin123密码：a
  • 基于python+django+vue.js开发的学生成绩管理系统 西门吹雪1998 毕业设计合集pythondjangovue.js
    功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。功能包括：成绩管理、学生管理、课程管理、班级管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_score演示地址http://score.gitapp.cn演示帐号：用户名：admin123密码：admin123主要使用技术
  • 【课程设计】基于python+django+vue.js开发的健身房管理系统
    功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。给师妹的课程作业。功能包括：教练管理、会员管理、场地管理、设备管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_fitness演示地址http://fitness.gitapp.cn演示帐号：用户名：admin123密码：a
  • 基于python+django+vue.js开发的健身房管理系统源码+运行
    功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。技术学习共同进步功能包括：教练管理、会员管理、场地管理、设备管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_fitness演示地址http://fitness.gitapp.cn演示帐号：用户名：admin123密码：ad
  • 前端3D技术-3. Three.js 入门 程序员勇哥 前端全套教程前端3djavascripttypescriptreact.js开发语言
    前端3D技术-3.Three.js入门在前端3D开发领域，WebGL虽能实现高性能3D渲染，但直接使用其API开发门槛较高。而Three.js作为基于WebGL封装的JavaScript库，极大降低了3D开发难度，成为众多开发者的首选。下面就让我们走进Three.js的世界，开启3D开发的入门之旅。Three.js简介与安装Three.js的优势和特点Three.js最大的优势在于它对WebGL复
  • Vue如何处理数据、v-HTML的使用及总结 网络点点滴 Vue3vue.jshtml前端
    Vue如何处理数据、v-HTML的使用及总结Vue是如何处理数据的这里我们先看一段代码constapp=Vue.createApp({data(){return{courseGoalA:'学习Vue,最终掌握Vue',courseGoalB:'掌握Vue,并构建相应的应用程序',vueLink:'https://cn.vuejs.org/'};},methods:{outputGoal(){con
  • input 获取焦点时全选 肖肖肖丽珠 vue.js前端javascript
    这样的一个状态。这样编辑的时候就直接覆盖掉原来的。在main.js里面自定义指令//input框获取焦点时全选。注意input类型是textarea时Vue.directive("select-on-focus",{inserted(el){constinput=el.querySelector('input')||el.querySelector('textarea');if(input){in
  • ThreeJS入门（153）：THREE.Texture 知识详解，示例代码 还是大剑师兰特 #ThreeJS综合教程500+大剑师threejs示例threejs教程
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第153篇入门文章文章目录构造函数属性方法使用示例注意事项总结THREE.Te
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他