1

CSS transform:scale(2.0); を使用しています。ダイアグラム内のドットをアニメーション化します。効果は Safari では意図したとおりに機能しますが、Chrome とどうやら IE ではホバー時にドットが切り取られています。

これは空白の HTML ドキュメントでは発生しません。この図の中でだけです。解決策を知っている人はいますか? またはまともなjQueryの代替品に失敗しました。

ドットはダイアグラム内に完全に配置されています

開発は www.craigscott.net/succeed にあります

ありがとう

一般的なマップ リンクのスタイル

.link-box {width:20px; height:20px; position: absolute; cursor: pointer; background-color:  white; border-radius: 50%; 
-moz-transition: all 0.1s ease; -webkit-transition: all 0.1s ease; }


.link-box:hover { -webkit-transform:scale(2.0); 

-moz-transform:scale(2.0);
-o-transform:scale(2.0);
transform:scale(2.0);

transform-origin:50% 50%;

-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform-origin:50% 50%; /* Safari and Chrome */
-moz-transform-origin:50% 50%; /* Firefox */
-o-transform-origin:50% 50%; /* Opera */

}

すべてのドット位置

.mobile-link {bottom:100px; right:135px;}
.mobile-link:hover {bottom:100px; right:135px;}
.visualization-link {bottom:270px; right:70px;}
.UEANDE-link {bottom: 165px; right:45px;}
.support-link {top:110px; left:170px;}
.tech-support-link {top:50px; left:265px;}
.data-govern-link {top:108px; right:175px;}
.payroll-link {left:135px; bottom:98px;}
.CRM-link {left:48px; bottom:165px;}
.HCMC-link {left:70px; top:252px;}
.semantic-link {right:82px; top:200px;}
.op-mod-link {right:30px; top:217px;}
.gameification-link {right:25px; top:270px;}
.jquery-link {right:85px; bottom:85px;}
.portal-link {right:40px; bottom:115px;}
.dashboard-link {right:0px; bottom:148px;}
.alerts-link {right:10px; bottom:200px;}
.support-pack-link {left:175px; top:57px;}
.psoft-link {left:128px; top:82px;}
.upgrades-link {left:130px; top:138px;}
.tech-services-link {left:220px; top:28px;}
.integration-link {left:265px; top:0px;}
.saas-link {left:310px; top:28px;}
.mdm-link {right:130px; top:83px;}
.data-quality-link {right:177px; top:60px;}
.screening-link {right:132px; top:136px;}
.PSGP-link {left:85px; bottom:82px;}
.RTI-link {left:125px; bottom:47px;}
.PAE-link {left:175px; bottom:67px;}
.CX-link {left:0px; bottom:147px;}
.HR-Help-link {left:10px; top:323px;}
.Event-link {left:62px; top:302px;}
.dynamic-link {left:22px; top:270px;}

.fusion-link {left:30px; top:220px;}
.PSHCM-link {left:80px; top:205px;}
4

2 に答える 2

0

私は簡単な方法を見つけて、すべてのtransform：scaleの頭痛を取り除き、これを書きます

.link-box-child:hover {
   width:40px;
   height:40px;
   margin:-10px;
   position:absolute;
   padding:0px;
  }
于 2013-03-18T18:03:03.757 に答える
0

スケーリング/変換を処理するために、 jQueryTransitのようなjQueryCSS3エフェクトフレームワークを使用します。

さらに、クロスブラウザの問題を処理します。私見、それは物事をより整理し、維持しやすくします。あなたがしていることはかっこいいように見えますが、注意しないとすぐに手に負えなくなるかもしれません。

例： 

$(".box").hover( function () {

    $('.box').transition({ scale: 2.0 });
    $('.box').transition({ x: '40px' });
}, function () {
    $('.box').transition({ scale: 1.0 });
    $('.box').transition({ x: '-40px' });
});

JSフィドルの例

これがあなたの問題の正確な解決策ではないことは知っていますが、CSS3アニメーション/効果の乱雑さを処理するために堅固なフレームワークに固執する場合、このルートをたどる方が簡単かもしれません。

編集：フィドルを更新して、サンプルツリーの「ドット」に近づけました。

JSフィドルの例2

Javascript：

$(".link-box").hover( function () {

    $('.link-box').transition({ scale: 2.0, x: '-40%' }, 'fast');
}, function () {
    $('.link-box').transition({ scale: 1.0, x: '0px' }, 'fast');
});
于 2013-03-18T18:03:24.617 に答える