我的悬停效果会在Google Chrome中加载图片之前显示灰色区域

时间：2012-06-22 07:40:19

标签： javascript html css javascript-events cross-browser

我是一名网络开发人员，很快就推出了一个网站，事实上，我已经对图像大拇指做了悬停效果，首先显示一个放大的小拇指，然后立即显示大拇指，两者都是相同的尺寸，所以效果是首先你看到一个blury图像，然后是完整的图像。 它在IE，Opera和Firefox中运行良好，但在谷歌Chrome上，而不是小拇指放大，它显示灰色屏幕，它让我发疯。 我到处搜索，但无济于事。

这是我使用的javascript函数：

function trailOn2(thumbimg,imgtitle,username,imgid,imgsize,credit,level,thw,thh,smallmedium,smallThumbPath){
var smallmedium = (smallmedium == null) ? 0 : smallmedium;
var isinstore = 0;
if (thumbimg.indexOf("storeimages/item") >= 0) {
    isinstore = 1;
}
switch(smallmedium)
{
    case 1:
        var thumbimgprev = thumbimg.replace('/thumbs/400x149', '/thumbs/142x52');
        break;
    case 0:
        var thumbimgprev = thumbimg.replace('/thumbs/400x149', '/thumbs/142x52');
        break;
    case 2:
        var thumbimgprev = thumbimg.replace(/thumbs/, "small");
        break;
}
thumbimgprev=smallThumbPath;
gettrailobj().left="-500px";
divthw = parseInt(thw) + 2;
smthw = parseInt(thw) + 2;
halfthh = 50;
halfthh = Math.ceil(parseInt(thh)/2);
topx = halfthh - 9;
smthh = parseInt(thh) + 2;
var static_adr = 'http://www.timelineimages.com/'

if (navigator.userAgent.indexOf("Opera")!=-1)
    htm2 = 'border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1)
    htm2 = 'border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';      
if (navigator.userAgent.indexOf("MSIE")!=-1){
    htm2='border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';
}else{
    htm2='border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';
}

html = '<div id="div_2" style="'+htm2+'">'+imgtitle+'<br>'+'</div></div><div style="visibility:hidden"><div style="height:'+thh+'px">&nbsp;</div>';

htm ='';
htm+='<div style="width:'+divthw+'px;height:100%;border: 1px none #ffffff; padding:10px;z-index:51 ">';
    htm+='<div style="width:'+thw+'px;background-color: #FFFFFF; layer-background-color: #FFFFFF;z-index:51">';
        htm+='<div style="border-width:0px;margin:0px;padding:0px;background-color: #ffffff; layer-background-color: #ffffff;z-index:51;position:absolute;width:'+thw+'px;height:'+smthh+'px">';

            htm+='<img  src="'+thumbimgprev+'" width="'+smthw+'" height="'+smthh+'" border="0">';
        htm+='</div>';
        htm+='<div style="border-width:0px;margin:0px;padding:0px;z-index:52;position:absolute;text-align: center;width:'+thw+'px;top:'+topx+'px;">';
        htm+='</div>';
        htm+='<div style="border-width:0px;margin:0px;padding:0px;z-index:51;position:absolute;width:'+thw+'px;">';
            htm+='<div style="border: 1px solid #ffffff;width:'+thw+'px;">';
                htm+='<img name="btcontainer" id="btcontainer" src="'+static_adr+'images/separator.gif" border="0" width="'+thw+'" height="'+thh+'" >';
        ///////////////////////
        htme='</div>';
    htme+='</div>';
htme+='</div>';
gettrailobject().innerHTML = htm+html+htme;
gettrailobject().style.zIndex=100;

if (document.getElementById)
    document.getElementById('btcontainer').src = thumbimg;
else if (document.all)
    document.all.btcontainer.src = thumbimg;
gettrailobj().visibility="visible";
divw = parseInt(thw)+25;
divh = parseInt(thh)+130;
mm_hoverThumb=1;
document.onmousemove=followmouse;
 }

function truebody()
 {

if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1 || navigator.userAgent.toLowerCase().indexOf('safari') > -1)
{
    return document.body;
}

if (navigator.userAgent.toLowerCase().indexOf('opera') > -1 || navigator.userAgent.toLowerCase().indexOf('firefox') > -1  || navigator.userAgent.toLowerCase().indexOf('msie') > -1 )
{
    return document.documentElement;
}

 }
function followmouse(e)
{
    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
    var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
    if(typeof e != "undefined")
    {
    if(docwidth < 15+e.pageX+divw)
        xcoord = e.pageX-divw-5;
    else
        xcoord = 15+e.pageX;
    if(docheight < 15+e.pageY+divh)
        ycoord = 15+e.pageY-Math.max(0,(divh + e.pageY - docheight - truebody().scrollTop - 30));
    else
        ycoord = 15+e.pageY;
    }
    else if (typeof window.event != "undefined")
    {
    if(docwidth < 15+truebody().scrollLeft+event.clientX+divw)
        xcoord = truebody().scrollLeft-5+event.clientX-divw;
    else
        xcoord = truebody().scrollLeft+15+event.clientX;

    if(docheight < 15+truebody().scrollTop+event.clientY+divh)
        ycoord = 15+truebody().scrollTop+event.clientY-Math.max(0,(divh + event.clientY - docheight - 30));
    else
        ycoord = truebody().scrollTop+15+event.clientY;
    }
    gettrailobj().left=xcoord+"px"
    gettrailobj().top=ycoord+"px"
    }

    Array.prototype.in_array = function ( obj ) {
    var len = this.length;
    for ( var x = 0 ; x <= len ; x++ ) {
        if ( this[x] == obj ) return true;
    }
    return false;
}

2 个答案:

答案 0 :(得分：0)

审核完整源代码功能后：

function trailOn2(thumbimg,imgtitle,username,imgid,imgsize,credit,level,thw,thh,smallmedium,smallThumbPath){
var smallmedium = (smallmedium == null) ? 0 : smallmedium;
var isinstore = 0;
if (thumbimg.indexOf("storeimages/item") >= 0) {
    isinstore = 1;
}
switch(smallmedium)
{
    case 1:
        var thumbimgprev = thumbimg.replace('/thumbs/400x149', '/thumbs/142x52');
        break;
    case 0:
        var thumbimgprev = thumbimg.replace('/thumbs/400x149', '/thumbs/142x52');
        break;
    case 2:
        var thumbimgprev = thumbimg.replace(/thumbs/, "small");
        break;
}
thumbimgprev=smallThumbPath;
gettrailobj().left="-500px";
divthw = parseInt(thw) + 2;
smthw = parseInt(thw) + 2;
halfthh = 50;
halfthh = Math.ceil(parseInt(thh)/2);
topx = halfthh - 9;
smthh = parseInt(thh) + 2;
var static_adr = 'http://www.timelineimages.com/'

if (navigator.userAgent.indexOf("Opera")!=-1)
    htm2 = 'border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1)
    htm2 = 'border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';      
if (navigator.userAgent.indexOf("MSIE")!=-1){
    htm2='border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';
}else{
    htm2='border-width:0px;margin:0px;z-index:53;layer-background-color: #F0F3F6;background-color:#F0F3F6;padding:3px;';
}

html = '<div id="div_2" style="'+htm2+'">'+imgtitle+'<br>'+'</div></div><div style="visibility:hidden"><div style="height:'+thh+'px">&nbsp;</div>';

htm ='';
htm+='<div style="width:'+divthw+'px;height:100%;border: 1px none #ffffff; padding:10px;z-index:51 ">';
    htm+='<div style="width:'+thw+'px;background-color: #FFFFFF; layer-background-color: #FFFFFF;z-index:51">';
        //here htm+='<div style="border-width:0px;margin:0px;padding:0px;background-color: #ffffff; layer-background-color: #ffffff;z-index:51;position:absolute;width:'+thw+'px;height:'+smthh+'px">';

         //and here    htm+='<img  src="'+thumbimgprev+'" width="'+smthw+'" height="'+smthh+'" border="0">';
    //and this one here     htm+='</div>';
        htm+='<div style="border-width:0px;margin:0px;padding:0px;z-index:52;position:absolute;text-align: center;width:'+thw+'px;top:'+topx+'px;">';
        htm+='</div>';
        htm+='<div style="border-width:0px;margin:0px;padding:0px;z-index:51;position:absolute;width:'+thw+'px;">';


            htm+='<div style="border: 1px solid #ffffff;width:'+thw+'px;">';
   /*and here changed the src with the small thumb*/              htm+='<img name="btcontainer" id="btcontainer" src="'+thumbimgprev+'" border="0" width="'+thw+'" height="'+thh+'" >';
            ///////////////////////
           htme='</div>';
    htme+='</div>';
htme+='</div>';
gettrailobject().innerHTML = htm+html+htme;
gettrailobject().style.zIndex=100;

if (document.getElementById)
    document.getElementById('btcontainer').src = thumbimg;
else if (document.all)
    document.all.btcontainer.src = thumbimg;
gettrailobj().visibility="visible";
divw = parseInt(thw)+25;
divh = parseInt(thh)+130;
mm_hoverThumb=1;
document.onmousemove=followmouse;
 }

我删除了一个无用的整个div并更改了最后一个图像src，用需要加载的小拇指寻找注释。

  //here htm+='<div style="border-width:0px;margin:0px;padding:0px;background-color: #ffffff; layer-background-color: #ffffff;z-index:51;position:absolute;width:'+thw+'px;height:'+smthh+'px">';

     //and here    htm+='<img  src="'+thumbimgprev+'" width="'+smthw+'" height="'+smthh+'" border="0">';
//and this one here     htm+='</div>';

如果元素被加载，我的函数用大文件替换了它的src。

 htm+='<img name="btcontainer" id="btcontainer" src="'+thumbimgprev+'" border="0" width="'+thw+'" height="'+thh+'" >';

感谢您的回答，我已经设法在您的帮助下完成了大量代码。 不过在这里作为旁注，我会用jquery完成它，但这就是公司给我做的，这就是我所做的。 再次感谢！

答案 1 :(得分：-1)

老实说，我没有意志来查看你的代码。因此，这是一种适用于现代浏览器的替代方案。与Chrome一样，如果不支持类似下面的方法（例如Internet Explorer），您可能希望将代码用作后备。

<强>演示
http://jsfiddle.net/LpVqD/

html示例 

<ul>
    <li><img src="http://lorempixel.com/200/200/sports/1" data-large="http://lorempixel.com/400/400/sports/1" /></li>
    <li><img src="http://lorempixel.com/200/200/sports/2" data-large="http://lorempixel.com/400/400/sports/2" /></li>
    <li><img src="http://lorempixel.com/200/200/sports/3" data-large="http://lorempixel.com/400/400/sports/3" /></li>
    <li><img src="http://lorempixel.com/200/200/sports/4" data-large="http://lorempixel.com/400/400/sports/4" /></li>
    <li><img src="http://lorempixel.com/200/200/sports/5" data-large="http://lorempixel.com/400/400/sports/5" /></li>
    <li><img src="http://lorempixel.com/200/200/sports/6" data-large="http://lorempixel.com/400/400/sports/6" /></li>
</ul>​

css示例 

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    display: block;
    float: left;
    position: relative;
    margin: 20px;
    width: 200px;
    height: 200px;
}
li img {
    height: 100%;
    width: 100%;
    position: absolute;
}
li:hover img {
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    position: absolute;
    z-index: 1;
}
​

<强>的javascript 

$('img').mouseenter(function() {
    $(this).attr('src', $(this).data('large'));
});
​
相关问题
最新问题