对jQuery插件的一点点认识

来源：互联网发布：淘宝卖家套餐怎么设置编辑：程序博客网时间：2024/06/08 13:29

概述

jQuery插件可以让我们的项目变得更加栩栩如生，做更少的工作去完成更多的事情，例如：jQuery UI，jQuery fullpage，返回顶部等js插件效果

jQuery的一个小例子

jQuery fullpage

大家先看看效果，满屏滚动：

附上学习地址：http://www.jqcool.net/jquery-fullpage.html
附上自己代码：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <link href="css/jquery.fullPage.css" rel="stylesheet" />    <script src="js/jquery-2.0.3.js" type="text/javascript"></script>    <script src="js/jquery-ui.min.js" type="text/javascript"></script>    <script src="js/jquery.fullPage.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $.fn.fullpage({                verticalCentered: true,                navigation: true,                navigationTooltips: ['首页', '视觉', '交互', '皮肤', '功能', '待办邮件', '联系人邮件', '科技', '连接易信', '马上体验']            });        });    </script></head><body>    <div class="section section1">        <div class="bg">            <img src="image/section1.jpg" alt="">        </div>        <div class="bg11"></div>        <div class="bg12"></div>        <div class="bg13"></div>    </div>    <div class="section section2">        <div class="bg">            <img src="image/section2.jpg" alt="">        </div>        <div class="bg21"></div>        <div class="bg22"></div>        <div class="bg23"></div>    </div>    <div class="section section3">        <div class="bg">            <img src="image/section3.jpg" alt="">        </div>        <div class="bg31"></div>        <div class="bg32"></div>        <div class="bg33"></div>    </div>    <div class="section section4">        <div class="bg">            <img src="image/section4.jpg" alt="">        </div>        <div class="bg41"></div>        <div class="bg42"></div>        <div class="bg43"></div>    </div>    <div class="section section5">        <div class="bg">            <img src="image/section5.jpg" alt="">        </div>    </div>    <div class="section section6">        <div class="bg">            <img src="image/section6.jpg" alt="">        </div>        <div class="bg61"></div>        <div class="bg62"></div>    </div>    <div class="section section7">        <div class="bg">            <img src="image/section7.jpg" alt="">        </div>        <div class="bg71"></div>        <div class="bg72"></div>        <div class="bg73"></div>        <div class="bg74">            <img src="image/bg74.png" alt="">        </div>    </div>    <div class="section section8">        <div class="bg">            <img src="image/section8.jpg" alt="">        </div>        <div class="bg81"></div>        <div class="bg82"></div>        <div class="bg83"></div>        <div class="bg84"></div>    </div>    <div class="section section9">        <div class="bg">            <img src="image/section9.jpg" alt="">        </div>    </div>    <div class="section section10">        <div class="bg">            <img src="image/section10.jpg" alt="">        </div>        <div class="bg101"></div>        <div class="bg102"></div>        <div class="bg103"></div>    </div></body></html>

jQuery返回顶部小插件

附上自己代码：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title></head><body>    <script src="js/jquery-2.0.3.js"></script>    <script src="js/scrolltopcontrol.js"></script>    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <p align="center">        <font size="5" color="#FF0000">往下滚动即可显示返回顶部按钮!</font>        <!--演示内容开始-->    </p>    <div style="height: 1000px;"></div>    <!--演示内容结束--></body></html>

var scrolltotop = {    setting: {        startline: 100, //起始行        scrollto: 0, //滚动到指定位置        scrollduration: 400, //滚动过渡时间        fadeduration: [500, 100] //淡出淡现消失    },    controlHTML: '<img src="image/topback.gif" style="width:54px; height:54px; border:0;" />', //返回顶部按钮    controlattrs: { offsetx: 30, offsety: 80 },//返回按钮固定位置    anchorkeyword: "#top",    state: {        isvisible: false,        shouldvisible: false    }, scrollup: function () {        if (!this.cssfixedsupport) {            this.$control.css({ opacity: 0 });        }        var dest = isNaN(this.setting.scrollto) ? this.setting.scrollto : parseInt(this.setting.scrollto);        if (typeof dest == "string" && jQuery("#" + dest).length == 1) {            dest = jQuery("#" + dest).offset().top;        } else {            dest = 0;        }        this.$body.animate({ scrollTop: dest }, this.setting.scrollduration);    }, keepfixed: function () {        var $window = jQuery(window);        var controlx = $window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx;        var controly = $window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety;        this.$control.css({ left: controlx + "px", top: controly + "px" });    }, togglecontrol: function () {        var scrolltop = jQuery(window).scrollTop();        if (!this.cssfixedsupport) {            this.keepfixed();        }        this.state.shouldvisible = (scrolltop >= this.setting.startline) ? true : false;        if (this.state.shouldvisible && !this.state.isvisible) {            this.$control.stop().animate({ opacity: 1 }, this.setting.fadeduration[0]);            this.state.isvisible = true;        } else {            if (this.state.shouldvisible == false && this.state.isvisible) {                this.$control.stop().animate({ opacity: 0 }, this.setting.fadeduration[1]);                this.state.isvisible = false;            }        }    }, init: function () {        jQuery(document).ready(function ($) {            var mainobj = scrolltotop;            var iebrws = document.all;            mainobj.cssfixedsupport = !iebrws || iebrws && document.compatMode == "CSS1Compat" && window.XMLHttpRequest;            mainobj.$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");            mainobj.$control = $('<div id="topcontrol">' + mainobj.controlHTML + "</div>").css({ position: mainobj.cssfixedsupport ? "fixed" : "absolute", bottom: mainobj.controlattrs.offsety, right: mainobj.controlattrs.offsetx, opacity: 0, cursor: "pointer" }).attr({ title: "返回顶部" }).click(function () { mainobj.scrollup(); return false; }).appendTo("body"); if (document.all && !window.XMLHttpRequest && mainobj.$control.text() != "") { mainobj.$control.css({ width: mainobj.$control.width() }); } mainobj.togglecontrol();            $('a[href="' + mainobj.anchorkeyword + '"]').click(function () { mainobj.scrollup(); return false; });            $(window).bind("scroll resize", function (e) { mainobj.togglecontrol(); });        });    }};scrolltotop.init();

附上演示图片：

总结

只需要掌握基本的html和JavaScript知识便可以使用jQuery 插件.

0 0