html5 jq图片效果,HTML5 jQuery可左右滑动拖拉的照片处理前后对比界面
CSS
語(yǔ)言：
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;
}
總結(jié)
以上是生活随笔為你收集整理的html5 jq图片效果,HTML5 jQuery可左右滑动拖拉的照片处理前后对比界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 简述html语音的概念,语音共振的概念和
- 下一篇： joomla添加html,html –