使用jQuery实现电影排行榜

 

1. 我们先放一个div，给他一个类为box并且我们给他一些样式：width:670px; border:2px solid #b200ff; margin:50px auto;，在div里面我们分了两部分，分别为标题和内容部分。
2. 标题我们放一个h1标签，里面的文本为:电影排行榜，我们给他一些样式为：padding:10px 20px; margin:0; color:#00ffff; border-bottom:2px solid #b200ff; box-sizing:border-box;
3. 内容部分我们放一个ul标签，给他一个ID为list，并且给他一些样式为：list-style:none;，里面我们放四个li标签，并且里面的布局都一样就是内容不同而已，所以我们就讲一个li标签得样式，给他们共同的样式为：padding:10px; border-bottom:2px dashed #b200ff; clear:both;
4. 在这个li标签里面分为三个部分，第一个部分为序号，我们放在em标签里面，em标签是行内标签也是斜体标签，给他设置样式为：display:inline-block; font-size:30px; color:#ff0000; padding-right:5px;这个 inline-block是将他转化成行内块级元素。
5. 第二个部分是我们的标题，我们放在一个span标签内，他也是一个行内标签，我们不给他设置样式。
6. 第三个部分就是图片和简介，放在一个div内，并且 给他设置样式为：padding-top:20px; height:180px;给这个div一个类为on，给这个类设置样式为display为none，将其隐藏，图片和简介我们用两个div来装，分别给他们一个类为：img，p，给他们设置左浮动。
7. 我们先给类为img的div里面的图片设置一下样式：width:255px; height:170px;
8. 再给类名为p的div设置样式：width:385px; font-size:12px; padding-left:10px;在里面放一个p标签简介就写在里面。
9. 其他三个li标签样式都相同就是文本和图片不同。
10. 

 

我们现在来写jQuery

1. 我们先写一个页面加载事件，$(function(){})。
2. 再在里面声明一个变量list，将获取的li标签赋值给他。var list = $("li");
3. 再给变量list绑定鼠标移入事件list.mousemove (function () {}),当鼠标移到那个li标签就给那个li里有on的类设置它的css里的display为block，$(this.querySelector(".on")).css("display", "block"); querySelector这个方法就是在规定的范围寻找传入方法里的类。
4. 再给变量list绑定鼠标移出事件list.mouseout(function () {}),当鼠标移到那个li标签就给那个li里有on的类设置它的css里的display为block，$(this.querySelector(".on")).css("display", "none"); 这样就写好了，效果如下：