0

サムネイルの上にカーソルを置いたときに画像のプレビューを表示するために、Web サイトで使用する Java スクリプトがあります。スクリプトはうまく機能しますが、css にイーズインアウトのような機能を追加したいと思っています。私はJavaについてあまり知りませんが、いくつかのことを試してみましたが、うまくいきませんでした。http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation、http://www.scriptiny.com/2011/01/javascript-fade-in-などの素敵なチュートリアルを見つけましたout/ですが、Java のプログラミング知識がないため、それらをこのスクリプトに実装する方法がわかりません。誰かがこれについて私を助けてくれれば幸いです。

これは、html で関数が呼び出される方法です。

<a href="http://www.a.com/a.html"><img onmouseover="showImage(this.src,this,'a')" src="http://a.net/a.png" /></a>

これがスクリプトです

    var floatWidth = 150;  // set the width of the floating image
    var floatHeight = 100;  // set its height


    var midWindow = 0;
    var nContainer = "";
    var IE = false;

    if (navigator.appName == 'Microsoft Internet Explorer'){IE = true}

    function stayHome(m){        

            if (IE)
                    {
                    var currX = event.clientX;
                    var currY = event.clientY;
                    }
            else        {
                    var currX = m.pageX;
                    var currY = m.pageY;
                    }
            if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
                    {
                    var iL = document.documentElement.scrollLeft;        
                    var iV = document.documentElement.scrollTop;
                    }
            else        {
                    var iL = document.body.scrollLeft;        
                    var iV = document.body.scrollTop;        
                    }
            if (currX > midWindow+60)
                    {
                    var msgWidth = nContainer.clientWidth;
                    if (IE){nContainer.style.left = (currX-msgWidth-10+iL)+'px'}
                    else {nContainer.style.left = (currX-msgWidth-10)+'px'}
                    }
            else        {
                    if (IE){nContainer.style.left = (currX+10+iL)+'px'}
                    else {nContainer.style.left = (currX+10)+'px'}
                    }


            if (IE){nContainer.style.top = (currY+iV-(floatHeight/2)+70)+'px'}
            else {nContainer.style.top = (currY-(floatHeight/2)+70)+'px'}


    }        

    function hideImage(){

            while (nContainer.lastChild)
                    {nContainer.removeChild(nContainer.lastChild)}
            document.getElementById('isFloat').style.display = 'none';
    }

    function showImage(isImg,currItem,currCaption){

            document.getElementById('isFloat').style.display = 'inline';
            nIMG  = document.createElement('img');
            nContainer.appendChild(nIMG);
            nIMG.setAttribute('src',isImg);
            nIMG.setAttribute('width',floatWidth);
            nIMG.setAttribute('height',floatHeight);
            nCaption = document.createElement('div');
            nCaption.style.textAlign = "center";
            nCaption.style.backgroundColor = '#EAE3C6';
            nCaption.style.padding = '5px';
            nCaption.style.color = '#000000';
            nCaption.style.fontFamily = 'Sans-serif';
            nCaption.style.fontSize = '10pt';
            nCaption.style.borderTop = "1px solid black";
            nContainer.appendChild(nCaption);
            nCaption.innerHTML = currCaption;
            currItem.onmouseout=hideImage;
    }



    function getMidWindow(){

            if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
                    {
                    midWindow = document.documentElement.clientWidth/2;
                    }
            else        {
                    midWindow = document.body.clientWidth/2;
                    }
    }

    function initFloatImg(){

            var nBody = document.getElementsByTagName('body')[0];
            var nDiv = document.createElement('div');
            nDiv.id = "isFloat";
            nDiv.style.position = "absolute";
            nDiv.style.top = "0px";
            nDiv.style.left = "0px";
            nDiv.style.border = "1px solid black";
            nDiv.style.padding = "5px";
            nDiv.style.backgroundColor = "#ffffff"
            nBody.appendChild(nDiv);
            nContainer = document.getElementById('isFloat');
            document.onmousemove = stayHome;
            hideImage();
            if (!IE){document.captureEvents(Event.mousemove)}
            getMidWindow();
    }

    onload=initFloatImg;
    onresize=getMidWindow;
4

2 に答える 2

1

Jqueryには、fadeInとfadeOutを行うための非常に優れた簡単な方法があり、サイトをチェックして確認できます。

http://api.jquery.com/fadeIn/

于 2012-10-12T15:27:42.980 に答える
0

jQuery UI を使用する場合は、エフェクトを使用して必要なことを行うことができます。このリンクを参照してください：

http://jqueryui.com/effect/

例：

jQuery('#someDiv').show('blind');
于 2012-10-12T15:25:49.643 に答える