Michael _დ
Michael _დ

前端特效-HTML+CSS+JS -3D翻转动画效果的名片

实现的效果

前端特效-HTML+CSS+JS -3D翻转动画效果的名片_第1张图片

项目需要的图片资源

html部分 + js部分


<html lang="en" dir="ltr">
 <head>
   <meta charset="utf-8">
   <title>title>
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">script>

 head>
 <body>

   <div class="business-card middle">
     <div class="front">
       <h2>Shuichi Akaih2>
       <span>Web Designerspan>
       <ul class="contact-info">
         <li>
           <i class="fas fa-mobile-alt">i> +0000000000
         li>
         <li>
           <i class="far fa-envelope">i> [email protected]
         li>
         <li>
           <i class="fas fa-map-marker-alt">i> Tokyo, Japan
         li>
       ul>
     div>
     <div class="back">
       <span>DarkCodespan>
     div>
   div>

   <script>
     $(".business-card").click(function(){
       $(".business-card").toggleClass("business-card-active");
     });
   script>
 body>
html>

css部分

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
  box-sizing: border-box;
  list-style: none;
}

body{
  background: url(bg.jpg) no-repeat;
  background-size: cover;
  user-select: none;
}

.business-card{
  width: 500px;
  height: 280px;
}

.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.front,.back{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.5s linear;
}

.front{
  background: rgba(255,255,255,.7);
  padding: 40px;
  transform: perspective(600px) rotateX(180deg);
}

.front::before,.front::after{
  content: "";
  position: absolute;
  right: 0;
}

.front::before{
  background: #2c3e50;
  width: 80px;
  height: 120px;
  bottom: 0;
  clip-path:polygon(0 100%,40% 0,100% 100%);
}

.front::after{
  background: #34495e;
  width: 100px;
  height: 100%;
  top: 0;
  clip-path:polygon(0 0,100% 0,100% 100%,80% 100%);
}

.front h2{
  text-transform: uppercase;
}

.front span{
  background: #34495e;
  color: #fff;
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 20px;
  font-size: 14px;
}

.front .contact-info li{
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.front .contact-info li i{
  width: 26px;
  height: 26px;
  background: #34495e;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 6px;
}

.back{
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 8px;
  font-size: 24px;
  transform: perspective(600px) rotateX(0deg);
}

.business-card-active .front{
  transform: perspective(600px) rotateX(0deg);
}
.business-card-active .back{
  transform: perspective(600px) rotateX(-180deg);
}

你可能感兴趣的:(前端特效)

  • 【前端实例代码】使用HTML CSS 和 JavaScript制作一个五星评价的功能~可动态好评+差评+留言功能~ 南北极之间 web前端特效源码javascriptcss编程入门网页设计编程入门代码html
    bilibili在线视频演示地址：【web前端特效源码】使用HTMLCSS和JavaScript制作一个五星评价的功能！可动态好评+差评+留言功能！效果图：
  • 【前端实例代码】使用 HTML CSS 和 JavaScript 实现具有彩色发光霓虹灯悬停效果的icon图标|前端开发 网页制作 基础入门教程 南北极之间 web前端特效源码javascripthtmlcss网页设计编程入门代码编程入门
    b站视频演示效果：【web前端特效源码】使用HTMLCSS和JavaScript实现具有彩色发光霓虹灯悬停效果的icon图标|前端开发网页制作基础入门教程效果图：完整代码：【前端实例代码】使用HTMLCSS和JavaScript实现具有彩色发光霓虹灯悬停效果的icon图标|前端开发网页制作基础入门教程
  • 精选10款前端动画特效源码分享（附在线预览） 迂 幵 分享前端动画前端动画canva可画交互CSS动画SVG动画经验分享
    分享10款非常不错炫酷的前端特效源码其中包含css动画特效、js原生特效、svg特效等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源Canvas超空间粒子文本动画Canvas超空间粒子文本动画不仅仅只是运行出现下图动态的效果鼠标移入还有范围特效最终具体特效可点击在线预览进行查看在线预览CSS玻璃变形按钮悬停特效CSS玻璃变形按钮悬停特效按钮呈玻璃色同时
  • 前端炫酷特效合集 迂 幵 前端动画前端动画
    我们经常在抖音上看到一些前端很酷的特效，诸如：快叫你学编程的朋友给你写一个圣诞树，看着是不是很酷炫呢？其实只要有源码，你也可以拥有哦！跟大家分享多款前端特效源码，需要的朋友可以去在这里资源站—“源码”专栏进行预览下载，还可以在线演示哦！以后还会继续更新哦！圣诞相关：1.自带bgm圣诞气氛灯网页背景2.圣诞节日快乐星星元素动画特效MerryChristmas❤Aranja3.圣诞节贺卡网页动画特效4
  • 甄选前端源码分享（附效果图及在线演示） 迂 幵 动画分享前端前端源码资源分享资源共享动画特效代码干货每日学习
    甄选7款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源纯CSS绘制任天堂Switch纯CSS绘制的Switch手柄后期可加工用于网页版的游戏手柄以下图片只是简单的模型没有具体的动画效果最终动画特效可点击在线预览进行查看在线预览CSS繁星营地动画一款夜晚背景动画帐篷外透露着灯光星星闪
  • 前端炫酷动画特效分享（附在线预览） 迂 幵 前端动画分享前端动画特效源码分享前端代码资源共享前端学习每次分享
    分享7款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效以及小游戏等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源canvas鼠标粒子跟随动画canvas鼠标粒子跟随动画当鼠标移入背景区域时粒子动画会跟随鼠标移动当鼠标移出时粒子动画会随机方向运动以下图片只是简单的模型没有具体的动画效果最终动画特效可点击在线预览进行查看在线预览CS
  • 2024最新前端源码分享（附效果图及在线演示） 迂 幵 前端html5css3javascriptsvgcanvas动画干货分享
    分享10款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效以及小游戏等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源粒子文字动画特效基于canvas实现的粒子文字动画特效会来回切换设定的文字特效图片只能提供参考价值最终具体特效可点击在线预览进行查看在线预览纯CSS绘制招财猫纯CSS绘制招财猫动画招招手招来好运和钱财图片只能提供参考
  • 有趣的前端源码分享（附效果图及在线演示） 迂 幵 动画分享前端前端资源分享实用资源源码资源特效代码动画特效干货知识
    分享7款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效以及小游戏等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源纯CSS圣诞节动画圣诞节动画由圣诞礼物和圣诞树及圣诞老人等组合而成圣诞树会出现一闪一闪的光亮圣诞老人也会在窗口探望以及渐入渐出的文字祝福以下图片只是简单的模型没有具体的动画效果最终动画特效可点击在线预览进行查看在线预览
  • 2024前端炫酷源码分享（附效果图及在线演示） 迂 幵 前端动画分享前端html5源码分享干货分享canvas动画css3动画特效
    分享10款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效以及小游戏等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源GSAP-火箭动画特效GSAP火箭动画当氮气充足的情况下火箭会冲出并继续飞行图片只能提供参考价值最终具体特效可点击在线预览进行查看在线预览CSS骑小毛驴加载动画特效CSS骑车加载动画特效下方还有进度识别加载进程图片只
  • 圣诞节酷炫特效合集【含十几个HTML+CSS前端特效+34个桌面酷炫圣诞程序】 白大锅 花里胡哨htmlcsscanvas圣诞树特效圣诞节
    写在前面❤️源码获取：订阅后见文末❤️内容介绍：包含HTML+CSS等十几个圣诞特效；以及三十四个桌面酷炫圣诞树合集❤️订阅后所得如下：❤️HTML圣诞+桌面圣诞程序效果如下：下方展示代码仅举例其中几个所有效果源码及文件订阅后找博主获取即可css3圣诞雪人动画<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
  • 10款有趣的前端特效代码分享（附图文效果及在线预览） 迂 幵 分享前端动画前端html5css3javascriptsvg动画特效游戏
    分享10款非常有趣的前端特效源码其中包含css动画特效、js原生特效、svg特效以及小游戏等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源纯CSS绘制相机拍照动画纯CSS绘制相机拍照动画会有左右调整角度以及打开快门声的效果图片只能提供参考价值最终具体特效可点击在线预览进行查看在线预览CSS移动光源特效纯CSS绘制的聚光灯移动特效图片只能提供参考价值最终
  • 7款优雅的前端源码特效资源分享（附在线预览效果） 迂 幵 动画分享前端前端源码特效资源分享干货知识源码资源前端代码动画特效
    分享7款非常不错炫酷的前端特效源码其中包含css动画特效、js原生特效、svg特效等下面我会给出特效样式图或演示效果图但你也可以点击在线预览查看源码的最终展示效果及下载源码资源3D玻璃天气动画CSS实现的一款非常简洁大气的玻璃天气动画其中每一种天气都带有各自独有的气候特征效果也是非常不错的最终具体特效可点击在线预览进行查看在线预览SVG按钮悬停放电动画SVG按钮悬停放电动画当鼠标移入按钮区域会出现
  • 14款炫酷好玩的前端特效代码分享（附源码及演示效果） 迂 幵 前端分享动画前端特效代码前端特效canvas动画特效
    分享14款还不错的前端特效源码其中包含jQuery特效也包含svg特效以及可以用来摸鱼的几款小游戏等下面我会列出相对核心的代码同时你也可以点击预览获取查看该源码资源的最终展示效果以及下载该源码资源可变主题切换效果一款可变主题的切换特效你既可以点击右上角图标进行主题的切换同时也可以点击按钮及某个主题区域进行主题的切换预览获取核心代码可变主题切换效果VariableThemesCyclethrough
  • 10款趣味性不错(炫酷)的前端动画特效及源码(预览获取)分享（附源码） 迂 幵 前端动画分享前端游戏源码源码分享特效源码前端源码H5源码分享动画特效
    分享10款还不错的前端特效源码其中包含jQuery特效也包含svg特效以及可以用来摸鱼的几款小游戏等下面我会列出相对核心的代码同时你也可以点击预览获取查看该源码资源的最终展示效果以及下载该源码资源JQuery鼠标悬停切换视频背景这是一款jQuery鼠标悬浮渐变切换视频背景特效当你鼠标移动到123其中某个区域时就会播放某个区域内的视频背景还是很不错的毕竟难免开发中就会存在此需求预览获取核心代码鼠标悬
  • 8款前端特效动画及源码分享 迂 幵 分享动画前端前端前端特效canvas特效css特效3D特效源码特效
    3D立体数字时钟滚动特效基于Splitting制作的一款3D立体数字时钟滚动特效，创意感满满，可以下载使用。预览获取核心代码01234567890123456789:01234567890123456789:01234567890123456789米字格手写文字练习代码基于Canvas实现的一款米字手写贴，你可以自由的书写你喜欢的文字，同时还支持清除等功能，让你在娱乐中提升自己。预览获取核心代码清
  • 【web前端特效源码】使用 HTML&& CSS 实现鼠标悬停时放大图片动画效~适合初学者~超简单~ |前端开发|IT软件 南北极之间 web前端特效源码htmljavascriptcss网页设计编程入门代码前端实例代码
    b站视频演示效果：【web前端特效源码】使用HTML&&CSS实现鼠标悬停时放大图片动画效~适合初学者~超简单~|前端开发|IT软件效果图：完整代码：【web前端源码特效】CSS3鼠标悬浮过渡缩放效果*{box-sizing:border-box;}body{background-color:#2D5CFE;}h1{margin-left:5%;color:whi
  • 【web前端特效源码】使用HTML5+CSS3制作一个会动的loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 南北极之间 web前端特效源码html5css3javascriptit开发入门跳动的音乐效果
    b站视频演示效果：【web前端特效源码】使用HTML5+CSS3制作一个会动的loading加载动画效果~~适合初学者~超简单~|前端开发|IT软件效果图：完整代码：【前端实例代码】使用html+css+JavaScript实现跳动的音乐符号加载动画2*{margin:0;padding:0;box-sizing:border-box;}body{display:flex;min-height:1
  • web - 前端特效和博客 置二 零散要点纪要web-前端特效整理集前端特效
    参考文献RainMan-随笔前端一、CSS3动画名称用途链接阴影波纹特效1.元素hover效果2.突出表现效果http://www.jq22.com/code80横板导航菜单动画导航菜单http://www.jq22.com/code181横板导航菜单动画2导航菜单http://www.jq22.com/code195竖板导航菜单动画导航菜单http://www.jq22.com/code480圆
  • 【2023七夕】星河漫舞，七夕的璀璨之夜。分享：七夕表白的前端特效（附完整原代码+详细注释），情不知何起，却一往情深。愿天下有情人终成眷属 追光者♂ 前端七夕特效七夕节前端特效HTML特效CSS3HTML5
    满山遍野你的脸庞，唯有遗忘是最漫长。又一年的七夕了，今年，你还是孤单一人吗？……若是的话，咱们可是一个阵营的！！！作者主页：追光者♂个人简介：[1]计算机专业硕士研究生[2]2023年城市之星领跑者TOP1(哈尔滨)[3]2022年度博客之星人工智能领域TOP4
  • 前端特效（仿博客） 白鹭凡 css3jsh5html5
    效果蜘蛛网+点击向上飘不同颜色的爱心.heart{width:10px;height:10px;transform:rotate(45deg);margin-top:4px;margin-left:4px;}.heart::before{position:absolute;content:'';display:block;width:10px;height:10px;border-radius:5
  • 【前端特效篇】过渡与动画 MagnumHou CSS3前端开发网站搭建前端css3动画
    变形和动画都是前端开发过程中，用来提高用户体验的一种方式。增加一些动效，可以使页面看起来不那么枯燥无味。一、变形transformtransform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。变形都是相对于自己本身原来的位置进行转换，原来的位置还占位，只是视觉上的变化。这点来看和相对定位有点类似。1.12D变形2d中的坐标系：x表示正方向向右y表示正方向向下tra
  • html,js代码移植到vue项目上 江河地笑 干货满满vue.jsjavascripthtml
    对于我们这些学了一年左右的前端萌新来说，用好vue已经是很难得了，但是慢慢的我需要提高自己的技术，比如看了一些前端特效什么的，但是这些前端特效都是js,html的文件，我们无法直接利用这些文件，我们如何把这些移植到vue上，这是这篇文章所探讨的问题目录简单案例中级案例简单案例直接先上一个html,js的简单特效案例，一个小球自由落体并弹跳的特效代码如下Documentvarball={x:555,
  • 前端特效之毛玻璃-倾斜-日历 两个月亮 前端前端css特效vanilla-tiltdyCalendarJS
    前端特效之毛玻璃-倾斜-日历描述项目效果index.htmlindex.css描述项目描述开发语言HTML、JavaScript、CSS库dyCalendarJS、vanilla-tilt该项目中需要使用到的库有：dyCalendarJSvanilla-tilt.js是JavaScript中的一个平滑的3D倾斜库。vanilla-tiltdyCalendarJS是一个用于创建日历的JavaScri
  • 20款前端特效动画及源码 迂 幵 动画前端前端动画css3
    最近优化项目时看到一些实用的特效感觉还不错下面就分享给大家代码量过长的我就不展示了可以去在这里资源站源码部分预览下载1.Loading加载动画在canvas画布上，我们动态绘制许多多边形，这些多边形伴随着颜色的随机变化和旋转，形成了奇幻色彩的视觉效果，是一款非常炫酷的HTML5Loading动画特效。预览获取2.鼠标悬停背景变化动画基于CSS3的社交平台分享按钮，鼠标悬停在按钮上时可以产生变化的背
  • 【web前端特效源码】使用HTML5+CSS3制作一个会动的文字闪动动画效果~~适合初学者~超简单~ |前端开发|IT软件 南北极之间 html5css3javascript实例代码demo闪动文字效果
    b站视频演示效果：【web前端特效源码】使用HTML5+CSS3制作一个会动的文字闪动动画效果~~适合初学者~超简单~|前端开发|IT软件效果图：完整代码：挥舞文本加载动画*{margin:0;padding:0;border:0;box-sizing:border-box;}*before,*after{box-sizing:border-box;}html{width:100vw;height
  • 【程序人生】卡塔尔世界杯吉祥物python海龟绘图（附源代码），世界杯主题前端特效5个（附源码） 逆境清醒 pythonturtle绘图集锦python前端特效前端python源代码经验分享开发语言
    卡塔尔世界杯吉祥物python海龟绘图（附源代码）世界杯主题前端特效5个（附源码）程序人生本文目录：一、pythonturtle海龟绘图卡塔尔世界杯吉祥物（1）、世界杯吉祥物“Laeeb”绘制效果图（2）、代码演示方法和代码命令解释（3）、本机运行、将绘图动画打包发给别人（4）、我的“2022年卡塔尔世界杯吉祥物Laeeb”绘图完整源代码二、世界杯主题网页特效（1）、为透明png图片添加阴影特效（
  • 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发 南北极之间 javascript网页设计编程入门代码html5css3js拼图小游戏
    b站视频演示效果：【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~|前端开发|IT软件效果图：完整代码：【web前端源码特效】拼图游戏body{margin:0;padding:0;border:none;}#forPuzzle{border:none;left:0px;top:0px;
  • 【前端特效】程序员给你的专属告白，快来转发给你心爱的那个她吧！ 前端--末晨曦吖
    【前端特效】程序员给你的专属告白，快来转发给你心爱的那个她吧！点击打开视频讲解更加详细<div
  • 用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心） 逆境清醒 pythonpython开发语言经验分享
    活动地址：CSDN21天学习挑战赛用代码写出浪漫合集（爱心、玫瑰花）目录:一、前言二、用python、matplotlib、Matlab、java绘制爱心（1）爱心图形1（弧线型）（显示的文字写在代码里）（2）爱心图形2（直线型）（显示的文字写在代码里）（3）爱心图形3（弧线型）（通过输入方式显示文字）（4）用python绘制爱心树（5）用matplotlib绘制一颗2D的红心（6）三维爱心（7）
  • 前端，值得收藏的那些网站 小曲同学呀 前端前端javascriptcss
    当还在为页面普普通通而一筹莫展时，这些前端特效网站，值得拥有。（非常适合前端动画场景偏多的人士或者项目组。）今天给大家推荐一个网站51前端，js特效，html模板，应有尽有。1、51前端整体样子：JS特效：Html模板：各种代码示例：插件库：以后再也不用担心，到处找插件了。2、Tween.jsTweenJS是一个简单的JavaScript补间动画库。能够很好的和EaselJS库集成，但也不依赖或特
  • 数据采集高并发的架构应用 3golden .net
    问题的出发点：          最近公司为了发展需要，要扩大对用户的信息采集，每个用户的采集量估计约2W。如果用户量增加的话，将会大量照成采集量成3W倍的增长，但是又要满足日常业务需要，特别是指令要及时得到响应的频率次数远大于预期。       &n
  • 不停止 MySQL 服务增加从库的两种方式 brotherlamp linuxlinux视频linux资料linux教程linux自学
    现在生产环境MySQL数据库是一主一从，由于业务量访问不断增大，故再增加一台从库。前提是不能影响线上业务使用，也就是说不能重启MySQL服务，为了避免出现其他情况，选择在网站访问量低峰期时间段操作。  一般在线增加从库有两种方式，一种是通过mysqldump备份主库，恢复到从库，mysqldump是逻辑备份，数据量大时，备份速度会很慢，锁表的时间也会很长。另一种是通过xtrabacku
  • Quartz——SimpleTrigger触发器 eksliang SimpleTriggerTriggerUtilsquartz
    转载请出自出处：http://eksliang.iteye.com/blog/2208166 一.概述 SimpleTrigger触发器，当且仅需触发一次或者以固定时间间隔周期触发执行；   二.SimpleTrigger的构造函数 SimpleTrigger(String name, String group)：通过该构造函数指定Trigger所属组和名称； Simpl
  • Informatica应用（1） 18289753290 sqlworkflowlookup组件Informatica
    1.如果要在workflow中调用shell脚本有一个command组件，在里面设置shell的路径；调度wf可以右键出现schedule，现在用的是HP的tidal调度wf的执行。 2.designer里面的router类似于SSIS中的broadcast（多播组件）;Reset_Workflow_Var：参数重置 （比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要
  • python 获取图片验证码中文字 酷的飞上天空 python
    根据现成的开源项目 http://code.google.com/p/pytesser/改写 在window上用easy_install安装不上  看了下源码发现代码很少  于是就想自己改写一下   添加支持网络图片的直接解析   #coding:utf-8 #import sys #reload(sys) #sys.s
  • AJAX 永夜-极光 Ajax
    1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担   2.代码结构:    <html> <head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ...
  • 创业OR读研 随便小屋 创业
            现在研一，有种想创业的想法，不知道该不该去实施。因为对于的我情况这两者是矛盾的，可能就是鱼与熊掌不能兼得。                研一的生活刚刚过去两个月，我们学校主要的是
  • 需求做得好与坏直接关系着程序员生活质量 aijuans IT 生活
            这个故事还得从去年换工作的事情说起，由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司，专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发，从此苦逼的日子开始了。        系统背景：五月份就有同事前往甲方了解需求一直到6月份，后续几个月也完
  • 如何定义和区分高级软件开发工程师 aoyouzi
    在软件开发领域，高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置，但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为，单纯使用年限来划分开发人员存在问题，两个同样具有 10 年开发经验的开发人员可能大不相同。近日，他发表了一篇博文，根据开发者所能发挥的作用划分软件开发工程师的成长阶段。 　　初
  • Servlet的请求与响应 百合不是茶 servletget提交java处理post提交
      Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介     1,Http的请求方式(get  ,post);   客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法,  http的get方式 servlet就是都doGet(
  • web.xml配置详解之listener bijian1013 javaweb.xmllistener
    一.定义 <listener> <listen-class>com.myapp.MyListener</listen-class> </listener>   二.作用        该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响
  • Web页面性能优化（yahoo技术） Bill_chen JavaScriptAjaxWebcssYahoo
    1.尽可能的减少HTTP请求数 content 2.使用CDN server 3.添加Expires头(或者 Cache-control) server 4.Gzip 组件 server 5.把CSS样式放在页面的上方。 css 6.将脚本放在底部(包括内联的) javascript 7.避免在CSS中使用Expressions css 8.将javascript和css独立成外部文
  • 【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序 bit1129 mongodb
    游标   游标，简单的说就是一个查询结果的指针。游标作为数据库的一个对象，使用它是包括 声明 打开 循环抓去一定数目的文档直到结果集中的所有文档已经抓取完 关闭游标   游标的基本用法，类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档)，在获取一个文档集时，可以提供一个类似JDBC的FetchSize
  • ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法 白糖_ ORA-12514
    今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”，遂在网上找到了解决方案： ①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件，你会看到如下信息：   # listener.ora Network Configuration File: D:\database\Oracle\net
  • Eclipse 问题 A resource exists with a different case bozch eclipse
    在使用Eclipse进行开发的时候，出现了如下的问题： Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&
  • 编程之美-小飞的电梯调度算法 bylijinnan 编程之美
    public class AptElevator { /** * 编程之美 小飞 电梯调度算法 * 在繁忙的时间，每次电梯从一层往上走时，我们只允许电梯停在其中的某一层。 * 所有乘客都从一楼上电梯，到达某层楼后，电梯听下来，所有乘客再从这里爬楼梯到自己的目的层。 * 在一楼时，每个乘客选择自己的目的层，电梯则自动计算出应停的楼层。 * 问：电梯停在哪
  • SQL注入相关概念 chenbowen00 sqlWeb安全
    SQL Injection：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。 具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。 首先让我们了解什么时候可能发生SQ
  • [光与电]光子信号战防御原理 comsci 原理
          无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢?       我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下       根据光
  • oracle 11g新特性:Pending Statistics daizj oracledbms_stats
    oracle 11g新特性:Pending Statistics 转 从11g开始，表与索引的统计信息收集完毕后，可以选择收集的统信息立即发布，也可以选择使新收集的统计信息处于pending状态，待确定处于pending状态的统计信息是安全的，再使处于pending状态的统计信息发布，这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。 在 11g 之前的版本中，D
  • 快速理解RequireJs dengkane jqueryrequirejs
    RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能： 声明不同js文件之间的依赖 可以按需、并行、延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂。 在html中引入requirejs 在HTML中，添加这样的 <script> 标签： <script src="/path/to
  • C语言学习四流程控制if条件选择、for循环和强制类型转换 dcj3sjt126com c
    # include <stdio.h> int main(void) { int i, j; scanf("%d %d", &i, &j); if (i > j) printf("i大于j\n"); else printf("i小于j\n"); retu
  • dictionary的使用要注意 dcj3sjt126com IO
    NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys: user.user_id , @"id", user.username , @"username",
  • Android 中的资源访问(Resource) finally_m xmlandroidStringdrawablecolor
    简单的说，Android中的资源是指非代码部分。例如，在我们的Android程序中要使用一些图片来设置界面，要使用一些音频文件来设置铃声，要使用一些动画来显示特效，要使用一些字符串来显示提示信息。那么，这些图片、音频、动画和字符串等叫做Android中的资源文件。 在Eclipse创建的工程中，我们可以看到res和assets两个文件夹，是用来保存资源文件的，在assets中保存的一般是原生
  • Spring使用Cache、整合Ehcache 234390216 springcacheehcache@Cacheable
    Spring使用Cache            从3.1开始，Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的，其核心思想是这样的：当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中，等到下次利用同样的
  • 当druid遇上oracle blob(clob) jackyrong oracle
    http://blog.csdn.net/renfufei/article/details/44887371 众所周知，Oracle有很多坑, 所以才有了去IOE。 在使用Druid做数据库连接池后，其实偶尔也会碰到小坑，这就是使用开源项目所必须去填平的。【如果使用不开源的产品，那就不是坑，而是陷阱了，你都不知道怎么去填坑】 用Druid连接池，通过JDBC往Oracle数据库的
  • easyui datagrid pagination获得分页页码、总页数等信息 ldzyz007
    var grid = $('#datagrid');  var options = grid.datagrid('getPager').data("pagination").options;  var curr = options.pageNumber;  var total = options.total;  var max =
  • 浅析awk里的数组 nigelzeng 二维数组array数组awk
    awk绝对是文本处理中的神器，它本身也是一门编程语言，还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论，如何利用数组来帮助完成文本分析。   有这么一组数据：   abcd,91#31#2012-12-31 11:24:00 case_a,136#19#2012-12-31 11:24:00 case_a,136#23#2012-12-31 1
  • 搭建 CentOS 6 服务器(6) - TigerVNC rensanning centos
    安装GNOME桌面环境 # yum groupinstall "X Window System" "Desktop" 安装TigerVNC # yum -y install tigervnc-server tigervnc 启动VNC服务 # /etc/init.d/vncserver restart # vncser
  • Spring 数据库连接整理 tomcat_oracle springbeanjdbc
    1、数据库连接jdbc.properties配置详解 　　jdbc.url=jdbc:hsqldb:hsql://localhost/xdb 　　jdbc.username=sa 　　jdbc.password= 　　jdbc.driver=不同的数据库厂商驱动，此处不一一列举 　　接下来，详细配置代码如下： 　　 Spring连接池    
  • Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常 xp9802
    用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错      异常栈：java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常       导入包 jaxen-1.1-beta-6.jar 解决; &nb
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他