进行准备工作

这边对基本的样式进行了设置，首先在html部分设置了一个名为nav的div，随后进行基本的默认样式的清除，并且设置盒子为ie盒子方便后续的计算，整体都设置为弹性盒，方便后续矢量文字的操作，对导航栏nav进行定位，方便后续位置上的操作

以下是一个简单的示例代码，用于实现鼠标停留时图片放大的效果：

用 HTML 在页面上放置了一个按钮

<button class="btn">点击按钮</button>

如果想要实现当鼠标悬停在按钮上时，按钮文字加粗，在 CSS 里这样设置

我们在很多时候其实是需要在网页中设置鼠标效果的，有些是自动生成的，比如一个link链接，那么鼠标移上去自动会变成一个手的样子去点击，有时候一个input输入框，那么鼠标就自动变成一个英文大写I的样子，那么我们是否可以将更多对象设置成我们需要的样子呢？这完全是可以的，接下来就看下效果吧

1.鼠标样式

 <!-- 利用行内样式设置鼠标样式 -->    
<li style="cursor: default">鼠标默认样式</li>
<li style="cursor: move">鼠标移动样式</li>
<li style="cursor: pointer;">鼠标指针样式</li>
<li style="cursor: text;">鼠标文本样式</li>
<li style="cursor: wait;">鼠标等待样式</li>
<li style="cursor:zoom-in;">鼠标放大样式</li>
<li style="cursor: zoom-out;">鼠标缩小样式</li>

<script type="text/javascript">

/* 鼠标特效 */

var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?","?法治?","?爱国?","?敬业?","?诚信?","?友善?"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); });

前面文章有制作水晶魔方，这次我们升级一下它的功能，通过鼠标控制魔方旋转。

大家先看效果

这酷炫的效果，你怎么看？

鼠标事件

这次效果，咱们需要用JS实现。主要是监听鼠标事件，计算鼠标滑动距离，改变魔方的rotateX、rotateY