html5 jq图片效果,HTML5 jQuery可左右滑动拖拉的照片处理前后对比界面

CSS

语言：

CSSSCSS

确定

/*CLEARFIX*/

body{margin: 0;}

.clearfix:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

.clearfix {

display: inline-block;

}

html[xmlns] .clearfix {

display: block;

}

* html .clearfix {

height: 1%;

}

/*GLOBALS*/

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

}

body,

hmtl {

background: url(http://subtlepatterns.com/patterns/zwartevilt.png);

border: 10px solid #f9375b;

font-family: 'Anton', sans-serif;

text-align: center;

color: #fff;

font-family: 'Shadows Into Light Two', cursive;

}

#wrapper {

width: 500px;

margin: 30px auto;

}

/*HEADER*/

#header {

margin-bottom: 20px;

}

h2 {

font-size: 15px;

}

h3 {

font-size: 12px;

margin-top: 30px;

}

a {

color: #f9375b;

padding: 0px 4px;

border-radius: 3px;

}

a:hover {

background: #f9375b;

color: #fff;

}

p {

margin-top: 20px;

font-size: 13px;

}

/*IMG*/

#img-container {

position: relative;

height: 603px;

box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 8px;

/*stop from highlighting*/

-webkit-user-select: none;

-moz-user-select: none;

-khtml-user-select: none;

-ms-user-select: none;

}

.img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 603px;

}

#img-top {

position: relative;

box-shadow: rgba(0, 0, 0, 0.5) 1px 0px 2px;

min-width: 3px;

max-width: 500px;

width: 50.5%;

}

#drag {

position: absolute;

width: 3px;

background: #f9375b;

height: 100%;

right: 0;

top: 0;

cursor: ew-resize;

box-shadow: rgba(0, 0, 0, 0.5) -1px 0px 2px;

}

#mask {

overflow: hidden;

width: 100%;

}

#arrows {

width: 60px;

color: #fff;

position: absolute;

top: 50%;

margin-top: -20px;

margin-left: -28px;

}

#arrows .fa {

line-height: 40px;

text-align: center;

width: 30px;

height: 40px;

background: #f9375b;

float: left;

}

#arrows .fa-arrow-right {

border-radius: 0px 5px 5px 0px;

}

#arrows .fa-arrow-left {

border-radius: 5px 0px 0px 5px;

}