人生中第一次用jQuery插件

来源:互联网 发布:游戏合集软件 编辑:程序博客网 时间:2024/05/15 15:42

        HTML、CSS、JS中,最难的应该就是js部分了,真的是要涉及到编程逻辑的,而且动不动就是几十行代码,一看就让人头晕。同时,js也是非常重要的一部分,没有它,就只能做静态的页面,用好它,则页面会非常酷炫。能不能用好js也是前端开发人员技术水平能不能上一个台阶的关键。

        前两天,第一次在我的页面里用上了js语句(当然,是模仿页面上已经存在的一段js代码),其实就是一个简单的淡入淡出效果。当看到自己写的div能自如的出现动态效果的时候,心情那叫一个激动万分啊,万分激动!

        今天,客户突然要求把一个横排显示的商品图标列表做成轮播效果。客户设想的真是挺美好的,可是他哪里知道,这一个静态变动态,就必须要用到js。而且,据我了解,这个轮播的效果绝不是一两行代码就能实现的。而我,目前就会那么一丁点淡入淡出的js。怎么办?

        好在项目里另外一个页面上就有一个轮播图,东西很像,我想移植过来。仔细研究,发现这是个jQuery插件,scrollpic.js。对于jQuery插件以前只看过一点相关教程,从没真的操作过。没办法,客户的需求就是我们工作的目标,于是,我一点一点开始试。。。。。。。。。。。。。

        终于,程序能正常运行了,而且在我的努力下,效果相当完美,好兴奋啊,有一个激动万分,万分激动。发现jQuery真是个好东西,比直接写js代码要简单多了,赶紧要把这么好的东西分享给大家。

      以下是部分代码:

// 先加载ScrollPic.js插件后再执行以下语句window.onload = function(){    scrollPic_01 = new ScrollPic();    scrollPic_01.scrollContId   = "pic";  //图片容器ID    scrollPic_01.arrLeftId      = "left"; //左按钮ID    scrollPic_01.arrRightId     = "right"; //右按钮ID    scrollPic_01.frameWidth     = 840; //图片容器宽度    scrollPic_01.pageWidth      = 210; //每张图片宽度    scrollPic_01.speed          = 10; //移动速度(单位毫秒,越小越快)    scrollPic_01.space          = 10; //每次移动像素(单位px,越大越快)    scrollPic_01.autoPlay       = false; //自动播放    scrollPic_01.autoPlayTime   = 3; //自动播放间隔时间(秒)    scrollPic_01.initialize();  //初始化}
        今天就写这么多了,等以后有时间了,再深入研究一下。
0 0