Self-Discipline
Self-Discipline

+【CSS3】使用纯css代码实现图片轮播效果

使用纯CSS3代码实现简单的图片轮播。

基本思路：

以5张图片为例：

1.基本布局：

将5张图片左浮动横向并排放入一个div容器（#photos）内，图片设置统一尺寸，div宽度设置5个图片的总尺寸，然后放入相框容器div（#frame），相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。

2.设置动画：

然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。

5张图片，需要切换4次，定义动画0%，20%，40%，80%，100%。

3.动画分解：

为了让图片切换后静置一段时间，可以将动画细分为：位移切换和静置两个阶段。

即20%~40%里面包含切换到第二张图片并且将第二张图片静置。

另外，根据需要可以对各个图片添加相应的序号和图片简介。

4.其他事件：

如果需要点击事件的话，配合js完成其他特效（如：点击序号显示相应的图片、上一张下一张等）


5.效果图：

如下：


6.全部代码：

[html]  view plain  copy
  1. >  
  2. <html>  
  3.  <head>  
  4.   <title> 飛天网事--纯CSS代码实现图片轮播 title>  
  5.   <meta charset="utf-8" />  
  6.   <meta name="description" content="飛天网事，WEB前端开发，纯css3代码图片轮播，HTML5+CSS3精彩案例" />  
  7.   <meta name="keywords" content="飛天网事，WEB前端开发，HTML5，CSS3，jQuery，" />  
  8.     <meta name="author" content="R.tian @eduppp.cn 2015">  
  9.     <link rel="shortcut icon"  href="http://eduppp.cn/images/logo4.gif" />  
  10.     <link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" />  
  11.   <style type="text/css">  
  12.         #frame {/*----------图片轮播相框容器----------*/  
  13.             position: absolute; /*--绝对定位，方便子元素的定位*/  
  14.             width: 300px;  
  15.             height: 200px;  
  16.             overflow: hidden;/*--相框作用，只显示一个图片---*/  
  17.             border-radius:5px;  
  18.         }  
  19.         #dis {/*--绝对定位方便li图片简介的自动分布定位---*/  
  20.             position: absolute;  
  21.             left: -50px;  
  22.             top: -10px;  
  23.             opacity: 0.5;  
  24.         }  
  25.         #dis li {  
  26.             display: inline-block;  
  27.             width: 200px;  
  28.             height: 20px;  
  29.             margin: 0 50px;  
  30.             float: left;  
  31.             text-align: center;  
  32.             color: #fff;  
  33.             border-radius: 10px;  
  34.             background: #000;  
  35.         }  
  36.         #photos img {  
  37.             float: left;  
  38.             width:300px;  
  39.             height:200px;  
  40.         }  
  41.         #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/  
  42.             position: absolute;z-index:9px;  
  43.             width: calc(300px * 5);/*---修改图片数量的话需要修改下面的动画参数*/  
  44.         }  
  45.         .play{  
  46.             animation: ma 20s ease-out infinite alternate;/**/  
  47.         }  
  48.         @keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/  
  49.             0%,20% {        margin-left: 0px;       }  
  50.             25%,40% {       margin-left: -300px;    }  
  51.             45%,60% {       margin-left: -600px;    }  
  52.             65%,80% {       margin-left: -900px;    }  
  53.             85%,100% {      margin-left: -1200px;   }  
  54.         }  
  55.         .num{  
  56.             position:absolute;z-index:10;  
  57.             display:inline-block;  
  58.             right:10px;top:165px;  
  59.             border-radius:100%;  
  60.             background:#f00;  
  61.             width:25px;height:25px;  
  62.             line-height:25px;  
  63.             cursor:pointer;  
  64.             color:#fff;  
  65.             text-align:center;  
  66.             opacity:0.8;  
  67.         }  
  68.         .num:hover{background:#00f;}  
  69.         .num:hover,#photos:hover{animation-play-state:paused;}  
  70.         .num:nth-child(2){margin-right:30px}  
  71.         .num:nth-child(3){margin-right:60px}  
  72.         .num:nth-child(4){margin-right:90px}  
  73.         .num:nth-child(5){margin-right:120px}  
  74.         #a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}  
  75.         #a2:hover ~ #photos{animation: ma2 .5s ease-out forwards;}  
  76.         #a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;}  
  77.         #a4:hover ~ #photos{animation: ma4 .5s ease-out forwards;}  
  78.         #a5:hover ~ #photos {animation: ma5 .5s ease-out forwards;}  
  79.         @keyframes ma1 {0%{margin-left:-1200px;}100%{margin-left:-0px;} }  
  80.         @keyframes ma2 {0%{margin-left:-1200px;}100%{margin-left:-300px;}   }  
  81.         @keyframes ma3 {100%{margin-left:-600px;}   }  
  82.         @keyframes ma4 {100%{margin-left:-900px;}   }  
  83.         @keyframes ma5 {100%{margin-left:-1200px;}  }  
  84.   style>  
  85.  head>  
  86.  <body>  
  87.  <div id="frame" >  
  88.         <a id="a1" class="num">1a>  
  89.         <a id="a2" class="num">2a>  
  90.         <a id="a3" class="num">3a>  
  91.         <a id="a4" class="num">4a>  
  92.         <a id="a5" class="num">5a>  
  93.         <div id="photos" class="play">  
  94.               <img src="http://eduppp.cn/images/0/1.jpg" >  
  95.               <img src="http://eduppp.cn/images/0/3.jpg" >  
  96.               <img src="http://eduppp.cn/images/0/4.jpg" >  
  97.               <img src="http://eduppp.cn/images/0/5.jpg" >  
  98.               <img src="http://eduppp.cn/images/0/2.jpg" >  
  99.               <ul id="dis">  
  100.                 <li>中国标志性建筑：天安门li>  
  101.                 <li>中国标志性建筑：东方明珠li>  
  102.                 <li>中国标志性建筑：布达拉宫li>  
  103.                 <li>中国标志性建筑：长城li>  
  104.                 <li>中国标志性建筑：天坛li>  
  105.               ul>  
  106.         div>  
  107. div>  
  108. body>  
  109. html>  
原文：点击打开链接 

 
 
 


                            

                        

                    

                    
                    

                    
                    
                    

                

                

                    
                

            

        

    

    

        
你可能感兴趣的:(学习之路)

        

            

                
    
                    
  • Oracle EMCC 13.5 集群安装部署指南
                        Lucifer三思而后行
DBA实战系列oracle数据库
                        
    大家好，这里是DBA学习之路，专注于提升数据库运维效率。目录前言第一阶段：OMR集群部署1.1OracleRAC环境准备1.2数据库版本验证1.3EMCC专用数据库优化第二阶段：ACFS集群文件系统构建2.1存储层配置配置multipath多路径配置UDEV设备绑定2.2ACFS文件系统创建使用ASMCA创建磁盘组创建ACFSVolume挂载点准备和文件系统创建第三阶段：OMS集群部署3.1环境准
    
                    
    • 
                    
  • python学习之路 - python的文件操作
                        

                        
    目录一、python文件操作1、文件的编码a、概念b、编码分类2、文件的读取a、打开文件a、读取文件字节c、读取文件行d、for循环的读取3、文件的关闭4、文件的写入5、文件的追加6、文件操作综合a、案例一：读取字符个数b、案例二：复制文件一、python文件操作1、文件的编码a、概念计算机只能识别0和1，所以需要用编码技术将内容翻译成0和1b、编码分类UTF-8除非有特殊要求，否则一般都用此编码
    
                    
    • 
                    
  • Vue学习之路04----响应式基础
                        利刃之灵
#Vue基础vue.js前端
                        
    响应式基础ref()（基本类型的响应式数据）在组合式API中，推荐使用ref()函数来声明响应式状态，ref能定义基本类型的，也能定义对象类型的：import{ref}from'vue'letcount=ref(0)ref()接收参数，并将其包裹在一个带有.value属性的ref对象中返回，在模版中则不需要：{{count}}按钮1按钮2import{ref}from"vue";exportdef
    
                    
    • 
                    
  • ros学习之路径规划
                        许卿768503
学习
                        
    一、全局路径规划中的地图1、栅格地图（GridMap）2、概率图（CostMap）3、特征地图（FeatureMap4、拓扑地图（TopologicalMap）二、全局路径规划算法1、Dijkstra算法2、最佳路径优先搜索算法（BFS）3、A*搜索算法双向A*搜索算法重复A*搜索算法AnytimeRepairingA*(ARA*)搜索算法实时学习A*搜索（LRTA*）算法实时适应性A*搜索（RT
    
                    
    • 
                    
  • React系统学习之路
                        莲华君
react.js学习前端
                        
    React系统学习之路学习目录第1章：React入门介绍React的基本概念和应用场景安装Node.js和npm创建第一个React应用React的JSX语法组件的基本结构和生命周期第2章：组件与状态管理函数组件与类组件的区别状态（State）和属性（Props）的使用受控组件与非受控组件高阶组件（HOC）的概念和实现使用ContextAPI进行跨层级状态传递第3章：ReactHooksuseSt
    
                    
    • 
                    
  • TiDB 替换 HBase 全场景实践指南 ——从架构革新到业务赋能
                        TiDB 社区干货传送门
tidbhbase架构数据库大数据
                        
    作者：数据源的TiDB学习之路原文来源：https://tidb.net/blog/c687d474第一章：HBase的历史使命与技术瓶颈1.1HBase的核心价值与经典场景作为Hadoop生态的核心组件，HBase凭借LSM-Tree存储引擎和Region分片机制，在2010年代成为海量数据存储的标杆。其典型场景包括：日志流处理：支持Kafka每日TB级数据持久化，写入吞吐达百万级QPS（如某头
    
                    
    • 
                    
  • 【BP数据预测】基于matlab遗传算法优化BP神经网络GA-BP数据预测【含Matlab源码 1376期】
                        海神之光
matlab
                        
    欢迎来到海神之光博客之家✅博主简介：热爱科研的Matlab仿真开发者，修心和技术同步精进；个人主页：海神之光代码获取方式：海神之光Matlab王者学习之路—代码获取方式（1）完整代码，已上传资源；需要的，在博主主页搜期号直接付费下载或者订阅本专栏赠送此代
    
                    
    • 
                    
  • 【BP分类】基于matlab灰狼算法优化BP神经网络结合Adaboost GWO-BP-Adaboost数据分类预测【含Matlab源码 3769期】
                        海神之光
matlab
                        
    欢迎来到海神之光博客之家✅博主简介：热爱科研的Matlab仿真开发者，修心和技术同步精进；个人主页：海神之光代码获取方式：海神之光Matlab王者学习之路—代码获取方式（1）完整代码，已上传资源；需要的，在博主主页搜期号直接付费下载或者订阅本专栏赠送此代
    
                    
    • 
                    
  • 硬件学习之路的宝藏博主推荐
                        就不吃皮蛋
学习单片机硬件工程
                        
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、洋桃电子二、桂电二院科协三、尚知物理四、嘉立创EDA五、江协科技六、jhp硬件工作室六、一些好用的网站（doge）声明前言B站上值得关注的学习类宝藏博主一、洋桃电子适合零基础学习硬件@洋桃电子——极速入门数模电路能快速入门单片机（8051+ESP32双核心教程）学习中你可能需要知道的电子大百科（洋桃电子的技术科普）Al
    
                    
    • 
                    
  • STM32单片机的学习之路：从入门到精通
                        嵌入式大圣
单片机stm32学习
                        
    STM32单片机作为STMicroelectronics（意法半导体）旗下的32位微控制器系列，以其高性能、低功耗和丰富的外设资源而闻名，广泛应用于嵌入式系统、工业控制、物联网等领域。学习STM32不仅能够掌握现代嵌入式系统开发的核心技能，还能为未来的开发工作奠定坚实的基础。本文将从基础入门开始，逐步探讨如何学习STM32单片机，并在实践中掌握其高级特性。目录第一章：STM32单片机基础概念1.1
    
                    
    • 
                    
  • STM32H7学习之路继续(stm32H7系列2) STM32最小系统
                        hunger哥
单片机STM32H7ARM嵌入式stm32单片机
                        
    2020.01.08几个重要的参考网址1.电子工程世界网http://tags.eeworld.com.cn/tags/STM32H7链接:link.2.转:https://blog.csdn.net/simon223/article/list/2?t=1链接:link.————————————————版权声明：本文为CSDN博主「Simon223」的原创文章，遵循CC4.0BY-SA版权协议，转
    
                    
    • 
                    
  • 深度学习之路——CNN卷积神经网络详解
                        DeepLinkDeepLink
Ai深度学习cnn人工智能
                        
    深度学习之路——CNN卷积神经网络详解前言卷积神经网络（ConvolutionalNeuralNetwork,CNN）作为深度学习领域的基础模型，推动了人工智能在图像、视频等方向的爆炸式发展。无论是图像分类、目标检测，还是语义分割、自动驾驶，CNN几乎无处不在。本文将带你系统了解CNN的基本原理、结构组成、常用网络、应用场景及简单代码实现。1.什么是CNN？CNN是一类专门处理类似网格结构数据（如
    
                    
    • 
                    
  • STM32学习之路一
                        专业打龟人
stm32学习嵌入式硬件
                        
    学习目标：初识单片机学习内容：1.什么是单片机单片机是一种集成电路芯片，把具有数据处理能力的中央处理器CPU、随机存储器RAM、闪存FLASH、多种I/O、中断系统和定时器/计数器等集成到一块硅片上构成的一个小而完善的微型计算机系统。单片机特点：体积小功耗低：毫安级集成度高：I/O、TIM、AD/DA使用方便：C/Debug扩展灵活：IIC/SPI/FSMC2.Cortex-M系列介绍2.1ARM
    
                    
    • 
                    
  • 前置知识 c语言语法概论与内存管理
                        V我五十买鸡腿
数据结构笔记c语言算法c++
                        
    c语言语法概论与内存管理人们常说c语言灵活，灵活，但是学习c语言的时候总觉得好像那里灵活了，灵活了个啥，只感觉c语言很简陋，也做不出来啥东西，所以为啥大家总说c生万物，这在我心里一直是一个问题，今天我们来讨论学习一下，试着理解计算机知识中这沧海一粟，解决我们心中的困惑。OK我们先从c语言的一些语法入手，开始我们的学习之路c语言语法概论c语言诞生之初就肩负起一个使命——管理内存。当然普及一下基础知识
    
                    
    • 
                    
  • ZYNQ学习之路（四）：DDR读写测试实验
                        梅菜扣肉鱼丸粗面
ZYNQ学习之路ZYNQAXIDDRPL与PS数据交换
                        
    目录一、AXI协议简介二、实验简介三、框图实现四、SDK部分编程一、AXI协议简介ZYNQ的架构是分为PL与PS的，因此两者之间免不了数据交互，之前我们介绍了通过BRAM进行交互，但BRAM进行交互存在速度慢、内存有限的缺点，对于ZYNQ7020来说，其BRAM只有4.9M，当数据量较大时，就没有办法使用了。而PS端的DDR3起码是512M，甚至有的达到了4G，可以满足大量数据进行交互。PL与PS
    
                    
    • 
                    
  • 前端的学习之路：初级HTML---图片标签
                        new-SkyWaller
初级HTMLhtml前端
                        
    图片标签图片标签-->
                    
    • 
                    
  • FastAPI 学习之路（一）上传文件
                        weixin_44929001
pythonfastapi学习
                        
    FastAPI学习之路（一）上传文件UploadFile的优势文件存储在内存，达到阈值后，将保存到磁盘中适用于图片、视频大文件…可以获取上传文件的元数据，如文件名、类型、创建时间…有文件对象的异步接口上传的文件是Python文件对象，可以使用write()、read()、seed()、close()进行操作单个文件的上传fromtypingimportListfromfastapiimportAP
    
                    
    • 
                    
  • C 语言学习感悟：编程世界的基石与挑战
                        ts1128
c++c语言
                        
    在C语言的学习之路上，我仿佛踏入了一座神秘而充满挑战的编程城堡。从最初对代码的懵懂无知，到逐渐理解其逻辑与魅力，这一过程充满了艰辛与惊喜。C语言简洁而强大的语法犹如一把双刃剑。一方面，它赋予了程序员对计算机底层资源高度的掌控力，能够精准地操作内存、高效地处理数据，这种直接与硬件对话的能力让我感受到了编程的深度与魅力。例如，在学习指针的过程中，我深刻体会到了C语言如何通过指针灵活地访问和修改内存中的
    
                    
    • 
                    
  • 「万字干货」高并发系统分析与大型互联网架构介绍
                        蓝桥云课
互联网java高并发java
                        
    （篇幅较长，建议大家先收藏再看哦~）在初步地学习并掌握了基础的编程之后，如何提高编程能力是每个开发者关心的问题。对于Java的学习者来说，高并发是每个开发者技术进阶的必经之路。但是高并发的技术要求和业务场景本身就是比较复杂的，这就会给大家的学习之路带来一定的难度。下面我们带大家了解高并发系统的应用场景、市场需求以及目前市面上比较成熟的大型互联网的系统架构基线是怎样的，让大家对于高并发有一个初步地认
    
                    
    • 
                    
  • Python学习之路（七）-绘画and动画
                        香蕉可乐荷包蛋
pythonpython学习开发语言
                        
    Python虽然不是专为图形设计或动画开发的语言，但凭借其丰富的第三方库，依然可以实现2D/3D绘画、交互式绘图、动画制作、游戏开发等功能。以下是Python在绘画和动画方面的主流支持方式及推荐库。建议前端web端展示还是用其他语言好╮(╯▽╰)╭一、Python绘画支持（2D图形绘制）1.matplotlib：数据可视化与图形绘制功能强大，适合科学计算、数据分析、图表绘制支持静态图像、动态图像（
    
                    
    • 
                    
  • Babylon.js学习之路《一、初识 Babylon.js：什么是 3D 开发与 WebGL 的完美结合？》
                        球球和皮皮
Babylon.js学习之路javascript3darvr前端框架
                        
    文章目录1.引言1.1为什么需要Web3D开发？1.1WebGL的定位与挑战2.Babylon.js的核心定位2.1什么是Babylon.js？2.2Babylon.js的独特优势2.3对比其他Web3D框架（Three.js、PlayCanvas）3.WebGL与Babylon.js的关系3.1WebGL的角色3.2Babylon.js如何封装WebGL？3.3Babylon.js的扩展能力4.
    
                    
    • 
                    
  • Python学习之路（八）-多线程和多进程浅析
                        香蕉可乐荷包蛋
pythonpython学习服务器
                        
    在Python中，多线程（Multithreading）和多进程（Multiprocessing）是实现并发编程的两种主要方式。它们各有优劣，适用于不同的场景。一、基本概念特性多线程（threading）多进程（multiprocessing）并发模型线程共享内存空间每个进程拥有独立内存空间GIL（全局解释器锁）受限于GIL，同一时间只有一个线程执行Python字节码不受GIL影响资源消耗小（轻量
    
                    
    • 
                    
  • 【创新未发表】基于matlab阿基米德算法AOA-PID控制器优化【含Matlab源码 9628期】
                        海神之光
Matlab优化求解（进阶版）matlab
                        
    欢迎来到海神之光博客之家✅博主简介：热爱科研的Matlab仿真开发者，修心和技术同步精进；个人主页：海神之光代码获取方式：海神之光Matlab王者学习之路—代码获取方式⛳️座右铭：行百里者，半于九十。更多Matlab优化求解仿真内容点击①Matlab优化求解（进阶版）②付费专栏Matlab优化求解（初级版）⛳️关注CSDN海神之光，更多资源等你来！！⛄一、智能优化算法-PID控制器优化PID控制器
    
                    
    • 
                    
  • 英特尔BigDL：为大数据插上人工智能的翅膀
                        couxuan4263

                        
    继大数据热之后，以深度学习为代表的人工智能成为当下最为热门的技术，越来越多的企业已经或正准备进军深度学习，特别是那些已经在大数据领域投入了重金，建立起了庞大的大数据集群的公司，由于有了大数据的这个基础，在深度学习之路上更为积极和主动。接下来，企业将思考如何能将大数据技术和人工智能、深度学习技术进行有效的融合？有没有一种既简单又好用的深度学习框架可以拿来就用？需要多久可以从人工智能技术上受益？下面是
    
                    
    • 
                    
  • three.js中使用canvas生成动态纹理贴图
                        VcB之殇
javascriptthree.js
                        
    three.js小白的学习之路。今天分享一个使用canvas生成纹理，然后通过CanvasTexture类创建贴图的例子。1.canvas纹理生成一个圆形的canvas纹理，颜色随机，半径随机，圆心随机。先创建一个随机函数：constrand=(min:number,max:number)=>{return(Math.random()*(max-min)+min)|0;};Math.random(
    
                    
    • 
                    
  • 【动手学大模型开发】搭建知识库 - 文档处理
                        青松ᵃⁱ
动手学大模型开发人工智能大模型开发
                        
    嗨，我是青松，很高兴遇到你！希望用我的经验，让每个人的AI学习之路走的更容易些~专栏：大模型（LLMs）高频面题全面整理（★2025最新版★）|动手学大模型开发目录一、源文档选取二、数据读取1.PDF文档2.MD文档三、数据清洗四、文档分割为构建我们的本地知识库，我们需要对以多种类型存储的本地文档进行处理，读取本地文档并通过前文描述的Embedding方法将本地文档的内容转化为词向量来构建向量数据
    
                    
    • 
                    
  • UI自动化学习之路Playwright版(Xpath定位篇)
                        灰灰灰灰灰子
自动化学习python
                        
    话不多说，直接看代码和注释#Xpath#定位#/:根节点选取#//:非根节点#*:任意节点#@:根据属性筛选#text:根据文本筛选#and:关联属性或链接文本#[]:放置下标、属性、链接文本#.:选取当前节点#..:当前节点父节点#contains:包含#单一属性定位page.locator('//a[@name="tj_settingicon"]').click()#多属性定位page.loc
    
                    
    • 
                    
  • STM32F103C8T6个人学习之路01-芯片介绍
                        TX-RX
stm32
                        
    STM32F103C8T6特性主核：ARM32-bitCortex™-M3CPU主频：72MHzFlash：64KSRAM：20K供电电压：2.0-3.6VADC：2个12-bitA/D转换器（1µs转换时间，16个通道）DMA：DMA（7通道）I/O：37个（可以映射到16个外部中断，可以容忍5V信号）定时器：3个通用定时器，1个定时器串口：3个IIC：2个SPI：2个USB：1个CAN：(2.
    
                    
    • 
                    
  • Python学习之路（六）-图像识别
                        香蕉可乐荷包蛋
pythonpython学习开发语言
                        
    Python图像识别理论原理及开发图像识别是计算机视觉的核心领域之一，其目标是让计算机能够从图像中提取信息并进行分类、检测或其他任务。以下是图像识别的理论原理和基于Python的开发方法。一、图像识别的理论原理1.图像的基本表示图像是由像素组成的二维矩阵，每个像素包含颜色信息（灰度值或RGB值）。灰度图像：单通道，每个像素值范围为[0,255]。彩色图像：三通道（RGB），每个通道值范围为[0,2
    
                    
    • 
                    
  • Oracle数据库学习之路-目录
                        ssauuuuuu
Oracle学习之旅oracle数据库
                        
    Oracle数据库学习之路一、安装（一）数据库安装步骤详解（二）开发工具安装与配置二、基础语法篇（一）基础SQL语法详解（二）SQL语法练习与案例分析三、高级语法篇（一）用户与角色的关系及权限管理（二）正则表达式应用技巧（三）集合操作精讲（四）Mergeinto语句高级应用（五）子查询使用技巧深度解析（六）数据类型及转换详解（七）分析函数深度剖析（八）PLSQL语法详解与编程实践（九）PLSQL实
    
                    
    • 
                                
  • jquery实现的jsonp掉java后台
                                    知了ing
javajsonpjquery
                                    
     什么是JSONP？ 
 
先说说JSONP是怎么产生的： 
 
其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。 
 
1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 
 
2、
    
                                
    • 
                                
  • Struts2学习笔记
                                    caoyong
struts2
                                    
    SSH : Spring + Struts2 + Hibernate 
三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller) 
分层原则:单向依赖，接口耦合 
 
1、Struts2  =  Struts  + Webwork 
2、搭建struts2开发环境 
   a>、到www.apac
    
                                
    • 
                                
  • SpringMVC学习之后台往前台传值方法
                                    满城风雨近重阳
springMVC
                                    
    springMVC控制器往前台传值的方法有以下几种： 
1.ModelAndView 
   通过往ModelAndView中存放viewName：目标地址和attribute参数来实现传参： 
    
 ModelAndView mv=new ModelAndView(); 
 mv.setViewName="success
    
                                
    • 
                                
  • WebService存在的必要性？
                                    一炮送你回车库
webservice
                                    
    做Java的经常在选择Webservice框架上徘徊很久，Axis  Xfire Axis2 CXF ，他们只有一个功能，发布HTTP服务然后用XML做数据传输。 
是的，他们就做了两个功能，发布一个http服务让客户端或者浏览器连接，接收xml参数并发送xml结果。 
当在不同的平台间传输数据时，就需要一个都能解析的数据格式。 
但是为什么要使用xml呢？不能使json或者其他通用数据
    
                                
    • 
                                
  • js年份下拉框
                                    3213213333332132
java web ee
                                    
    
  <div id="divValue">test...</div>测试

 //年份 
    <select id="year"></select>
   <script type="text/javascript">
     window.onload = 
    
                                
    • 
                                
  • 简单链式调用的实现技术
                                    归来朝歌
方法调用链式反应编程思想
                                    
    在编程中，我们可以经常遇到这样一种场景：一个实例不断调用它自身的方法，像一条链条一样进行调用 
这样的调用你可能在Ajax中，在页面中添加标签： 
$("<p>").append($("<span>").text(list[i].name)).appendTo("#result"); 
  
也可能在HQ
    
                                
    • 
                                
  • JAVA调用.net 发布的webservice 接口
                                    darkranger
webservice
                                    
     /** 
	* @Title: callInvoke 
	* @Description: TODO(调用接口公共方法) 
	* @param @param url 地址
	* @param @param method 方法
	* @param @param pama 参数
	* @param @return
	* @param @throws BusinessException  
    
                                
    • 
                                
  • Javascript模糊查找 | 第一章 循环不能不重视。
                                    aijuans
Way
                                    
      最近受我的朋友委托用js+HTML做一个像手册一样的程序，里面要有可展开的大纲，模糊查找等功能。我这个人说实在的懒，本来是不愿意的，但想起了父亲以前教我要给朋友搞好关系，再加上这也可以巩固自己的js技术，于是就开始开发这个程序，没想到却出了点小问题，我做的查找只能绝对查找。具体的js代码如下： 
  
function search(){
	var arr=new Array("my
    
                                
    • 
                                
  • 狼和羊，该怎么抉择
                                    atongyeye
工作
                                    
    狼和羊，该怎么抉择 
 
在做一个链家的小项目，只有我和另外一个同事两个人负责，各负责一部分接口，我的接口写完，并全部测联调试通过。所以工作就剩下一下细枝末节的，工作就轻松很多。每天会帮另一个同事测试一些功能点，协助他完成一些业务型不强的工作。 
 
今天早上到公司没多久，领导就在QQ上给我发信息，让我多协助同事测试，让我积极主动些，有点责任心等等，我听了这话，心里面立马凉半截，首先一个领导轻易说
    
                                
    • 
                                
  • 读取android系统的联系人拨号
                                    百合不是茶
androidsqlite数据库内容提供者系统服务的使用
                                    
      
     联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢 
  
关键代码: 
  
  
1, 使用javabean操作存储读取到的数据 
package com.example.bean;

/**
 * 
 * @author Admini
    
                                
    • 
                                
  • ORACLE自定义异常
                                    bijian1013
数据库自定义异常
                                    
    实例： 
CREATE OR REPLACE PROCEDURE test_Exception
(
  ParameterA IN varchar2,
  ParameterB IN varchar2,
  ErrorCode  OUT varchar2  --返回值,错误编码
)
AS
  /*以下是一些变量的定义*/
  V1    NUMBER;
  V2    nvarc
    
                                
    • 
                                
  • 查看端号使用情况
                                    征客丶
windows
                                    
    一、查看端口 
在windows命令行窗口下执行： 
>netstat -aon|findstr "8080" 
显示结果： 
TCP     127.0.0.1:80         0.0.0.0:0    &
    
                                
    • 
                                
  • 【Spark二十】运行Spark Streaming的NetworkWordCount实例
                                    bit1129
wordcount
                                    
    Spark Streaming简介 
  NetworkWordCount代码 
  
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with

    
                                
    • 
                                
  • Struts2 与 SpringMVC的比较
                                    BlueSkator
struts2spring mvc
                                    
    1. 机制：spring mvc的入口是servlet，而struts2是filter，这样就导致了二者的机制不同。 2. 性能：spring会稍微比struts快。spring mvc是基于方法的设计，而sturts是基于类，每次发一次请求都会实例一个action，每个action都会被注入属性，而spring基于方法，粒度更细，但要小心把握像在servlet控制数据一样。spring
    
                                
    • 
                                
  • Hibernate在更新时，是可以不用session的update方法的(转帖）
                                    BreakingBad
Hibernateupdate
                                    
    地址：http://blog.csdn.net/plpblue/article/details/9304459 
public void synDevNameWithItil() 
{Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran
    
                                
    • 
                                
  • 读《研磨设计模式》-代码笔记-观察者模式
                                    bylijinnan
java设计模式
                                    
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 



import java.util.ArrayList;
import java.util.List;
import java.util.Observable;
import java.util.Observer;

/**
 * “观
    
                                
    • 
                                
  • 重置MySQL密码
                                    chenhbc
mysql重置密码忘记密码
                                    
    如果你也像我这么健忘，把MySQL的密码搞忘记了，经过下面几个步骤就可以重置了（以Windows为例，Linux/Unix类似）： 
1、关闭MySQL服务 
2、打开CMD，进入MySQL安装目录的bin目录下，以跳过权限检查的方式启动MySQL 
mysqld --skip-grant-tables 
 3、新开一个CMD窗口，进入MySQL 
mysql -uroot 
 
    
                                
    • 
                                
  • 再谈系统论，控制论和信息论
                                    comsci
设计模式生物能源企业应用领域模型
                                    
     
                           再谈系统论，控制论和信息论 
 
 
    偶然看
    
                                
    • 
                                
  • oracle moving window size与 AWR retention period关系
                                    daizj
oracle
                                    
    转自： http://tomszrp.itpub.net/post/11835/494147 
 
晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程. 
 
SQL> select * from v$version; 
 
BANNER 
-------------------
    
                                
    • 
                                
  • Python版B树
                                    dieslrae
python
                                    
    话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树... 
 
首先是数据实体对象,很简单,只存放key,value 
 

class Entity(object):
    '''数据实体'''
    
    def __init__(self,key,value)
    
                                
    • 
                                
  • C语言冒泡排序
                                    dcj3sjt126com
算法
                                    
    代码示例： 
# include <stdio.h>

//冒泡排序
void sort(int * a, int len)
{
	int i, j, t;

	for (i=0; i<len-1; i++)
	{
		for (j=0; j<len-1-i; j++)
		{
			if (a[j] > a[j+1])	// >表示升序 
    
                                
    • 
                                
  • 自定义导航栏样式
                                    dcj3sjt126com
自定义
                                    
    -(void)setupAppAppearance
{
    [[UILabel appearance] setFont:[UIFont fontWithName:@"FZLTHK—GBK1-0" size:20]];
    [UIButton appearance].titleLabel.font =[UIFont fontWithName:@"FZLTH
    
                                
    • 
                                
  • 11.性能优化-优化-JVM参数总结
                                    frank1234
jvm参数性能优化
                                    
    1.堆 
-Xms --初始堆大小 
-Xmx --最大堆大小 
-Xmn --新生代大小 
-Xss --线程栈大小 
-XX:PermSize  --永久代初始大小 
-XX:MaxPermSize  --永久代最大值 
-XX:SurvivorRatio --新生代和suvivor比例,默认为8 
-XX:TargetSurvivorRatio --survivor可使用
    
                                
    • 
                                
  • nginx日志分割 for linux
                                    HarborChung
nginxlinux脚本
                                    
    nginx日志分割 for linux   默认情况下，nginx是不分割访问日志的，久而久之，网站的日志文件将会越来越大，占用空间不说，如果有问题要查看网站的日志的话，庞大的文件也将很难打开，于是便有了下面的脚本        使用方法，先将以下脚本保存为 cutlog.sh，放在/root 目录下，然后给予此脚本执行的权限    
   
复制代码代码如下:   
chmo
    
                                
    • 
                                
  • Spring4新特性——泛型限定式依赖注入
                                    jinnianshilongnian
springspring4泛型式依赖注入
                                    
    Spring4新特性——泛型限定式依赖注入 
Spring4新特性——核心容器的其他改进 
Spring4新特性——Web开发的增强 
Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  
Spring4新特性——Groovy Bean定义DSL 
Spring4新特性——更好的Java泛型操作API  
Spring4新
    
                                
    • 
                                
  • centOS安装GCC和G++
                                    liuxihope
centosgcc
                                    
    Centos支持yum安装，安装软件一般格式为yum install .......，注意安装时要先成为root用户。 
 
按照这个思路，我想安装过程如下： 
 
安装gcc：yum install gcc 
 
安装g++： yum install g++ 
 
实际操作过程发现，只能有gcc安装成功，而g++安装失败，提示g++ command not found。上网查了一下，正确安装应该
    
                                
    • 
                                
  • 第13章 Ajax进阶（上）
                                    onestopweb
Ajax
                                    
    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/
    
                                
    • 
                                
  • How to determine BusinessObjects service pack and fix pack
                                    blueoxygen
BO
                                    
    http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/ 
  
The table below is helpful. Reference 
  BOE XI 3.x 
     12.0.0.
y  BOE XI 3.0   12.0.
x.
y  BO
    
                                
    • 
                                
  • Oracle里的自增字段设置
                                    tomcat_oracle
oracle
                                    
    　大家都知道吧，这很坑，尤其是用惯了mysql里的自增字段设置，结果oracle里面没有的。oh，no   　　我用的是12c版本的，它有一个新特性，可以这样设置自增序列，在创建表是，把id设置为自增序列   
create table t
(
id 　　 　　  number generated by default as identity (start with 1 increment b
    
                                
    • 
                                
  • Spring Security（01）——初体验
                                    yang_winnie
springSecurity
                                    
    Spring Security（01）——初体验 
 
    博客分类： spring Security 
 
Spring Security入门安全认证 
 
       首先我们为Spring Security专门建立一个Spring的配置文件，该文件就专门用来作为Spring Security的配置
    
                                
    • 
                

            

        

    




    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他