您的位置：首页 > Web前端 > JavaScript

js模仿新浪微博查看图片放大缩小

2013-04-27 21:53 330 查看

自己写的，不是很好

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
.small{
width:150px;
height:150px;
text-align:center;
border:1px solid #ccc;
border-radius:3px;
background-color:#F4F4F4;
margin:0 auto;
}
.big{
width:auto;
height:auto;
text-align:center;
border:1px solid #ccc;
border-radius:3px;
background-color:#F4F4F4;
max-width:560px;
}
.show_s{
cursor: url("http://cdn.wolonge.com/upload/big.cur"), pointer;
padding:15px 0;
}
.show_b{
padding:15px 0;
cursor: url("http://cdn.wolonge.com/upload/small.cur"), pointer;
}
#hid{
height:30px;
line-height:30px;
text-align:left;
padding-left:30px;
}
#hid a{
text-decoration:none;
}
</style>
<script type="text/javascript">

function showbig(){
var b_div = document.getElementById("out");
var b_img = document.getElementById("c_img");
var info = document.getElementById("hid");
b_img.style.maxWidth="520px";
b_img.style.maxHeight="none";
b_img.className = b_img.className+" show_b";
b_div.className = b_div.className+" big";
if(!+"\v1"){
b_img.setAttribute("onclick",function (){showsmall()});
}else{
b_img.setAttribute("onclick","showsmall()");
}
info.style.display="block";
};
function showsmall(){
var b_div = document.getElementById("out");
var b_img = document.getElementById("c_img");
var info = document.getElementById("hid");
b_img.style.maxWidth="120px";
b_img.style.maxHeight="120px";
b_img.className ="show_s";
b_div.className ="small";
if(!+"\v1"){
b_img.setAttribute("onclick",function (){showbig()});
}else{
b_img.setAttribute("onclick","showbig()");
}
info.style.display="none";
};
</script>
</head>
<body>
<div id="out" class="small">
<p id="hid" style="display:none">
<a href="void(0)"< /span> onclick="showsmall()">收起</a>
<a href="goods_1365401246.jpg" target="_blank">查看大图</a>
</p>
<img id="c_img" src="goods_1365401246.jpg" style="max-width: 120px; max-height: 120px;" onclick="showbig()" class="show_s" alt="" />
</div>
</body>
</html>

本文出自 “陈辉” 博客，请务必保留此出处http://chenhuixfyy.blog.51cto.com/6136934/1188656

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航