Skip to content

Z
ZhongWeiXin
Commit fc5758dd by 邓丽
Options

fixmargin

parent e02f1dfb
Showing with 53 additions and 52 deletions
dist/assets/js/slickIndex.js
......@@ -1477,6 +1477,18 @@
_.$slider.trigger('lazyLoaded', [_, image, imageSource]);
});
/*图片宽高自适应展示*/
var windowW = parseInt($(window).width());//获取浏览器的宽度
var windowH = parseInt($(window).height());//获取浏览器的宽度
var realWidth = imageToLoad.width;;
var realHeight = imageToLoad.height;;
if(windowW<640) {
var bi = (realHeight / realWidth).toFixed(2);
var Top = parseInt((windowH - parseInt(windowW * bi)) / 2);
image.attr('style', 'margin-top:' + Top+'px');
}
};
imageToLoad.onerror = function() {
......@@ -1492,18 +1504,6 @@
imageToLoad.src = imageSource;
/*图片宽高自适应展示*/
var windowW = parseInt($(window).width());//获取浏览器的宽度
var windowH = parseInt($(window).height());//获取浏览器的宽度
if(windowW<640) {
var realWidth;
var realHeight;
realWidth = imageToLoad.width;
realHeight = imageToLoad.height;
var bi = (realHeight / realWidth).toFixed(2);
var Top = parseInt((windowH - parseInt(windowW * bi)) / 2);
image.attr('style', 'margin-top:' + Top+'px');
}
});
}
......
dist/assets/js/slickPort.js
......@@ -1476,7 +1476,30 @@
});
_.$slider.trigger('lazyLoaded', [_, image, imageSource]);
});
/*图片宽高自适应展示*/
var windowW = parseInt($(window).width());//获取浏览器的宽度
var windowH = parseInt($(window).height());//获取浏览器的宽度
var realWidth = imageToLoad.width;
var realHeight = imageToLoad.height;
var Top=0;
if(windowW>640){
var bi=(realHeight / realWidth).toFixed(2);
var mH=parseInt(windowW * bi);
var Top=parseInt((windowH - realHeight)/2);
//如果真实的宽度大于浏览器的宽度就按照100%显示
if (realWidth >= windowW && realWidth >= realHeight) {
if(mH>windowH){
image.attr('style','max-height:'+windowH+'px;width:auto');
}else{
image.attr('style','margin-top:'+Top+'max-width:'+windowW+'px;height:auto');
}
}else if(realHeight >= windowH && realWidth < realHeight ){//如果小于浏览器的宽度按照原尺寸显示
image.attr('style','max-height:'+windowH+'px;width:auto;');
}else{
image.attr('style','margin-top:'+Top+'px;width:auto; height:auto;');
}
}
};
imageToLoad.onerror = function() {
......@@ -1491,34 +1514,6 @@
};
imageToLoad.src = imageSource;
/*图片宽高自适应展示*/
var windowW = parseInt($(window).width());//获取浏览器的宽度
var windowH = parseInt($(window).height());//获取浏览器的宽度
if(windowW>640){
var realWidth;
var realHeight;
realWidth = imageToLoad.width;
realHeight = imageToLoad.height;
var bi=(realHeight / realWidth).toFixed(2);
var mH=parseInt(windowW * bi);
var Top=parseInt((windowH - realHeight)/2);
//如果真实的宽度大于浏览器的宽度就按照100%显示
if (realWidth >= windowW && realWidth >= realHeight) {
if(mH>windowH){
image.attr('style','max-height:'+windowH+'px;width:auto');
}else{
image.attr('style','margin-top:'+Top+'max-width:'+windowW+'px;height:auto');
}
}else if(realHeight >= windowH && realWidth < realHeight ){//如果小于浏览器的宽度按照原尺寸显示
image.attr('style','max-height:'+windowH+'px;width:auto;');
}else{
image.attr('style','margin-top:'+Top+'px;width:auto; height:auto;');
}
}
});
}
......
dist/html/index.html
......@@ -131,21 +131,20 @@ var _h = parseInt($(window).height());//获取浏览器的宽度
$(".title h2").css("top",hTop);
$(".title p").css("top",pTop);
$("#portfolioDel div").css({
"width":'100%',
"height":_h
})
}
}
$(function(){
$(window).resize(function() {
indexImg();
})
$(window).resize(function() {
$(function(){
indexImg();
})
</script>
</body>
</html>
\ No newline at end of file
dist/html/portfolioDetail.html
......@@ -75,7 +75,7 @@
<ul class="slider lazy portfolioSiles" id="portfolioDel">
<li>
<div>
<img class="image" data-lazy="http://www.zhongweixing.com/media/gallery/15/283be29e043ee8fc7883dea1efec63da.png" />
<img class="image" data-lazy="http://www.zhongweixing.com/media/gallery/15/283be29e043ee8fc7883dea1efec63da.png" style="margin-top:100px;" />
</div>
</li>
<li>
......@@ -112,6 +112,9 @@
slidesToShow: 1,
slidesToScroll: 1,
speed: 500
/* init:function(){
$("img.image").attr("style","margin-top:100px;")
}*/
});
</script>
</body>
......
src/js/public.js
......@@ -59,7 +59,7 @@ $(function(){
/*图片懒加载*/
$("img.lazy").lazyload({
placeholder : "../images/transparent.gif",
placeholder : "./images/transparent.gif",
threshold:100,
effect: "fadeIn",
event: 'scroll',
......
src/pages/index.ejs
......@@ -83,21 +83,20 @@ var _h = parseInt($(window).height());//获取浏览器的宽度
$(".title h2").css("top",hTop);
$(".title p").css("top",pTop);
$("#portfolioDel div").css({
"width":'100%',
"height":_h
})
}
}
$(function(){
$(window).resize(function() {
indexImg();
})
$(window).resize(function() {
$(function(){
indexImg();
})
</script>
</body>
</html>
\ No newline at end of file
src/pages/portfolioDetail.ejs
......@@ -33,7 +33,7 @@
<ul class="slider lazy portfolioSiles" id="portfolioDel">
<li>
<div>
<img class="image" data-lazy="http://www.zhongweixing.com/media/gallery/15/283be29e043ee8fc7883dea1efec63da.png" />
<img class="image" data-lazy="http://www.zhongweixing.com/media/gallery/15/283be29e043ee8fc7883dea1efec63da.png" style="margin-top:100px;" />
</div>
</li>
<li>
......@@ -64,6 +64,9 @@
slidesToShow: 1,
slidesToScroll: 1,
speed: 500
/* init:function(){
$("img.image").attr("style","margin-top:100px;")
}*/
});
</script>
</body>
......
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