怎样自己动手开发JQuery插件
1个回答
展开全部
下载相关的脚步运行库：由于采用JQuery脚本来实现网页的动态效果，因此需要在网上搜索并下载相应的JQuery运动库，下载完成后进行解压缩，将解压后的文件拷贝到网站的根目录下。
创建内容页面：为了更好的展示JQuery实现的效果，在此小编特意制作了一个导航菜单。该导航菜单包括四个子菜单， 分别是“主页”、 “博客推荐”、 “讨论专区”、 “分享经验”以及“热点搜索”。具体代码和内容如下：
接下来需要对该网页进入美化：在当前目录下新建一名称为"MyStyle.css"的层叠样式表文件，利用该文件实现网页的美化。当然利用CSS进行美化操作的另一目地是实现网页的内容与其表现形式的分离，这样就可以使我们专注于网页的美化，实现了更高效的分工合作理念。当前重要利用CSS实现了将网页内容字体颜色设置为红色，添加了列表样式，样式表文件的源码及对应的网页效果如图所示。
创建JQuery插件：首先在网站的根目录下新建一名称为“MyJQueryAddIn.js”文件，然后在文件中输入如图所示内容。在此特别需要说明的一点是JQuery插件的基本结构是：（function($){代码})(jquery);本插件的重要功能是实现当鼠标停留在导航栏上时，对应菜单选项向右移动60像素，当鼠标离开时又恢复原样。JQuery插件对应内容如图所示：
最后在网页文件“index.html”中添加对“MyStyle.css”和”MyJQueryAddIn.js“文件的引用：
<script type="text/javascript" src="jquery-1.8.2.min.js"></script><!--引入JQuery运行库-->
<script type="text/javascript" src="MyJQueryAddIn.js"></script>
设计完成后，网站根目录结构及页面效果如果所示。
调试运行： 将鼠标停留在导航栏上时，观看对应菜单选项向右移动的情况。当鼠标离开时再观察菜单恢复原样情况。以下为效果展示：
创建内容页面：为了更好的展示JQuery实现的效果，在此小编特意制作了一个导航菜单。该导航菜单包括四个子菜单， 分别是“主页”、 “博客推荐”、 “讨论专区”、 “分享经验”以及“热点搜索”。具体代码和内容如下：
接下来需要对该网页进入美化：在当前目录下新建一名称为"MyStyle.css"的层叠样式表文件，利用该文件实现网页的美化。当然利用CSS进行美化操作的另一目地是实现网页的内容与其表现形式的分离，这样就可以使我们专注于网页的美化，实现了更高效的分工合作理念。当前重要利用CSS实现了将网页内容字体颜色设置为红色，添加了列表样式，样式表文件的源码及对应的网页效果如图所示。
创建JQuery插件：首先在网站的根目录下新建一名称为“MyJQueryAddIn.js”文件，然后在文件中输入如图所示内容。在此特别需要说明的一点是JQuery插件的基本结构是：（function($){代码})(jquery);本插件的重要功能是实现当鼠标停留在导航栏上时，对应菜单选项向右移动60像素，当鼠标离开时又恢复原样。JQuery插件对应内容如图所示：
最后在网页文件“index.html”中添加对“MyStyle.css”和”MyJQueryAddIn.js“文件的引用：
<script type="text/javascript" src="jquery-1.8.2.min.js"></script><!--引入JQuery运行库-->
<script type="text/javascript" src="MyJQueryAddIn.js"></script>
设计完成后，网站根目录结构及页面效果如果所示。
调试运行： 将鼠标停留在导航栏上时，观看对应菜单选项向右移动的情况。当鼠标离开时再观察菜单恢复原样情况。以下为效果展示：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
