jQuery实现模拟淘宝精品
生活随笔
收集整理的這篇文章主要介紹了
jQuery实现模拟淘宝精品
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
鼠標移入到商品名字，中間顯示對應的圖片：
?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;}ul,li {list-style: none;}ul li {margin-top: 50px;}ul {display: inline-block;}#wrap {height: 500px;width: 400px;overflow: hidden;margin: 50px auto;}#left {float: left;}#right {float: right;}#center img {height: 300px;width: 300px;margin-left: 10px;}#center {height: 400px;overflow: hidden;}</style> </head><body><div id="wrap"><form action="" style="border: 1px solid red;"><tr><td><ul id="left"><li><a href="">星月</a></li><li><a href="">月月</a></li><li><a href="">歡歡</a></li></ul></td></tr><tr><td><ul id="center"><li><img src="image/1.jpg" alt=""></li><li><img src="image/2.jpg" alt=""></li><li><img src="image/3.jpg" alt=""></li><li><img src="image/4.jpg" alt=""></li><li><img src="image/5.jpg" alt=""></li><li><img src="image/6.jpg" alt=""></li></ul></td></tr><tr><td><ul id="right"><li><a href="">歡歡2</a></li><li><a href="">星月</a></li><li><a href="">晚安</a></li></ul></td></tr></form></div> </body></html> <script src="http://code.jquery.com/jquery-latest.js"></script> <script>$(function() {$('#left>li').mouseenter(function() {var idx = $(this).index(); //left的索引// console.log(idx);$('#center>li').eq(idx).show().siblings('li').hide();});$('#right>li').mouseenter(function() {var idx = $(this).index();idx += 3;$('#center>li').eq(idx).show().siblings('li').hide();});}); </script>?
總結
以上是生活随笔為你收集整理的jQuery实现模拟淘宝精品的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Servlet入门（一）
- 下一篇： mac book a1278