1、margin:0 auto介绍
margin:0 auto 设置对象上下间距为0,左右自动。
可拆分: margin:0 auto 0 auto(上下)
还可拆分为:margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;
如果不是零的时候,需要写成比如:20px auto 0 auto;
2.点击图片放大全屏(pc,手机端)
加入如下代码:
$.fn.ImgZoomIn = function () { var window_h = $(window).height(); var scroll_h = $(window).scrollTop(); bgstr = '<div id="ImgZoomInBG" style="position: absolute;filter:Alpha(Opacity=70); opacity:0.7;z-index: 10000;background-color: #000;display: none;"></div>'; imgstr = '<div style="334px;margin:0 auto;"><img id="ImgZoomInImage" src="' + $(this).attr('src')+'" style="cursor:pointer; display:none; position:absolute; z-index:10001;" /></div>'; if ($('#ImgZoomInBG').length < 1) { $('body').append(bgstr); } if ($('#ImgZoomInImage').length < 1) { $('body').append(imgstr); } else { $('#ImgZoomInImage').attr('src', $(this).attr('src')); } $('#ImgZoomInBG').css('top', scroll_h+'px'); $('#ImgZoomInBG').css('width', '100%'); $('#ImgZoomInBG').css('height', window_h+'px'); //$('#ImgZoomInImage').css('width', '100%'); $('#ImgZoomInImage').css('height', (window_h/2)+'px'); $('#ImgZoomInImage').css('top', (scroll_h+window_h/4)+'px'); $('#ImgZoomInBG').show(); $('#ImgZoomInImage').show(); }; // PC端 $(document).ready(function () { $(document).on('click','.item_img',function (){ $(this).ImgZoomIn(); $(document.body).css({ "overflow-x":"hidden", "overflow-y":"hidden" }); }); $(document).on('click','#ImgZoomInImage',function(){ $('#ImgZoomInImage').hide(); $('#ImgZoomInBG').hide(); $(document.body).css({ "overflow-x":"auto", "overflow-y":"auto" }); }); }); // 手机端 $(document).ready(function () { $(document).on('click','.item_img',function (t){ $(this).ImgZoomIn(); document.ontouchstart=function(){ return false; } t.preventDefault(); }); $(document).on('touchend','#ImgZoomInImage',function(t){ $('#ImgZoomInImage').hide(); $('#ImgZoomInBG').hide(); document.ontouchstart=function(){ return true; } t.preventDefault(); }); });
其中 item_img 是图片的class