鼠标移动UI跟随晃动的图标jquery
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<center> <div id="page-wrap媪青怍牙"> <div id="header" > <h1 class="rounded-corners">漂亮的jquery UI 跟随鼠标晃动的图标动画</h1> </div> <div id="content"> <div id="parallax"> <img src="images/grass.png" style="width:1200px; height:250px;"/> <img src="images/frog2.png" style="width:500px; height:250px;"/> <img src="images/butterflies3.png" style="width:1200px; height:300px;"/> </div> </div> </div></center>
4、书写css代码。body { font-family: arial; font-size: 14px; background: url(../images/bg.jpg) repeat; }#page-wrap { background-color: #B8E3F5; width: 950px; height: 365px; margin-left: auto; margin-right: auto; border: 1px solid #AFC2F0; padding: 3px; }#header { height: 85px; width: 950px; margin-top: 20px; text-align: center; }#content { background-color: #B8E3F5; width: 950px; text-align: left; }h1 { padding: 20px 10px 20px 10px; background-color: gray; color: white; margin: 0; text-shadow: #9E9B9B 2px 2px 2px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E3E1E1', endColorstr='#CCCACA');background: -gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); background: -moz-linear-gradient(top, #E3E1E1, #CCCACA); }.large { font-size: 22px; }.orange { color: orange; }.italic { font-style: italic }.textmiddle { vertical-align: middle; }.padout { padding-left: 25px; padding-right: 25px; }.rounded-corners { -moz-border-radius: 40px; -border-radius: 40px; -khtml-border-radius: 40px; border-radius: 40px; }.rounded-corners-top { -moz-border-top-radius: 40px; -border-radius: 40px; -khtml-border-radius: 40px; border-radius: 40px; }.scrolldown { padding-left: 20px; color: #EDECE8; font-size: 40px; font-weight: bold; vertical-align: middle; text-shadow: #6374AB 2px 2px 2px; }#page-content { padding: 20px; }#parallax-header { height: 200px; background-color: gray; }#parallax { position: relative; overflow: hidden; width: 950px; height: 250px; background-image: url('../images/background.jpg'); }
5、书写并添加js代码。<script src="js/jquery-1.2.6.min.js"></script><script src="js/jquery.jparallax.0.9.1.js" ></script><script> jQuery(document).ready(function($) { jQuery('#parallax').jparallax(); });</script>
6、代码整体结构。
7、查看效果。
