滑鼠滑過清單圖檔放大，帶清單序列号自動生成效果

請轉載此文的朋友務必附帶原文連結，謝謝。

這裡我隻把關鍵代碼給貼出來。

html:

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"hot-exchange"</code><code>&gt;</code>

<code>                        </code><code>&lt;</code><code>ul</code><code>&gt;</code>

<code>                            </code><code>&lt;</code><code>li</code> <code>class</code><code>=</code><code>"active clear"</code><code>&gt;</code>

<code>                                </code><code>&lt;</code><code>a</code> <code>href</code><code>=</code><code>""</code><code>&gt;</code>

<code>                                </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"range"</code><code>&gt;&lt;</code><code>p</code><code>&gt;排名&lt;/</code><code>p</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>                                </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"goods-title"</code><code>&gt;</code>

<code>                                    </code><code>&lt;</code><code>p</code><code>&gt;放逐之刃&lt;/</code><code>p</code><code>&gt;</code>

<code>                                    </code><code>&lt;</code><code>p</code><code>&gt;16800C豆&lt;/</code><code>p</code><code>&gt;</code>

<code>                                </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>                                </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"goods-img"</code><code>&gt;</code>

<code>                                    </code><code>&lt;</code><code>img</code> <code>src</code><code>=</code><code>"../Content/images/123_u4776.png"</code> <code>alt</code><code>=</code><code>""</code><code>/&gt;</code>

<code>                                </code><code>&lt;/</code><code>a</code><code>&gt;</code>

<code>                            </code><code>&lt;/</code><code>li</code><code>&gt;</code>

<code>                            </code><code>&lt;</code><code>li</code> <code>class</code><code>=</code><code>"clear"</code><code>&gt;</code>

<code>                        </code><code>&lt;/</code><code>ul</code><code>&gt;</code>

<code>                    </code><code>&lt;/</code><code>div</code><code>&gt;   </code>

css代碼如下：

<code>.hot-exchange ul li.active .range{</code>

<code>    </code><code>width</code><code>: </code><code>20px</code><code>;</code>

<code>    </code><code>height</code><code>: </code><code>60px</code><code>;</code>

<code>    </code><code>background</code><code>: </code><code>url</code><code>(../images/u</code><code>4779</code><code>.png) </code><code>no-repeat</code><code>;  </code>

<code>}</code>

<code>.range p{</code>

<code>        </code><code>display</code><code>: </code><code>none</code>

<code>.hot-exchange ul li.active .range p{</code>

<code>    </code><code>display</code><code>: </code><code>block</code><code>;</code>

<code>.hot-exchange ul li.active .goods-img{</code>

<code>    </code><code>width</code><code>: </code><code>67px</code><code>;</code>

<code>    </code><code>height</code><code>: </code><code>67px</code><code>;</code>

jquery代碼如下：

<code>$(</code><code>function</code><code>(){</code>

<code>    </code> 

<code>    </code><code>//兌換專區左側滑鼠滑動效果</code>

<code>    </code><code>var</code> <code>serialNumber = 0;</code>

<code>    </code><code>var</code> <code>serialNumberLen = 6;</code>

<code>    </code><code>$(</code><code>".hot-exchange ul li"</code><code>).each(</code><code>function</code><code>(){</code>

<code>            </code><code>serialNumber++;</code>

<code>            </code><code>if</code><code>(serialNumber &gt; serialNumberLen){</code>

<code>                </code><code>return</code> <code>false</code><code>;</code>

<code>            </code><code>}</code>

<code>            </code><code>$(</code><code>this</code><code>).children().find(</code><code>".range"</code><code>).append(</code><code>'0'</code><code>+serialNumber);</code>

<code>            </code><code>$(</code><code>this</code><code>).mouseover(</code><code>function</code><code>(){</code>

<code>                </code><code>$(</code><code>this</code><code>).addClass(</code><code>"active"</code><code>).siblings().removeClass(</code><code>"active"</code><code>);</code>

<code>                </code><code>$(</code><code>this</code><code>).children().find(</code><code>".range p"</code><code>).show();</code>

<code>                </code><code>$(</code><code>this</code><code>).siblings().children().find(</code><code>".range p"</code><code>).hide();</code>

<code>            </code><code>})</code>

<code>    </code><code>})</code>

<code>})</code>

效果如下：

本文轉自  小旭依然  51CTO部落格，原文連結:http://blog.51cto.com/xuyran/1861924