希望实现像微博图片一样功能,点击小图时显示大图,但是现在第一次加载小图时有闪烁现象,之后点击都正常,看微博图片没有这种闪烁现象,好像当鼠标移动到小图时就加载大图,所以就点击时就不会闪烁
不知道是怎么实现。
我自己用延迟图片的方式加载,但是不行,不知道为什么,希望大虾们帮帮忙。代码如下<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".image").find('img').click(function() {
bind_image($(this)[0]);
});
$("img").lazyload('click');
$(".image").find('img').hover(function(){
$("img").lazyload();
}, function(){});
});
function bind_image(obj)
{
var narrow = $(obj).next().hasClass('narrow');
if ( ! narrow)
{
$(obj).after('<img src="http://testv.pp.cc/static/img/index_big.png" class="narrow"/>');
}
$(obj).hide();
$(this).parent().css("width", $(this).width());
$(obj).next().show();
$(obj).next().click(function() {
$(this).hide();
$(this).prev().show();
});
}
</script>
<div class="image">
<img src="http://testv.pp.cc/static/img/index_small.png">
</div>
不知道是怎么实现。
我自己用延迟图片的方式加载,但是不行,不知道为什么,希望大虾们帮帮忙。代码如下<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".image").find('img').click(function() {
bind_image($(this)[0]);
});
$("img").lazyload('click');
$(".image").find('img').hover(function(){
$("img").lazyload();
}, function(){});
});
function bind_image(obj)
{
var narrow = $(obj).next().hasClass('narrow');
if ( ! narrow)
{
$(obj).after('<img src="http://testv.pp.cc/static/img/index_big.png" class="narrow"/>');
}
$(obj).hide();
$(this).parent().css("width", $(this).width());
$(obj).next().show();
$(obj).next().click(function() {
$(this).hide();
$(this).prev().show();
});
}
</script>
<div class="image">
<img src="http://testv.pp.cc/static/img/index_small.png">
</div>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>新建网页 1</title>
<style type="text/css" media="screen">
div#PreviewBox{
position:absolute;
padding-left:6px;
display: none;
Z-INDEX:2006;
}
div#PreviewBox span{
width:7px;
height:13px;
position:absolute;
left:0px;
top:9px;
background:url() 0 0 no-repeat;
}
div#PreviewBox div.Picture{
float:left;
border:1px #666 solid;
background:#FFF;
}
div#PreviewBox div.Picture div{
border:4px #e8e8e8 solid;
}
div#PreviewBox div.Picture div a img{
margin:19px;
border:1px #b6b6b6 solid;
display: block;
max-height: 250px;
max-width: 250px;
}
</style>
</head>
<body>
<script>
var maxWidth=250;
var maxHeight=250;
function getPosXY(a,offset) {
var p=offset?offset.slice(0):[0,0],tn;
while(a) {
tn=a.tagName.toUpperCase();
if(tn=='IMG') {
a=a.offsetParent;continue;
}
p[0]+=a.offsetLeft-(tn=="DIV"&&a.scrollLeft?a.scrollLeft:0);
p[1]+=a.offsetTop-(tn=="DIV"&&a.scrollTop?a.scrollTop:0);
if(tn=="BODY")
break;
a=a.offsetParent;
}
return p;
}
function checkComplete() {
if(checkComplete.__img&&checkComplete.__img.complete)
checkComplete.__onload();
}
checkComplete.__onload=function() {
clearInterval(checkComplete.__timeId);
var w=checkComplete.__img.width;
var h=checkComplete.__img.height;
if(w>=h&&w>maxWidth) {
previewImage.style.width=maxWidth+'px';
}
else if(h>=w&&h>maxHeight) {
previewImage.style.height=maxHeight+'px';
}
else {
previewImage.style.width=previewImage.style.height='';
}
previewImage.src=checkComplete.__img.src;previewUrl.href=checkComplete.href;checkComplete.__img=null;
}
function showPreview(e) {
hidePreview (e);
previewFrom=e.target||e.srcElement;
previewImage.src=loadingImg;
previewImage.style.width=previewImage.style.height='';
previewTimeoutId=setTimeout('_showPreview()',500);
checkComplete.__img=null;
}
function hidePreview(e) {
if(e) {
var toElement=e.relatedTarget||e.toElement;
while(toElement) {
if(toElement.id=='PreviewBox')
return;
toElement=toElement.parentNode;
}
}
try {
clearInterval(checkComplete.__timeId);
checkComplete.__img=null;
previewImage.src=null;
}
catch(e) {}
clearTimeout(previewTimeoutId);
previewBox.style.display='none';
}
function _showPreview() {
checkComplete.__img=new Image();
if(previewFrom.tagName.toUpperCase()=='A')
previewFrom=previewFrom.getElementsByTagName('img')[0];
var largeSrc=previewFrom.getAttribute("large-src");
var picLink=previewFrom.getAttribute("pic-link");
if(!largeSrc)
return;
else {
checkComplete.__img.src=largeSrc;
checkComplete.href=picLink;
checkComplete.__timeId=setInterval("checkComplete()",20);
var pos=getPosXY(previewFrom,[106,26]);
previewBox.style.left=pos[0]+'px';
previewBox.style.top=pos[1]+'px';
previewBox.style.display='block';
}
}
</script>
<div id="PreviewBox" onmouseout="hidePreview(event);">
<div class="Picture" onmouseout="hidePreview(event);">
<span></span>
<div>
<a id="previewUrl" href="javascript:void(0)" target="_blank">caiying2007<img oncontextmenu="return(false)" id="PreviewImage" src="about:blank" border="0" onmouseout="hidePreview(event);" /></a>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var previewBox = document.getElementById('PreviewBox');
var previewImage = document.getElementById('PreviewImage');
var previewUrl = document.getElementById('previewUrl');
var previewFrom = null;
var previewTimeoutId = null;
var loadingImg = 'http://img.taobao.com/2k6/sys/list/loading.gif';
</script>
<a href="####" onmouseover='showPreview(event);' onmouseout='hidePreview(event);'>
<img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CIzU1qighKqphQEQyAEYvQEyCJXvZrbNiPpO" alt="" large-src="http://pagead2.googlesyndication.com/pagead/imgad?id=CPPis6646vaWqgEQrAIY7wEyCPL_W8tnwBVd" pic-link="http://bbs.blueidea.com/thread-2784770-1-1.html" border="0" width="100"/></a>
</body>
</html>这个是淘宝鼠标移到小图时展现大图时的代码,看下对你可有帮助
我觉得你要大小图的切换,在微博上我记得是有一个加载等待吧,就是一个gif的旋转,如果加载成功了就替换掉原来的image!
是的,就是加载延迟,不知道微博是怎么做到的,用jquery lazyload延迟加载插件也实现不了
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".image > a").each(function(){
$(this).find("img").hover(function(){
$(this).addClass("hover");
}, function(){
$(this).removeClass("hover");
});
$(this).click(function(){
var img_src = $(this).find('img').attr("src");
$(this).find('img').attr("src", $(this).attr("href"));
$(this).attr("href", img_src);
return false;
});
});
});
</script>
<div class="image">
<a href="http://testv.pp.cc/static/img/index_big.png"><img src="http://testv.pp.cc/static/img/index_small.png"></a>
</div>仿腾讯微博做的
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".image > a").each(function(){
$(this).find("img").hover(function(){
$(this).addClass("hover");
}, function(){
$(this).removeClass("hover");
});
$(this).click(function(){
var img_src = $(this).find('img').attr("src");
$(this).find('img').attr("src", $(this).attr("href"));
$(this).parent().css("width", $(this).find('img').width());
$(this).attr("href", img_src);
return false;
});
});
});
</script>
<div class="image">
<a href="http://testv.pp.cc/static/img/index_big.png"><img src="http://testv.pp.cc/static/img/index_small.png"></a>
</div>我是这么写的,但是第一次是宽度是不对的,不知道为什么