jquery插件详细教程（jQuery旋转插件jqueryrotate用法详解）

本文目录

• jQuery旋转插件jqueryrotate用法详解
• 如何编写JQuery 插件详解
• Jquery弹出层插件ThickBox的使用方法

jQuery旋转插件jqueryrotate用法详解

本文实例讲述了jQuery旋转插件jqueryrotate用法。分享给大家供大家参考，具体如下：CSS3提供了多种变形效果，比如矩阵变形、位移、缩放、旋转和倾斜等等，让页面更加生动活泼有趣，不再一动不动。然后IE10以下版本的浏览器不支持CSS3变形，虽然IE有私有属性滤镜（filter），但不全面，而且效果和性能都不好。今天介绍一款jQuery插件——jqueryrotate，它可以实现旋转效果。jqueryrotate支持所有主流浏览器，包括IE6。如果你想在低版本的IE中实现旋转效果，那么jqueryrotate是一个很好的选择。兼容性jqueryrotate支持所有主流浏览器，包括IE6。jqueryrotate在高级浏览器中使用CSS3transform属性实现，在低版本IE中使用VML实现。当然，你可以使用IE条件注释，低版本IE使用jqueryrotate，高级浏览器则直接使用CSS3。使用方法//演示1//旋转45angle$(document.body).click(function(){//方式1$(’.divOne’).rotate(45);//方式2$(’.divOne’).rotate({angle:45});});//演示2//鼠标移动效果//方式1$(’.divOne’).rotate({bind:{mouseover:function(){$(this).rotate({animateTo:180});},mouseout:function(){$(this).rotate({animateTo:0});}}});//方式2$(’.divOne’).mouseover(function(){$(this).rotate({animateTo:180});}).mouseout(function(){$(this).rotate({animateTo:0});});//演示3不停旋转//方式1varangle=0;setInterval(function(){angle+=3;$(’.divOne’).rotate(angle);},50);//方式2varrotation=function(){$(’.divOne’).rotate({angle:0,animateTo:360,callback:rotation})}rotation();//方式3varrotation=function(){$(’.divOne’).rotate({angle:0,animateTo:360,callback:rotation,easing:function(x,t,b,c,d){returnc*(t/d)+b;}})}rotation();//演示4点击旋转//方式1$(’.divOne’).click(function(){$(this).rotate({angle:0,animateTo:180,easing:$.easing.easeInOutExpo});});varval=0;$(’.divOne’).click(function(){val+=90;$(this).rotate({animateTo:val});});参数参数类型说明默认值angle数字旋转一个角度0animateTo数字从当前的角度旋转到多少度0step函数每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数无easing函数自定义旋转速度、旋转效果，需要使用jQuery.easing.js无duration整数旋转持续时间，以毫秒为单位 callback函数旋转完成后的回调函数无getRotateAngle函数返回旋转对象当前的角度无stopRotate函数停止旋转无 演示虽然使用的是图片，但jqueryrotate并不只是能运用在图片上，其他元素如div等也可以使用。同时，你可以发挥想象，制作出更多关于旋转的特效。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》希望本文所述对大家jQuery程序设计有所帮助。

如何编写JQuery 插件详解

jQuery 如何写插件 -jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。1、类级别的插件开发类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：1.1 添加一个新的全局函数添加一个全局函数，我们只需如下定义：jQuery.foo = function() { alert(’This is a test. This is only a test.’); }; 1.2 增加多个全局函数添加多个全局函数，可采用如下定义：Java代码 收藏代码jQuery.foo = function() { alert(’This is a test. This is only a test.’); }; jQuery.bar = function(param) { alert(’This function takes a parameter, which is "’ + param + ’".’); }; 调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar(’bar’);1.3 使用jQuery.extend(object);　jQuery.extend({ foo: function() { alert(’This is a test. This is only a test.’); }, bar: function(param) { alert(’This function takes a parameter, which is "’ + param +’".’); } });

Jquery弹出层插件ThickBox的使用方法

thickbox是jQuery的一个插件，其作用是弹出对话框、网页框，使用户体验度更加愉悦，下面就来简单介绍它的几种用法。声明一下：这只是个人的总结记载而已。准备工作：你需要三个文件：thickbox.js、thickbox.css、jquery.js，网上到处可下具体使用：第一步：将这三个文件引入到你要使用thickbox的页面复制代码代码如下:《scripttype="text/javascript"src="jquery.js"》《/script》 《scripttype="text/javascript"src="thickbox.js"》《/script》 《linkrel="stylesheet"href="thickbox.css"type="text/css"/》第二步：一般简单使用就是给《a》标签和Button添加样式：class=thickbox还有就是通过thickbox函数调用：如tb_init()、tb_show()；见下文。几种不同用法：1.点击显示图片： 《ahref="001.jpg"class="thickbox"》《imgsrc="001.jpg"/》《/a》ok,就这样搞定2.点击按钮或链接：复制代码代码如下:《inputalt="#TB_inline?height=300&width=400&inlineId=div1"title="shawnliu"class="thickbox"type="button"value="Show"/》 《ahref="#TB_inline?height=155&width=300&inlineId=div2&modal=true"class="thickbox"》Showhiddenmodalcontent.《/a》《divid="div1"style="display:none"》 《P》 这是一个非模式对话框。 《/P》 《/div》 《divid="div2"style="display:none"》 《P》 这是一个模式对话框。 《pstyle="TEXT-ALIGN:center"》《INPUTid="Login"onclick="tb_remove()"type="submit"value=" Ok "/》《/p》 《/P》 《/div》