<!DOCTYPE HTML>
<html>
<head>
<title>个人资料</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="weixin_personalImformation.css">
<link rel="stylesheet" href="animate.min.css">
</head>
<body>
<div id="pageone" >
<div class="clear"></div><!-- 留空 -->
<div class="content"><!-- 第一栏 begin -->
<ul>
<li class="big_li" >
<a class="uploadImage" onfocus="this.blur();" >
<span class="big_left " >头像</span>
<span class="middle " ></span>
</a>
<span class="big_right_head go_to_right"><img src="1408026085032.jpg" class="head_image" id="headImage"></img></span>
</li>
<li class="normal_li" id="changeName" >
<span class="normal_left">名字</span>
<span class="normal_right font go_to_right" id="name"> </span>
</li>
<li class="normal_li" id="changeNo">
<span class="normal_left">雀神号</span>
<span class="normal_right font go_to_right" id="no"> </span>
</li>
<li class="normal_li" id="moblieNo">
<span class="normal_left">手机</span>
<span class="normal_right font go_to_right" id="mobile"> </span>
</li>
</ul>
</div><!-- 第一栏 end -->
<div class="clear"></div>
<div class="content"><!-- 第二栏 begin -->
<ul>
<li class="big_li" id="mark">
<div style=" height: 80px;overflow: hidden;padding-right: 20px;">
<table style="height: 80px;width: 100%;"><tr>
<td style="width: 80px;">个性签名</td>
<td style="vertical-align:middle;height:80px;text-align: right;" class="font go_to_right" id="idvalue"></td>
</tr>
</table>
</div>
</li>
<li class="normal_li">
<span class="normal_left">胜败数</span>
<span class="normal_right font"><label id="winTimes"></label>胜<label id="loseTimes"></label>败</span>
</li>
<li class="normal_li">
<span class="normal_left">输赢数</span>
<span class="normal_right font">赢<label id="winMoney"></label>，输<label id="loseMoney"></label></span>
</li>
<li class="normal_li">
<span class="normal_left">参与场次</span>
<span class="normal_right font"><label id="totalTimes"></label></span>
</li>
<li class="normal_li">
<span class="normal_left">胜率</span>
<span class="normal_right font"><label id="recordPer"></label></span>
</li>
</ul>
</div><!-- 第二栏 end -->
<div class="large" id="largeContainer">
<img id="large_img" src="" />
</div>
<input type="file" name="fileImage" size="30" id="fileImage" accept="image/jpeg,image/png,image/gif,image/bmp" />
</div>
<!-- 修改名字 begin -->
<div class="edit_page" id="edit_name" >
<p>敢问阁下尊姓大名</p>
<input id="userName" class="input" value="" type="text" >
<a class="button" id="cancelName">取消</a>
<a class="button" id="saveName">保存</a>
</div>
<!-- 修改名字 end -->
<!-- 修改雀神名 begin -->
<div class="edit_page" id="edit_No" >
<p>一个吊炸天的雀神号即将诞生</p>
<input id="userNo" class="input" value="" type="text" >
<a class="button" id="cancelNo">取消</a>
<a class="button" id="saveNo">保存</a>
</div>
<div class="edit_page" id="edit_mobile" >
<p>敢问阁下，号码是啥子</p>
<input id="userMobile" class="input" value="" type="tel" >
<a class="button" id="cancelMobile">取消</a>
<a class="button" id="saveMobile">保存</a>
</div>
<div class="edit_page" id="edit_Mark" >
<p>做一个安静的美男子？</p>
<textarea id="userMark" class="input" style="padding:8px; " >
</textarea>
<a class="button" id="cancelMark">取消</a>
<a class="button" id="saveMark">保存</a>
</div>
<!-- 修改雀神名 end -->
<!-- 修改雀神名 begin -->
<!-- 修改雀神名 end -->
<script src="jquery.js"></script>
</body>
<script type="text/javascript">
var count = 0 ;
var loadImg = function(_id){
var zWin =$(window);
var wImage = $("#large_img");
if(count == 0){
var winWidth = zWin.width();
var winHeight = zWin.height();
var paddingLeft = parseInt((winWidth-46)/2);
var paddingTop = parseInt((winHeight-46)/2);
wImage.attr('src','ajax-loader.gif').css('padding-left',paddingLeft).css('padding-top',paddingTop);
}else{
count++;
}
// var imagsrc = _id.replace("/small","/big");
var imagsrc = _id;
console.log(imagsrc);
var imageObj = new Image();
imageObj.onload = function(){
var w = this.width;
var h = this.height;
var winWidth = zWin.width();
var winHeight = zWin.height();
var zpex = winWidth/winHeight;
var imgpex = w/h;
// console.log("图片长宽："+w+" "+h);
// console.log("屏幕长宽："+winWidth+" "+winHeight);
// console.log("比："+zpex+" "+imgpex);
var realw = winHeight * w/h;
var realh = winWidth * h/w;
var paddingLeft = parseInt((winWidth-realw)/2);
var paddingTop = parseInt((winHeight-realh)/2);
wImage.css('padding-left',0).css('padding-top',0);
if(zpex>imgpex){
//设置图片的高 竖图
wImage.attr('src',imagsrc).css('height',winHeight).css('padding-left',paddingLeft);
// console.log("one:zpex>imgpex");
}else{
//设置图片的宽 横图
wImage.attr('src',imagsrc).css('width',winWidth).css('padding-top',paddingTop);
console.log("two:zpex<imgpex");
}
}
imageObj.src = imagsrc;
$("#largeContainer").removeClass("animated bounceIn bounceOut");
$("#largeContainer").css({width:zWin.width(),height:zWin.height()}).addClass("animated bounceIn").show();
}
$("#headImage").bind("click", function(){
console.log($("#headImage").attr("src"));
loadImg($("#headImage").attr("src"));
});
$("#largeContainer").bind("click",function(){
$("#largeContainer").addClass("animated bounceOut");
});
</script>
</html>
图片点击全屏显示 +特效
5星 · 超过95%的资源 需积分: 49 172 浏览量
2015-01-05
16:29:21
上传
评论
收藏 91KB RAR 举报 
图片全屏.rar （6个子文件） 
图片全屏 
jquery.js 267KB
ajax-loader.gif 6KB animate.min.css 56KB
1408026085032.jpg 6KB
demo.html 6KB weixin_personalImformation.css 4KB
做个好码龙
- 粉丝: 0
- 资源: 6
- 1
- 2
前往页