Skip to content

Z
ZhongWeiXin
Commit 5a0ff56a by 邓丽
Options

imgauto

parent 849835ef
Showing with 285 additions and 128 deletions
dist/css/sprite.css
......@@ -18,61 +18,49 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C
*/
.icon-closeIco {
background-image: url(sprite.png);
background-position: -143px 0px;
background-position: 0px 0px;
width: 52px;
height: 52px;
}
.icon-closeIco2 {
background-image: url(sprite.png);
background-position: -195px -28px;
background-position: -97px -28px;
width: 26px;
height: 26px;
}
.icon-closeIco3 {
background-image: url(sprite.png);
background-position: -143px -52px;
background-position: -52px 0px;
width: 45px;
height: 45px;
}
.icon-closeSmall {
background-image: url(sprite.png);
background-position: -195px -54px;
background-position: -97px -54px;
width: 19px;
height: 20px;
}
.icon-facebook {
background-image: url(sprite.png);
background-position: -195px 0px;
background-position: -97px 0px;
width: 28px;
height: 28px;
}
.icon-instagram {
background-image: url(sprite.png);
background-position: -143px -97px;
background-position: 0px -52px;
width: 32px;
height: 32px;
}
.icon-leftIcon {
background-image: url(sprite.png);
background-position: -72px 0px;
width: 71px;
height: 141px;
}
.icon-pinterest {
background-image: url(sprite.png);
background-position: 0px -142px;
background-position: -32px -52px;
width: 32px;
height: 32px;
}
.icon-rightIcon {
background-image: url(sprite.png);
background-position: 0px 0px;
width: 72px;
height: 142px;
}
.icon-tuite {
background-image: url(sprite.png);
background-position: -32px -142px;
background-position: -64px -52px;
width: 32px;
height: 26px;
}
dist/css/sprite.png
dist/css/sprite.png

8.18 KB | W: | H:

dist/css/sprite.png

4.97 KB | W: | H:

dist/css/sprite.png
dist/css/sprite.png
dist/css/sprite.png
dist/css/sprite.png
  • 2-up
  • Swipe
  • Onion skin
dist/css/style.css
......@@ -20,61 +20,49 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C
*/
.icon-closeIco {
background-image: url(sprite.png);
background-position: -143px 0px;
background-position: 0px 0px;
width: 52px;
height: 52px;
}
.icon-closeIco2 {
background-image: url(sprite.png);
background-position: -195px -28px;
background-position: -97px -28px;
width: 26px;
height: 26px;
}
.icon-closeIco3 {
background-image: url(sprite.png);
background-position: -143px -52px;
background-position: -52px 0px;
width: 45px;
height: 45px;
}
.icon-closeSmall {
background-image: url(sprite.png);
background-position: -195px -54px;
background-position: -97px -54px;
width: 19px;
height: 20px;
}
.icon-facebook {
background-image: url(sprite.png);
background-position: -195px 0px;
background-position: -97px 0px;
width: 28px;
height: 28px;
}
.icon-instagram {
background-image: url(sprite.png);
background-position: -143px -97px;
background-position: 0px -52px;
width: 32px;
height: 32px;
}
.icon-leftIcon {
background-image: url(sprite.png);
background-position: -72px 0px;
width: 71px;
height: 141px;
}
.icon-pinterest {
background-image: url(sprite.png);
background-position: 0px -142px;
width: 33px;
height: 33px;
}
.icon-rightIcon {
background-image: url(sprite.png);
background-position: 0px 0px;
width: 72px;
height: 142px;
background-position: -32px -52px;
width: 32px;
height: 32px;
}
.icon-tuite {
background-image: url(sprite.png);
background-position: -32px -142px;
background-position: -64px -52px;
width: 32px;
height: 26px;
}
......@@ -475,7 +463,7 @@ body {
height: 700px;
width: 200px;
position: absolute;
top: 0px;
top: 150px;
z-index: 10;
-webkit-transition: none;
transition: none;
......@@ -704,9 +692,9 @@ a.cd-read-more:hover {
color: #8a8a8a;
}
@media only screen and (min-width: 640px) {
.marginTop {
margin-top: 160px;
}
/* .marginTop{
margin-top:160px;
}*/
.am-with-topbar-fixed-top {
padding-top: 200px;
}
......@@ -1037,7 +1025,7 @@ a.cd-read-more:hover {
.imgIntro {
color: #fff;
position: absolute;
top: 0px;
top: 100px;
left: 3%;
z-index: 10;
width: 20%;
......@@ -1305,11 +1293,17 @@ a.cd-read-more:hover {
display: block;
margin: 0px auto;
}
.am-slider .portfolioSiles img.crossImg {
max-width: 100%;
}
.am-slider .portfolioSiles img.verticalImg {
max-height: 100%;
}
}
@media (min-width: 1150px) and (max-width: 1530px) {
.marginTop {
margin-top: 110px;
}
/* .marginTop{
margin-top:110px;
}*/
.am-with-topbar-fixed-top {
padding-top: 150px;
}
......@@ -1383,9 +1377,9 @@ a.cd-read-more:hover {
}
}
@media (min-width: 640px) and (max-width: 1150px) {
.marginTop {
margin-top: 100px;
}
/* .marginTop{
margin-top:100px;
}*/
.am-with-topbar-fixed-top {
padding-top: 100px;
}
......@@ -1547,11 +1541,11 @@ a.cd-read-more:hover {
}
@media (min-width: 640px) and (max-width: 850px) {
.am-with-topbar-fixed-top {
/* .marginTop{
margin-top:100px;
}*/
padding-top: 100px;
}
.am-with-topbar-fixed-top .marginTop {
margin-top: 100px;
}
.am-topbar-brand {
width: 26%;
text-align: center;
......@@ -1883,8 +1877,8 @@ a.cd-read-more:hover {
}
/*index页面*/
.mobileTop {
margin-top: 46%;
max-height: 300px;
/* margin-top: 46%;*/
/* max-height: 300px;*/
overflow: hidden;
}
.mobileTop #entry {
......@@ -1897,7 +1891,7 @@ a.cd-read-more:hover {
z-index: 10;
width: 100%;
text-align: center;
top: 100px;
top: 250px;
}
.mobileTop .title h2 {
font-size: 18px;
......@@ -2167,11 +2161,6 @@ a.cd-read-more:hover {
display: none;
}
}
@media (min-width: 300px) and (max-width: 640px) {
.mobileTop .title {
top: 80px;
}
}
.am-dimmer {
background-color: rgba(0, 0, 0, 0.5);
}
dist/html/index.html
......@@ -57,30 +57,30 @@
</div>
<ul class="am-slides indexSlide" id="portfolioDel">
<li>
<div class="">
<div>
<img src="../images/testImg1.png" />
</div>
</li>
<li>
<div class="">
<div>
<img src="../images/testImg4.png" />
</div>
</li>
<li>
<div class="">
<div>
<img src="../images/testImg2.png" />
</div>
</li>
<!-- <li>
<li>
<div>
<img src="../images/testImg31.png" />
<img src="../images/testImg3.png" />
</div>
</li>
<li>
<div>
<img src="../images/testImg41.png" />
<img src="../images/testImg4.png" />
</div>
</li>-->
</li>
</ul>
</div>
</div>
......@@ -103,5 +103,31 @@
controlNav: false // Boolean: 是否创建控制点
});
</script>
<script>
var _w = parseInt($(window).width());//获取浏览器的宽度
var _h = parseInt($(window).height());//获取浏览器的宽度
$(function(){
if(_w<=640) {
$("#portfolioDel").find("img").each(function (i) {
var img = $(this);
var realWidth;
var realHeight;
var marginT=parseInt((_h -$(".title").height())/2);
$(".title").css("top",marginT);
$("<img/>").attr("src", $(img).attr("src")).load(function () {
realWidth = this.width;
realHeight = this.height;
var bi=(realHeight/realWidth).toFixed(2);
var Top = parseInt((_h - parseInt(_w*bi))/2);
$(img).css({
"margin-top":Top,
"width":'100%',
"height":"auto"
});
});
});
}
})
</script>
</body>
</html>
\ No newline at end of file
dist/html/portfolioDetail.html
......@@ -74,6 +74,31 @@
<img src="../images/testImg1.png" />
</div>
</li>
<li>
<div>
<img src="../images/testImg6.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg8.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg7.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg10.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg11.jpg" />
</div>
</li>
</ul>
</div>
</div>
......@@ -91,5 +116,57 @@
smoothHeight: true
});
</script>
<script>
function pictureAuto(){
var _w = parseInt($(window).width());//获取浏览器的宽度
var _h = parseInt($(window).height());//获取浏览器的宽度
if(_w>640){
$("#portfolioDel img").each(function (i) {
var img = $(this);
var realWidth;
var realHeight;
$("<img/>").attr("src", $(img).attr("src")).load(function () {
realWidth = this.width;
realHeight = this.height;
var bi=(realHeight/realWidth).toFixed(2);
var mH=parseInt(_w*bi);
var Top=parseInt((_h-realHeight)/2);
console.log(_w);
//如果真实的宽度大于浏览器的宽度就按照100%显示
if (realWidth >= _w && realWidth >= realHeight) {
if(mH>_h){
$(img).css({
"max-height": _h,
"width": "auto"
});
}else{
$(img).css({
"max-width": _w,
"height":"auto"
});
}
}else if(realHeight >= _h && realWidth < realHeight ){//如果小于浏览器的宽度按照原尺寸显示
$(img).css({
"max-height": _h,
"width": "auto"
});
}else{
$(img).css({
"width": realWidth,
"height":realHeight,
'margin-top':Top
});
}
});
});
}
}
$(function(){
pictureAuto();
})
$(window).resize(function() {
pictureAuto();
})
</script>
</body>
</html>
\ No newline at end of file
dist/images/testImg10.jpg 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
src/images/testImg10.jpg 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
src/less/common/sprite.css
......@@ -18,61 +18,49 @@ To change `display` (e.g. `display: inline-block;`), we suggest using a common C
*/
.icon-closeIco {
background-image: url(sprite.png);
background-position: -143px 0px;
background-position: 0px 0px;
width: 52px;
height: 52px;
}
.icon-closeIco2 {
background-image: url(sprite.png);
background-position: -195px -28px;
background-position: -97px -28px;
width: 26px;
height: 26px;
}
.icon-closeIco3 {
background-image: url(sprite.png);
background-position: -143px -52px;
background-position: -52px 0px;
width: 45px;
height: 45px;
}
.icon-closeSmall {
background-image: url(sprite.png);
background-position: -195px -54px;
background-position: -97px -54px;
width: 19px;
height: 20px;
}
.icon-facebook {
background-image: url(sprite.png);
background-position: -195px 0px;
background-position: -97px 0px;
width: 28px;
height: 28px;
}
.icon-instagram {
background-image: url(sprite.png);
background-position: -143px -97px;
background-position: 0px -52px;
width: 32px;
height: 32px;
}
.icon-leftIcon {
background-image: url(sprite.png);
background-position: -72px 0px;
width: 71px;
height: 141px;
}
.icon-pinterest {
background-image: url(sprite.png);
background-position: 0px -142px;
background-position: -32px -52px;
width: 32px;
height: 32px;
}
.icon-rightIcon {
background-image: url(sprite.png);
background-position: 0px 0px;
width: 72px;
height: 142px;
}
.icon-tuite {
background-image: url(sprite.png);
background-position: -32px -142px;
background-position: -64px -52px;
width: 32px;
height: 26px;
}
src/less/style.less
......@@ -105,7 +105,7 @@ body{
height: 700px;
width: 200px;
position: absolute;
top: 0px;
top:150px;
z-index: 10;
-webkit-transition: none;
transition: none;
......@@ -339,9 +339,9 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
}
@media only screen and (min-width: 640px){
.marginTop{
/* .marginTop{
margin-top:160px;
}
}*/
.am-with-topbar-fixed-top {
padding-top: 200px;
}
......@@ -680,7 +680,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
.imgIntro{
color: #fff;
position: absolute;
top:0px;
top:100px;
left: 3%;
z-index: 10;
width: 20%;
......@@ -705,10 +705,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
overflow: auto;
}
}
/* #entry{
width:100%;
position: absolute;
}*/
.bgImg{
position: absolute;
top: 0;
......@@ -727,7 +723,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
top: 43%;
width: 100%;
text-align: center;
/* background: rgba(0,0,0,0.2);*/
h2{
font-size: 2.8rem;
line-height: 30px;
......@@ -736,9 +731,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
letter-spacing: 6px;
word-spacing: 6px;
font-weight: 400;
width:100%;
/* position: absolute;
top: 43%*/;
width:100%;/;
}
p{
font-size: 2.0rem;
......@@ -746,8 +739,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
word-spacing: 6px;
letter-spacing: 2px;
width:100%;
/* position: absolute;
top: 50%;*/
a{
color: #c9c9c9;
}
......@@ -951,11 +942,14 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
display: block;
margin: 0px auto;
}
.am-slider .portfolioSiles img.crossImg{
max-width:100%;
}
.am-slider .portfolioSiles img.verticalImg{
max-height:100%;
}
}
@media (min-width: 1150px) and (max-width: 1530px){
.marginTop{
margin-top:110px;
}
.am-with-topbar-fixed-top {
padding-top: 150px;
}
......@@ -1036,9 +1030,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
}
@media (min-width: 640px) and (max-width:1150px){
.marginTop{
margin-top:100px;
}
.am-with-topbar-fixed-top {
padding-top: 100px;
}
......@@ -1208,9 +1199,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
}
@media (min-width: 640px) and (max-width:850px){
.am-with-topbar-fixed-top {
.marginTop{
margin-top:100px;
}
padding-top: 100px;
}
.am-topbar-brand {
......@@ -1262,7 +1250,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
color: #eee;
line-height: 20px;
word-spacing: 1px;
/* height: 500px;*/
overflow: auto;
}
}
......@@ -1553,8 +1540,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
}
/*index页面*/
.mobileTop{
margin-top: 46%;
max-height: 300px;
overflow: hidden;
#entry{
width:100%;
......@@ -1566,7 +1551,7 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
z-index: 10;
width: 100%;
text-align: center;
top:100px;
top:250px;
h2{
font-size: 18px;
word-spacing: 2px;
......@@ -1841,9 +1826,6 @@ a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
}
}
@media (min-width: 300px) and (max-width: 640px){
.mobileTop .title{
top: 80px;
}
}
.am-dimmer {
background-color: rgba(0,0,0,0.5);
......
src/pages/index.ejs
......@@ -23,30 +23,30 @@
</div>
<ul class="am-slides indexSlide" id="portfolioDel">
<li>
<div class="">
<div>
<img src="../images/testImg1.png" />
</div>
</li>
<li>
<div class="">
<div>
<img src="../images/testImg4.png" />
</div>
</li>
<li>
<div class="">
<div>
<img src="../images/testImg2.png" />
</div>
</li>
<!-- <li>
<li>
<div>
<img src="../images/testImg31.png" />
<img src="../images/testImg3.png" />
</div>
</li>
<li>
<div>
<img src="../images/testImg41.png" />
<img src="../images/testImg4.png" />
</div>
</li>-->
</li>
</ul>
</div>
</div>
......@@ -63,5 +63,31 @@
controlNav: false // Boolean: 是否创建控制点
});
</script>
<script>
var _w = parseInt($(window).width());//获取浏览器的宽度
var _h = parseInt($(window).height());//获取浏览器的宽度
$(function(){
if(_w<=640) {
$("#portfolioDel").find("img").each(function (i) {
var img = $(this);
var realWidth;
var realHeight;
var marginT=parseInt((_h -$(".title").height())/2);
$(".title").css("top",marginT);
$("<img/>").attr("src", $(img).attr("src")).load(function () {
realWidth = this.width;
realHeight = this.height;
var bi=(realHeight/realWidth).toFixed(2);
var Top = parseInt((_h - parseInt(_w*bi))/2);
$(img).css({
"margin-top":Top,
"width":'100%',
"height":"auto"
});
});
});
}
})
</script>
</body>
</html>
\ No newline at end of file
src/pages/portfolioDetail.ejs
......@@ -40,6 +40,31 @@
<img src="../images/testImg1.png" />
</div>
</li>
<li>
<div>
<img src="../images/testImg6.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg8.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg7.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg10.jpg" />
</div>
</li>
<li>
<div>
<img src="../images/testImg11.jpg" />
</div>
</li>
</ul>
</div>
</div>
......@@ -51,5 +76,57 @@
smoothHeight: true
});
</script>
<script>
function pictureAuto(){
var _w = parseInt($(window).width());//获取浏览器的宽度
var _h = parseInt($(window).height());//获取浏览器的宽度
if(_w>640){
$("#portfolioDel img").each(function (i) {
var img = $(this);
var realWidth;
var realHeight;
$("<img/>").attr("src", $(img).attr("src")).load(function () {
realWidth = this.width;
realHeight = this.height;
var bi=(realHeight/realWidth).toFixed(2);
var mH=parseInt(_w*bi);
var Top=parseInt((_h-realHeight)/2);
console.log(_w);
//如果真实的宽度大于浏览器的宽度就按照100%显示
if (realWidth >= _w && realWidth >= realHeight) {
if(mH>_h){
$(img).css({
"max-height": _h,
"width": "auto"
});
}else{
$(img).css({
"max-width": _w,
"height":"auto"
});
}
}else if(realHeight >= _h && realWidth < realHeight ){//如果小于浏览器的宽度按照原尺寸显示
$(img).css({
"max-height": _h,
"width": "auto"
});
}else{
$(img).css({
"width": realWidth,
"height":realHeight,
'margin-top':Top
});
}
});
});
}
}
$(function(){
pictureAuto();
})
$(window).resize(function() {
pictureAuto();
})
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment