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

js 图片点击放大功能

2015-12-22 13:35 731 查看 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
<title>loading</title>
</head>
<body>
<a href="javascript:;" rel="http://www.zuixiaoyao.test/images/v2/index/header.jpg" id="fas" style="display:block;" onclick="creatediv(this)">
<img src="erweima.jpg" />
</a>
</body>
</html>
<script>
function getPos(element){
if ( arguments.length != 1 || element == null ) {
return null;
}
var offsetTop = element.offsetTop;
var offsetLeft = element.offsetLeft;
var offsetWidth = element.offsetWidth;
var offsetHeight = element.offsetHeight;
while( element = element.offsetParent ) {
offsetTop += element.offsetTop;
offsetLeft += element.offsetLeft;
}
return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
offsetWidth: offsetWidth, offsetHeight: offsetHeight };
}
function creatediv(elm){
var deld = document.getElementById('version_sz_h');
if(deld && deld.parentNode && deld.tagName != 'BODY'){
deld.parentNode.removeChild(deld);
}
var div = document.createElement('div');
var pos = getPos(elm);
div.id = 'version_sz_h';
div.style.position = 'absolute';
div.style.zIndex = 99999;
div.style.top = pos.absoluteTop +'px';
div.style.left = pos.absoluteLeft +'px';
div.style.width = '35px';
div.style.height = '35px';
var img = '<img src="loading.gif" width="35px" height="35px"/>';
div.innerHTML = img;
var image = new Image();
image.onload = function(){
var w = this.width;
var h = this.height;
var b = w/h;//>1 宽屏图片 <1 长形图片
div.innerHTML = '<img src="'+ elm.getAttribute('rel') +'" width="100%" height="100%" style="cursor:pointer;" id="hoverImg"/>';
var Lw = 0;
var Lh = 0;
var timer = setInterval(function(){
if(b >= 1){//宽屏
Lh += 10;
Lw += 10*b;
}else{
Lw += 10;
Lh += 10*b;
}
if((Lh+35) >= h && (Lw+35) >= w){
div.style.width = w + 'px';
div.style.height = h + 'px';
window.clearInterval(timer);
}else{
div.style.width = 35 + Lw +'px';
div.style.height = 35 + Lh +'px';
}
},10);
var imgBox = document.getElementById('hoverImg');
var flag = 1;
imgBox.onclick = function(){
if(flag){
var Lh = h;
var Lw = w;
var timer1 = setInterval(function(){
if(b >= 1){//宽屏
Lh -= 10;
Lw -= 10*b;
}else{
Lw -= 10;
Lh -= 10*b;
}
if(Lh <= 0 && Lw <= 0){
div.style.width = '0px';
div.style.height = '0px';
window.clearInterval(timer1);
if(div && div.parentNode && div.tagName != 'BODY'){
div.parentNode.removeChild(div);
}
}else{
div.style.width = Lw +'px';
div.style.height = Lh +'px';
}
},10);
flag = 0;
}
}
}
image.src = elm.getAttribute('rel');
document.body.appendChild(div);
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航