首页 > 代码库 > 手机网页：点击图片后，显示满屏的大图
手机网页：点击图片后，显示满屏的大图
手机网页：点击图片后，显示满屏的大图
竖版图片：直接充满屏幕。
横版图片：旋转后充满屏幕。
<!doctype html><html><head><meta charset="utf-8"><title></title></head><body><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script type="text/javascript">$(function(){ $("#img123").attr("data-w",$("#img123").width());//初始化 $("#img123").attr("data-h",$("#img123").height()); $("#img123").click(function(){ if( $(this).hasClass("img123") ){ $(this).removeClass("img123"); $(this).removeClass("rotate"); $("#fix_box").removeClass("fix-box"); $(this).width($(this).attr("data-w")); $(this).height($(this).attr("data-h")); $(this).css("left","0"); $(this).css("top","0"); }else{ $("#fix_box").addClass("fix-box"); var W=$(document).width(); var H=$(document).height(); var _w = parseFloat( $(this).attr("data-w") ); var _h = parseFloat( $(this).attr("data-h") ); if(_w>_h){ //宽大于高，旋转 $(this).addClass("img123"); $(this).addClass("rotate"); $(this).width(H).height(W); $(this).css({ "left":(H/2)*-1 + "px", "top":(W/2)*-1 + "px"}); }else{ //宽小于高，保持原状 $(this).addClass("img123"); $(this).width(W).height(H); $(this).css({ "left":(W/2)*-1 + "px", "top":(H/2)*-1 + "px"}); } } });});</script><style type="text/css">html,body{width:100%;height:100%;margin:0;padding:0;}#img123{width:100%;}.fix-box{position:fixed;left:50%;right:50%;top:50%;bottom:50%;width:1px;height:1px;}/*容器，定位于页面中心点，以便图片旋转1*/.img123{position:absolute;}.rotate{transform:rotate(90deg);}</style><div id="fix_box"><img src="http://a.hiphotos.baidu.com/image/w%3D310/sign=99a3e11b544e9258a63480efac83d1d1/c2fdfc039245d68844bfbbdba6c27d1ed21b240b.jpg" id="img123"> <!-- <img src="http://d.hiphotos.baidu.com/image/w%3D310/sign=7625ed5c71f082022d92973e7bfafb8a/267f9e2f07082838c45ed56bba99a9014c08f17a.jpg" id="img123"><img src="http://a.hiphotos.baidu.com/image/w%3D310/sign=99a3e11b544e9258a63480efac83d1d1/c2fdfc039245d68844bfbbdba6c27d1ed21b240b.jpg" id="img123"> --></div></body></html>
手机网页：点击图片后，显示满屏的大图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。