私がやろうとしていることがうまくいくかどうかはわかりませんが、それらの中にあるいくつかのリンクのスクリプトを実行するli two divの中に挿入したいと思います。少し紛らわしいですが、私はそれをより良い方法で説明することはできません.
私のコードを見てください：
HTMLの本文内
<ul>
<li> TEST </li>
<li> TEST 2
<ul>
<li>
<div id="dock2" class="dock">
<div class="dock-container2" style="left: 760px; width: 400px;">
<ul>
<li><a class="dock-item2" href="#" style="width: 40px; left: 0px;"><span style="display: none;">Home</span><img alt="home" src="Inc/Images/dock/home.png"/></a> </li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 40px;"><span style="display: none;">Contact</span><img alt="contact" src="Inc/Images/dock/email.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 80px;"><span style="display: none;">Portfolio</span><img alt="portfolio" src="Inc/Images/dock/portfolio.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 120px;"><span style="display: none;">Music</span><img alt="music" src="Inc/Images/dock/music.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 160px;"><span style="display: none;">Video</span><img alt="video" src="Inc/Images/dock/video.png"/></a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li> TEST 3 </li>
</ul>
div 内で実行されているスクリプト、また HTML の本文でも
<script type="text/javascript">
$(document).ready(function(){
$('#dock2').Fisheye({
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
そして最後にCSS
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
だから私が実際にやろうとしているのは、OS Xのように機能するドックのリスト内に置かれ、アイコンの上にマウスを移動してアイコンをズームしますが、上記のコードではズームは機能しません。
ドックの一部をリストの外に移動して本体のどこかに配置すると、すべてが正常に機能しますが、リスト内にはアニメーションがありません。
これが可能かどうかはまったくわかりません.li内でアニメーションを実行しています.どんな助けも本当に感謝しています.
PS私はliスタイルに関する別のCSSも持っていますが、質問とは無関係なので含めませんでした。
編集: jsfiddleに追加しました。リンク: http://jsfiddle.net/UTw84/3/
私が作ろうとしているドックはこれです：http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
注: jsfiddle では、おそらくアイコンのパスがないため、アイコンは表示されません。
編集 2:問題は CSS にありました/あります。私はいくつかの変更を加え、現在はより良く機能しています。http://jsfiddle.net/UTw84/7/