2

こんにちは、私の投稿を読んでいただきありがとうございます。私はこれらすべてにかなり慣れていないので、少しずさんな場合は申し訳ありません。

テーブルを作成し、残りのセルを移動せずにホバー アクションを使用してセルを拡大しようとしています。また、中心にズームしたいのですが、左上隅を軸としてズームするようです。以下は、私のテーブルの編集部分です。現在、ホバーすると、ズームしてすべてが右に移動します。ズームして、他のすべてをその位置に置いておきたいと思います。さらに情報が必要な場合はお知らせください。ところで、これはすべて HTA に関するものであり、HTA 内ではいくつかのことが機能しないようです。ありがとう！

CSS

.button1 {
    color: red;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button1:hover {
    color: red;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 14px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    zoom:150%;
}
.button2 {
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button2:hover {
    display: table-cell;
    width:245px;
    height:25px !important;
    font-family: Tahoma;
    font-size: 14px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    zoom:150%;
}

HTML

<table class="table">       
    <tr width="25%" >
        <td width="25%" valign="top">
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button2" href="#"onclick="Application"><span>Application</span></a> 
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>           
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button1" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>
            <a class="button2" href="#"onclick="Application"><span>Application</span></a>
        </td>
    </tr>
</table>
4

3 に答える 3

3

最新のブラウザーでは、これは CSS3 を使用して実行できますtransform:scale(1.5)。ただし、古いブラウザーや HTA が使用する mshta.exe では、より複雑です。

を使用するだけで<meta http-equiv="x-ua-compatible" content="ie=9">(おそらく も<!DOCTYPE html>)、IE9 のように動作させることができるため、CSS3 を解釈して適切に機能させることができます。

ただし、これが機能しない場合は、次のコードを使用して IE9 より前のサポートを追加できる場合があります。

/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=1.5,
        M12=0,
        M21=0,
        M22=1.5,
        SizingMethod='auto expand');

/* "\9" is a fix to target only IE versions before IE9 */
margin-left: -64px\9; 
margin-top: -9px\9;

補足として、コードをかなりクリーンアップできます。

CSS セレクターは、指定されていない限り、要素が既に持っているスタイルをオーバーライドしないため、クラスとホバーで同じコードを繰り返す必要はなく、変更する部分のみを含める必要があります。

button1また、 と の 2 つのクラスを使用する代わりに、各要素に対してbutton2より一般的なbuttonクラスと 2 番目のクラスをred使用できます。blue

これらの変更をすべて実装すると、次のような結果が得られます

.button {
    width:245px;
    height:25px;
    display:inline-block;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);

    /* IE8+ */
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1.5,
            M12=0,
            M21=0,
            M22=1.5,
            SizingMethod='auto expand');

   margin-left: -64px\9; 
   margin-top: -9px\9;
}
.blue {
    color:blue;
}
.red {
    color:red;
}

最初から恐れていた通りでした...上記のオプションがあなたが言ったように機能しない場合は、HTAのフォールバックとしてjavascript関数を使用する必要があるかもしれません

この更新されたソリューションは、可能な場合は CSS3 を使用しscaleますが、そうでない場合は、同じように見えるカスタム JavaScript フォールバックを使用します

// Function to see if the browser can support a CSS attribute
var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         }
      }
      return false;
   };
})();

// Doesn't do anything if the browser supports transform
if (!supports('transform')) {
    // Gets all the buttons
    var buttons = document.getElementsByClassName('button');

    for(var i = 0, j = buttons.length; i < j; i++) {
        // "Scales" them when hovered
        buttons[i].onmouseover = function() {
            scale(this, 1.5);
        }        
    }
}

function scale(obj, scaleFactor) {
    // Makes a copy of the object, positions it absolutely (to not affect
    // other elements), and scales it appropriately
    var clone = obj.cloneNode(true);
    clone.style.position = 'absolute';
    clone.style.top = obj.offsetTop + "px";
    clone.style.left = obj.offsetLeft + "px";
    clone.style.fontSize = parseInt(document.defaultView.getComputedStyle(obj, null).fontSize) * scaleFactor + "px";
    clone.style.width = obj.clientWidth * scaleFactor + "px";
    clone.style.height = obj.clientHeight * scaleFactor + "px";

    // Removes is when it stops being hovered
    clone.onmouseleave = function() {
        unscale(this);            
    }

    document.body.appendChild(clone);
}
function unscale(obj) {
    obj.parentNode.removeChild(obj);
}

良い面としては、純粋な JavaScript でカスタムの疑似スケール関数を作成することは興味深い考えでした。うまくいけば、コメントはそれを理解するのに十分に役立ちます

うまくいけば、このすべての作業の後、問題が最終的に解決されます!

于 2013-11-04T15:51:44.913 に答える
0

上記の皆さんの貢献と Teemu が投稿したリンクを組み合わせて、これを機能させることができました。残念ながら、全員の懸命な作業の結果、!DOCTPYE とメタ タグを (正しい場所に) 配置するだけで修正されたと思います。皆様、ご協力ありがとうございました！作業コードについては以下を参照してください

<!DOCTYPE html>
<HTML>
  <HEAD>
    <TITLE>Menu</TITLE>
    <meta http-equiv="x-ua-compatible" content="ie=9">  
    <HTA:APPLICATION ID = "AppMenu"
        APPLICATIONNAME = "AppMenu"
        border="thick"
        scroll="no" 
        singleinstance="no"
        showintaskbar="yes"
        windowstate="Normal"
        innerBorder="no"
    >
<Script>
</Script>

</HEAD>
 <style text="text/CSS">
.button {
    width:245px;
    height:15x;
    display:inline-block;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
}
.button:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    -o-transform:scale(1.5);
    transform:scale(1.5);


}
.Normal {
    color:Normal;
}
.Eform {
    color:Red;
}
</style> 
  <BODY>
    <table class="table" style="padding-left:50px" >       
        <tr width="25%" style="padding-left:50px" >
            <td width="25%" valign="top" style="padding-left:50px" >
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a> 
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a>           
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Eform" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application </span></a>
                <a class="button Normal" href="#"onclick="Application"><span>Application</span></a>
            </td>
        </tr>
    </table>

  </BODY>
</HTML>
于 2013-11-05T12:55:02.880 に答える
0

CSS3 を使用しますか? これは、CSS3 と以下のコードで動作するフィドルです。不要な css をいくつか削除しました (.button1:hover は .button1 と同じ設定をすべて保持するため、書き直す必要はありません)

フィドルへのリンク

.button1 {
    display: inline-block;
    position: relative;
    color: red;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    z-index: 1;
}
.button1:hover {
    -webkit-transform:scale(1.6);
    -moz-transform:scale(1.6);
    -ms-transform:scale(1.6);
    -o-transform:scale(1.6);
    transform:scale(1.6);
    z-index: 2;
}
.button2 {
    display: inline-block;
    position: relative;
    width:245px;
    height:25px;
    font-family: Tahoma;
    font-size: 12px;
    text-align:center;
    text-decoration: none;
    background-color: #E2E2E2;
    border-top: 2px solid #F1F1F1;
    border-right: 2px solid #969696;
    border-bottom: 2px solid #969696;
    border-left: 2px solid #F1F1F1;
    z-index: 1;
}
.button2:hover {
    -webkit-transform:scale(1.6);
    -moz-transform:scale(1.6);
    -ms-transform:scale(1.6);
    -o-transform:scale(1.6);
    transform:scale(1.6);
    z-index: 2;
}
于 2013-11-04T14:57:30.517 に答える