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>  
原文：点击打开链接 

 
 
 


                            

                        

                    

                    
                    

                    
                    
                    

                

                

                    
                

            

        

    

    

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

        

            

                
    
                    
  • 【监控告警】02-Promtheus的学习之路
                        Kearey.
监控告警微服务网关学习方法
                        
    prometheus采用的是拉模式为主，推模式为辅的方式采集数据。Prometheus作为一个指标系统天生就不是精确的——由于指标本身就是稀疏采样的，事实上所有的图表和警报都是”估算”，我们也就不必太纠结于图表和警报的对应性，能够帮助我们发现问题解决问题就是一个好监控系统。当然，有时候我们也得证明这个警报确实没问题，那可以看一眼`ALERTS`指标。`ALERTS`是Prometheus在警报计算
    
                    
    • 
                    
  • 3 java学习之路从就近原则和this关键字开始
                        Daijunxi_cpu
学习javajvmide笔记经验分享开发语言
                        
    求博文多多人看是我写的很烂吗？就近原则以上图举例就近原则，输出age但是成员变量和局部变量变量名age冲突了,就近原则就起效果了，离输出语句近的变量就被使用了。但是要是想用上面那个成员变量咋办？别怕，this会给出答案！！！使用了this关键字就会指向成员变量。就这样比较简单咱们上案例打字太麻烦了直接上视频！kk2024-09-1321-23-42录的视频，真的很烂给大家磕一个构造器kk2024-
    
                    
    • 
                    
  • 【图像压缩】奇异值分解SVD灰色图像压缩（可设置压缩比）【含Matlab源码 4358期】
                        Matlab武动乾坤
Matlab图像处理（进阶版）matlab
                        
    ✅博主简介：热爱科研的Matlab仿真开发者，修心和技术同步精进，Matlab项目合作可私信。个人主页：海神之光代码获取方式：海神之光Matlab王者学习之路—代码获取方式⛳️座右铭：行百里者，半于九十。更多Matlab仿真内容点击Matlab图像处理（进阶版）路径规划（Matlab）神经网络预测与分类（Matlab）优化求解（Matlab）语音处理（Matlab）信号处理（Matlab）车间调度
    
                    
    • 
                    
  • Java学习之路：实践项目与进阶学习--创建一个图书管理系统
                        Dreams°123
java数据库开发语言springspringbootintellijideaintellij-idea
                        
    前言：上一篇学习了入门级知识，留了一份作业，其实创建一个图书管理系统是一个很好的实践项目，可以帮助你掌握数据库操作、前端开发和基本的CRUD（创建、读取、更新、删除）操作，数据库存储书籍信息，以及一个基本的用户界面。项目结构后端:使用Java和SpringBoot实现RESTfulAPI。数据库:使用H2数据库进行书籍信息存储。（也可使用mysql数据库设计，详情可参考：《MySQL数据库课程设计
    
                    
    • 
                    
  • 1130每日一省Day15(重启Day8)
                        活成自己的小太阳0329

                        
    豆豆早上八点钟起床，跟家人微聊过后自己起床洗漱，依旧检测后回家。面包、牛奶、砂糖桔做了豆豆的早餐。爸爸妈妈忙于工作，豆豆今天又有点撒欢儿，看了短视频还在妈妈的允许下“吃了鸡”（才发现游戏原来这么长时间呀）。午餐豆豆只吃了半个饺子为此还被先生训斥，好在晚餐豆豆主动提出自己的需求，豆豆跟爸爸一起做出炒方便面，自己吃了一大盘还喝了粥，开心晚餐。晚饭后妈妈简单收拾餐桌做完收尾工作后开启业余学习之路。今天收
    
                    
    • 
                    
  • 一起走的学习之路(125)
                        小米雨路

                        
    最大的难题不知道大家有没有这个感受，最近由于没有学习专栏了，每天要写什么，成为了一大难题。以往，都可以根据专栏的内容，确定今天文章的主题，然后再根据这个主题，来找实际的例子，一篇文章很快就有了大体的结构，但现在写什么成最大的难题。剖析原因认真分析了，从我们集中学习专栏结束到今天，我为什么写不出来的几个原因。一是，由于缺乏发现的能力，觉得身边好像很多话题都是以前我们写过的，只能重复不断的写，难以找到
    
                    
    • 
                    
  • Day38开启2020学习之路
                        佳佳_797e

                        
    十点，十点，十点，才下班每每到了这个点要是晚上还在加班，下班晚，就很懊恼，懊恼时间去了哪，懊恼为什么到了这个点还没把今天的工作做完，懊恼又不能按时回家带娃，懊恼今天的运动打卡又没有时间完成了，懊恼上的日更又是匆忙凑字数了，懊恼晚上又得晚睡了…我改怎么办…
    
                    
    • 
                    
  • java后端未来学习之路
                        命z
javajava后端学习
                        
    最近找到了一篇文章，感觉是自己可以借鉴的，具体内容如下：首先，我个人比较推崇的学习方法是：先学java前端，也就是HTML，css，js，因为学习java以后肯定是往javaee方向发展的，学习完前端，在学习后端很多东西比计较容易理解！其中J2SE是关键，如果学好了javase部分，基础扎实了，后面进阶学习也比较轻松！补充说明一下：我觉得学习java比较合适的方法是先把所有的知识点过一遍，然后把所
    
                    
    • 
                    
  • 编程学习之路上的高墙与希望之光
                        一个代码猎人
笔记本学习
                        
    编程学习之路上的高墙与希望之光在编程的世界里，挫折感就像一道道难以逾越的高墙，常常让人感到无所适从。许多人因为这些高墙而停下了脚步，但那些真正的编程高手却总能找到方法突破这些障碍。无论是初学者还是资深开发者，编程之路上都少不了跌倒、迷茫和探索。今天，我想和大家分享如何在Bug的迷宫中找到出口，如何在面对复杂算法时保持冷静，以及如何从挫折中汲取力量、继续前行。1.面对Bug时的心态调整接受挫折感是常
    
                    
    • 
                    
  • LeetCode学习之路（C++）——字符串（3）
                        Alex_SCY
Leetcodeleetcode
                        
    Leetcode题解-字符串目录Leetcode题解-字符串242.两个字符串包含的字符是否完全相同409.计算一组字符集合可以组成的回文字符串的最大长度205.字符串同构647.回文子字符串个数9.判断一个整数是否是回文数696.统计二进制字符串中连续1和连续0数量相同的子字符串个数242.两个字符串包含的字符是否完全相同242.ValidAnagram(Easy)Leetcode/力扣思路：可
    
                    
    • 
                    
  • OpenGL学习之路(4.0) 实现抗锯齿效果
                        velue

                        
    原因当我们放大图片的时候会发现图片上的像素点有很多锯齿形状，这样就会导致图片呈现的效果不佳，所以需要通过抗锯齿处理。方式抗锯齿的方式有两种，一种是混合(GLBlend)处理抗锯齿，一种是多重采样抗锯齿混合(GLBlend)处理抗锯齿需要注意的是，混合处理只能处理点和线段，多边形图形需要多重采样处理打开混合处理/**函数原型:voidglHint(GLenumtarget,GLenummod)参数说
    
                    
    • 
                    
  • 嵌入式学习之路 16（C语言基础学习——指针操作二维数组、指向函数的指针、指针的指针）
                        求学者1.0
学习c语言数据结构
                        
    一、指针操作二维整型数组1、二维数组的本质在C语言中，二维数组本质上是由多个一维数组组成的。例如，inta[2][3]可以看作是包含两个长度为3的一维整数数组。2、指针与二维数组对于二维数组inta[2][3]，&a[0]的类型是int(*)[3]，因为C语言中不直接支持int[3]*这种类型，所以需要使用int(*)[3]来表示指向包含3个整数的一维数组的指针。定义指针int(*p)[3]=a;
    
                    
    • 
                    
  • 从挫败到精通：三步克服编程学习的难关
                        疾风终究没有归途
学习心态调整学习方法
                        
    你是如何克服编程学习中的挫折感的？编程学习之路上，挫折感就像一道道难以逾越的高墙，让许多人望而却步。然而，真正的编程高手都曾在这条路上跌倒过、迷茫过，却最终找到了突破的方法。你是如何在Bug的迷宫中找到出口的？面对复杂的算法时，你用什么方法让自己保持冷静？让我们一起分享那些克服挫折的经验，为彼此的编程之路点亮希望之光！方向一：心态调整保持积极的心态：认识到挫折是成长的一部分，而不是失败的标志。每次
    
                    
    • 
                    
  • js学习之路（六）——this，箭头函数，对象操作
                        EOPG
vue3javascript学习排序算法
                        
    js学习之路（六）1.this指向2.改变this指向3.ES6定义变量4.04_变量的块级作用域5.ES6的箭头函数6.箭头函数的特性7.函数的参数默认值8.模板字符串9.点点点(...)运算符10.解构赋值11.对象的简写12.了解面向对象开发13.创建对象的四种方式14.构造函数的书写和使用15.构造函数是否合理17.prototype18.__proto__1.this指向/*this指向
    
                    
    • 
                    
  • 2021-01-10
                        祁连山人_3575

                        
    伴着清晨的习习寒风，踩着2021年的第二场积雪，又去送儿子踏上新的学习之路。要问现在最辛苦的是谁，这排名前列的，甚至可以排在第一的，我想就是莘莘学子了。多少年来，一直在学习、落实、倡导、实施素质教育，提高学生综合素质，到现在的核心素养，专家学者不断的研究、调查、分析、总结，看报道听报告激发共鸣，但是在实际落实中，最基本最核心的还是学得清楚明白，考试成绩优异占主导地位。其实，素质素养与提高考试成绩本
    
                    
    • 
                    
  • PyTorch实现CIFAR-10分类代码
                        曹勖之
PyTorch学习之路深度学习pytorch
                        
    这篇是PyTorch学习之路第七篇，用于记录PyTorch实现CIFAR-10分类代码（书上的代码有好多冗余）目录完整代码（还未训练）完整代码（已训练，直接载入模型）下面实例数据集位于：C:\Users\22130\Learning_Pytorch\dataset完整代码（还未训练）importtorchimporttorchvisionimporttorchvision.transformsas
    
                    
    • 
                    
  • 日撸Java三百行（day31：整数矩阵及其运算）
                        林金金金
java矩阵算法
                        
    目录前言一、基本属性与方法二、getter与setter方法三、矩阵相加与矩阵相乘方法1.矩阵相加2.矩阵相乘四、数据测试五、完整的程序代码总结前言从今天开始，我们就要踏上图论的学习之路了。第一天，我们先简单热个身，构造一个整数矩阵。一、基本属性与方法/***Thedata.*/int[][]data;由于我们今天构造的是int类型的矩阵，而在程序代码中矩阵又是通过数组来实现，所以这里首先定义了一
    
                    
    • 
                    
  • GPT-4：秒懂情感的AI新突破
                        一个有梦有戏的人
AI文章人工智能GPT-4AI文章科大讯飞
                        
    GPT-4：秒懂情感的AI新突破生命不息，写作不止继续踏上学习之路，学之分享笔记总有一天我也能像各位大佬一样博客首页@怒放吧德德To记录领地分享学习心得，欢迎指正，大家一起学习成长！此文由AI生成GPT-4技术简介GPT-4实时语音交流技术，以其强大的语言理解和情感分析能力，在秒懂人的情感上表现出了惊人的能力。这不仅仅是一种技术的突破，更是一种对人工智能理解人类情感的深度挖掘。然而，这种技术的发展
    
                    
    • 
                    
  • 起而行之 勇挑重担
                        猫猫星球

                        
    习近平总书记在中央党校（国家行政学院）中青年干部培训班开班式上发表重要讲话，深深鼓舞和鞭策着广大中青年干部。在认真学习、深入领会习近平总书记重要讲话精神后，我认为我们中青年干部要起而行之、勇挑重担，积极投身新时代中国特色社会主义伟大实践，持之以恒加强思想淬炼、政治历练、实践锻炼、专业训练，不断提高解决实际问题能力，更好肩负起新时代的职责和使命。中年轻干部成长，要走好学习之路。善于学习，就是善于进步
    
                    
    • 
                    
  • 野路子中医学习之路
                        懒到底的猫cy

                        
    上周末去中国中医科学院学习，一年第三次去中医的最高学府，教授在之前的基础上更新了课件，大家都听得如痴如醉，仿佛醍醐灌顶。我也感觉收获很大，又多掌握了几个新方子，但是思路其实真的是我一贯坚持的，你看我虽没有经过大学科班教育，但是思路绝对没问题，所以平时自家人或是朋友调理我给的方案效果都不错。思路对，一对百对。回想一下，自己走上相信中医，热爱收集名医，现在还来推广艾灸的中医之路，似乎很顺其自然，从来没
    
                    
    • 
                    
  • 新媒体运营学习之路：让你工资翻倍的五大核心技能
                        一念一念_

                        
    互联网的时代，人们都很重视对新媒体运营的学习，其实不仅仅是要从事运营这份工作的人，普通人掌握新媒体这门手艺也是非常有用的。但是很多人就会问了，我是零经验零基础，学习新媒体运营能行吗？其实新媒体的学习是有规律可循的，不管你是新媒体运营小白，还是从业者，掌握了这五个核心技能，你也能轻松成为新媒体运营高手！新媒体运营学习平台新媒体运营学习核心技能一：内容创作对于一个新媒体运营来说，内容创作是非常核心的技
    
                    
    • 
                    
  • 【JAVA学习之路 | 进阶篇】ArrayList,Vector,LinkedList内存解析
                        Vez'nan的幸福生活
java开发语言
                        
    1.ArrayList(1).特点:实现了List接口，存储有序的，可重复的数据.底层使用Object[]数组存储.线程不安全.(底层方法未用synchronized修饰.)(2).版本解析::JDK7版本ArrayListlist＝newArrayListJDK8版本ArrayListlist＝newArrayListvector＝newVectorlist＝newLinkedList)都指向了
    
                    
    • 
                    
  • 一起走的学习之路(126)
                        小米雨路

                        
    一个励志的小故事周末璧山有一个半程马拉松比赛，单位有两个新跑马的同事，也跟着大家报名参加了，由于他们俩的年龄都非常大了，一个是58年的，一个是59年的，所以我们给他们设定的目标，就是能够完赛证明自己就好。可是结果却出乎意料，他们一个跑了2小时12分钟，一个跑了2小时20分钟，要知道这个成绩已经是相当的了不起了，对于只有20多岁的我来讲，前次我去参加重庆马拉松比赛，跑完半程用时2小时37分钟，他们整
    
                    
    • 
                    
  • 克服编程学习中的挫折感
                        flying jiang
团队建设学习
                        
    你是如何克服编程学习中的挫折感的？编程学习之路上，挫折感就像一道道难以逾越的高墙，让许多人望而却步。然而，真正的编程高手都曾在这条路上跌倒过、迷茫过，却最终找到了突破的方法。你是如何在Bug的迷宫中找到出口的？面对复杂的算法时，你用什么方法让自己保持冷静？让我们一起分享那些克服挫折的经验，为彼此的编程之路点亮希望之光！方向一：心态调整提示：探讨如何调整心态，保持积极乐观的学习态度，如何设定合理的目
    
                    
    • 
                    
  • wo是如何克服编程学习中的挫折感的？
                        docker真的爽爆了
学习
                        
    你是如何克服编程学习中的挫折感的？编程学习之路上，挫折感就像一道道难以逾越的高墙，让许多人望而却步。然而，真正的编程高手都曾在这条路上跌倒过、迷茫过，却最终找到了突破的方法。你是如何在Bug的迷宫中找到出口的？面对复杂的算法时，你用什么方法让自己保持冷静？让我们一起分享那些克服挫折的经验，为彼此的编程之路点亮希望之光！方向一：心态调整提示：探讨如何调整心态，保持积极乐观的学习态度，如何设定合理的目
    
                    
    • 
                    
  • 中年人开发语言学习之路，反其道而行之
                        MavenTalk
个人成长开发语言学习
                        
    大家都更愿意学习新技术、新架构，代表着新方向新趋势，当大家都这么想的时候，注定了竞争就会激烈。有一部分中年程序员，反其道而行之，学习一些老掉牙的开发语言，向哪些近乎被遗忘的老旧系统进军。市面上依旧存在一些老旧的开发语言，除了COBOL之外，还包括FORTRAN、Assembly、Pascal、Ada等。这些语言中的一些，如FORTRAN，曾经在科学和工程计算领域占据重要地位，而Assembly语言
    
                    
    • 
                    
  • 一起走的学习之路(九十二)
                        小米雨路

                        
    很多时候我们都知道应该做那些正确而特立独行的事，并且默默的践行，直到你真的取得了阶段性的里程碑。可是往往现实当中，我们很难发现什么事特立独行的事儿或者是发现了不知怎样才能做到默默的践行。特立独行的事如何发现那些特立独行的事，那就需要您持续的学习，用你的原认知能力去分析你所遇到的事情，不以目前外界的声音来影响自己的判断。我想对于我们而言，现阶段能够发现特立独行的事儿，最好的一个方法就是模仿。其实现在
    
                    
    • 
                    
  • Docker学习之路【一】开篇
                        HootinVip
Docker学习之路docker
                        
    简介Docker是一个开源的应用容器引擎，它使用Go语言开发，并基于Linux内核的cgroup、namespace以及UnionFS等技术，对应用进程进行封装隔离，使其独立于宿主机和其他进程。Docker将应用程序及其所有依赖项打包到一个可移植的容器中，这种容器可以在任何支持Docker的平台上运行，从而实现了“一次镜像，处处运行”的目标。架构要素Docker镜像、容器和仓库是Docker技术中
    
                    
    • 
                    
  • 学习之路漫长
                        乡村算卦师

                        
    学习是件长久的事，不是说学习一天两天，学习一个月两个月就结束的。真的是非常佩服那些将学习当成一辈子的事，可以每天学习学习。不管多忙，都会有时间学习，不管多累，都会学习，不管多难，都会持续学习。坚持，加油，努力！
    
                    
    • 
                    
  • 继续教育公需科目试题及答案，分享几个实用搜题和学习工具 #经验分享#经验分享
                        红色小鬼头
学习经验分享
                        
    大学生活是一个充满挑战和机遇的阶段，在这个阶段，我们需要不断提升自己的学习能力和技巧。而寻找适合自己的学习工具也成为了我们必须面对的任务。幸运的是，现在有许多日常学习工具可以帮助我们更好地组织学习、提高效率。今天，我将向大家介绍备受大学生欢迎的日常学习工具，希望能为你们的学习之路添砖加瓦。1.试题易这是一个网站涵盖初高中／大学／专升本／考研／成人自考／各类资格证等等考试题目，同时支持截图搜题、语音
    
                    
    • 
                                
  • 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其他