jQuery实现仿微软首页感应鼠标变化滑动窗口效果

本文实例讲述了jQuery实现仿微软首页感应鼠标变化滑动窗口效果。分享给大家供大家参考。具体如下：

这是一款jQuery仿微软首页感应鼠标变化的滑动窗口，鼠标放上后，窗口会向左拉长，鼠标移走后恢复原样，是在微软官方网站发现的，看了看代码，觉得很容易就扣下来，不敢独享。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-f-microsoft-web-nav-demo/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head titlejquery仿微软首页感应鼠标变化的滑动窗口/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' .盒子{宽度：100像素高度：100 px位置：绝对；right:0color: # fff}。方框1 { top :100 px背景技术： # 000;} .方框2 { top :250 px背景技术： # 333;} .框3 { top :400 px背景技术： # 666;} .方框4 { top :550 px背景技术： # 999;}/style脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script/head dydiv class=' box box box 1 '应用/divdiv class='box box2 '下载/div class=' box 3 ' Windows Phone/div class=' box 4 ' Office/div脚本类型=' text/JavaScript ' $(').方框')。每个（函数(){ $(此)).悬停(function(){ $(this)).停止()。动画({width:'150'}，1000)；}，function(){ $(this).停止()。动画({width:'100'}，1000)；});});/脚本/正文/html希望本文所述对大家的jQuery程序设计有所帮助。