首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    用JavaScript 代码来做,图片切换效果!

    用原生的JS写动画效果的确是个很令人纠结的事情,倒不如直接用jQuery来写,亦或找一些jQuery插件。能力达不到的时候,为了工作进度,只能采取心有不甘的手段。...定位方式一般定时变换幻灯片的left或者 top属性,实现图片移动。还有一种是设置幻灯片的父容器的scrollTop或者scrollLeft属性。这里用的是定位方式。...首先创建Slider对象,在JS中函数就是对象。该对象接受两个属性,一个是外层容器的ID属性值,另一个是配置参数。...var Slider = function(elem, options) { var container = document.getElementById(elem), // HTML结构遵循规律...例如,目标值是left=-400,当前值为0,那么在从0到-400这段运动的距离中,如果没有达到目标值,通过不断地调用getStep方法,获得不同的渐进量。 至于其他有什么忽略之处,欢迎指正。

    3.7K70

    用JavaScript 代码来做,图片切换效果!

    用原生的JS写动画效果的确是个很令人纠结的事情,倒不如直接用jQuery来写,亦或找一些jQuery插件。能力达不到的时候,为了工作进度,只能采取心有不甘的手段。...定位方式一般定时变换幻灯片的left或者 top属性,实现图片移动。还有一种是设置幻灯片的父容器的scrollTop或者scrollLeft属性。这里用的是定位方式。...首先创建Slider对象,在JS中函数就是对象。该对象接受两个属性,一个是外层容器的ID属性值,另一个是配置参数。 以上获得图片及切换容器对象,以及设置默认配置参数。...在这个方法中会调用到getStep方法,从而获得一个渐进量,这对实现动画效果是十分重要的。 getStep方法接收两个参数,一个是目标值,另一个是当前值。...例如,目标值是left=-400,当前值为0,那么在从0到-400这段运动的距离中,如果没有达到目标值,通过不断地调用getStep方法,获得不同的渐进量。

    4.1K50

    《JQuery技术内幕》读书笔记——自调用匿名函数剖析

    Javascript语言中的自调用匿名函数格式如下: (function(){ //do somethings })(); 它还有另外两种等价写法如下: //等价写法一 (function(){ //do...function(){ //do somethings }(); JQuery采用的是第一种写法 (function(window,undefined){ //... })(window); 自调用匿名函数创建了一个独立的作用域...一、JQuery将window对象最为参数传入函数域,从而使window对象成为JQuery函数域的局部变量,这样做的好处是:   1.访问局部变量比访问全局变量的代价花销低很多,JQuery访问局部window...被压缩后的代码如下: (function(a,b){})(window); 二、JQuery的第二个参数是undefined。...三、自调用匿名函数的分号不能省略。

    90180

    js中带有参数的函数作为值传入后调用问题

    ❝小闫语录:你可以菜,但是就这么菜下去是不是有点过分了 ❞ 每天不是在写 bug,就是在解 bug 的路上~更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』 1.无参数函数作为参数传入调用...当根据实际情况,函数需要作为参数传入时,一般采用如下方式直接调用即可: function fuc1() { console.log(1); } function fuc2(a) { a();...} fuc2(fuc1); // 1 2.有参数函数作为参数传入调用 一般的函数都有参数,那么这种情况如何传参呢?...("link1"); link.onclick = fuc1("我是小闫同学啊"); 但是不好意思,「不需要点击,一刷新页面,直接调用函数」,弹出窗口!...❝因为在你写 fuc1("我是小闫同学啊") 时,默认就调用了此函数,都不需要点击。 ❞ 如何才能达到在点击时才弹出窗口呢?

    11.7K40

    插上翅膀:JQuery 插件机制详解

    简而言之,JQuery 插件是一种通过 JQuery 扩展机制添加的新方法或特性,它们可以在 JQuery 对象上调用,使得开发者能够方便地复用和扩展功能。...这样,我们就在页面中成功地使用了一个简单的 JQuery 插件。JQuery 插件的原理了解了如何编写一个简单的 JQuery 插件后,让我们深入揭开插件的神秘面纱,了解它是如何工作的。...JQuery 插件的链式调用JQuery 的链式调用是一种非常灵活的编程方式,允许我们在一行代码中对同一个 JQuery 对象执行多个操作。这也适用于插件的调用。...接着,我们为左右按钮添加了点击事件,点击按钮时更新 slideIndex 的值,然后调用 updateSlider 函数来更新图片轮播的位置。...在 updateSlider 函数中,我们使用了 JQuery 的 animate 方法来实现动画效果,其中的 settings.speed 就是用户传入的速度选项。2.

    93510

    AJAX和JSON

    实现一个AJAX异步调用和局部刷新 创建XMLHttpRequest对象,也就是创建一个异步调用对象 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL 设置响应HTTP请求状态变化的函数...("Content-type","application/x-www-form-urlencoded"); 设置响应HTTP请求状态变化的函数 在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充...JSONP 的原理 通过script标签引入js文件 -> js文件载入成功后 -> 执行我们在url参数中指定的函数 JSONP 的组成 JSONP由两部分组成:回调函数和数据。...回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。 // 封装JSONP function getJSONP(url, callback) { if (!...-> 将数据传出到回调函数供我们使用 -> 删除掉污染的src和函数等 所以JSONP并不是真正的ajax,利用的是调用js文件时则不受跨域的影响。

    3.5K20

    unslider源码分析

    根据Bootstrap中文网的介绍,Unslider一个超小的 jQuery轮播(slider)插件,参照这个汉化版的介绍页面,这个插件有你需要的优点,但是本文是抱着学习的态度,学习如何实现轮播插件,...使用 $.fn.unslider 方法 $.fn.unslider方法是在jQuery原型链定义的方法,jQuery对象自然能够调用这个方法。...最终调用在某个位置定义的fn函数,参数是arg1和arg2。...$.fn.unslider方法时将调用jQuery.data方法将新构造的$.Unslider实例保存到jQuery对象的缓存对象上,供后续使用;后续的调用可以直接从这个jQuery缓存对象取出$.Unslider.... $.Unslider 首先可以把$.Unslider(context, options)看作构造函数,最终会被$.fn.unslider(options)调用。

    2.2K20
    领券