首页风格
门户
博客

jQuery插件

jQuery插件

[JS代码] 使用javascript来互相转换画布canvas和图片image

使用javascript的drawImage方法可以方便的将图片image转换为画布canvas,如下:

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
  var canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  canvas.getContext("2d").drawImage(image, 0, 0);

  return canvas;
}

同时也可以用以下代码来将画布canvas转化为图片image,如下:

// Converts canvas to an image
function convertCanvasToImage(canvas)…

阅读更多

[jQuery代码]如何使用javascript/jQuery预先加载图片

下面这段代码可以有效的帮助你预先加载图片。

(function($) {
var cache = [];
//参数是图片相对于当前页面的路径
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);

标签: javascript代码, javascript代码大全, 图片预加载js

阅读更多

[JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape

如何判断ipad和iphone是否为横屏或者竖屏 - portrait或者landscape

在ipad/iphone开发中我们往往需要判断用户目前的屏幕的位置,这样加以优化显示应用内容。今天这里我们分享一个jQuery的代码,能够有效帮助大家判断横屏或者竖屏。注意这里调用了jQuery的方法,所以你需要引用jQuery类库。

function orient() {
alert('gete');
if (window.orientation == 0 || window.orientation == 180) {
$("body").attr("class", "portrait");
orientation = 'portrait';

标签: javascript代码, javascript代码大全, 横屏竖屏判断

阅读更多

如何在链式操作中使用hide(), delay()和show()?

日期:2012/03/01  来源:GBin1.com

jQuery开发中最快速的编程方式就是链式操作,在开发一个简单的定制加载页面过程中,我需要能够让一个页面元素出现,延时1000毫秒,最后消失,本来这个过程非常简单,我觉得直接使用如下代码即可搞定:

$("#gbin1-text").show().delay(1000).hide();

但是,让我费解的是,这个代码即不出错,也不显示我希望出现的元素,然后消失。

本身这个代码没有任何问题,如果大家尝试使用下面的代码,可以正常工作。

$('#gbin1-text').slideUp(300).delay(800).fadeIn(400);

本身这俩行代码没有太多区别啊,但是上面代码就是无法正常工作,无奈之下,Google了一下,发现原因了。

如果你将以上代码修改为

$("#gbin1-text").show(0).delay(1000).hide(0);

标签: delay(), hide(), show(), Javascript, AJAX, jQuery, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery小测验, jQuery Quiz, jQuery测试, jQuery在线检测

阅读更多

如何使用jQuery或者javascript处理Cookie?

日期:2011/12/30  来源:GBin1.com

Cookie是我们做前台开发过程中时常需要用到的技术,做为HTML5之前客户端唯一可以使用的本地存储方式,它能够有效的帮助我们实现一些简单数据的本地保存。今天我们介绍使用Javascript和jQuery方式来处理和保存Cookie。

Javascript

javascript处理cookie:

function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+";…

标签: jQuery, jQuery API, jQuery插件, jQuery教程, jQuery技术网站, jQuery学习网站, jQuery教程, jQuery cookie plugin, cookie, cookie js, javascript cookie, javascript处理cookie, jQuery处理cookie, jQuery插件处理cookie

阅读更多

[jQuery代码]如何动态加载jQuery类库即如何在需要的时候再加载jQuery类库?

日期:2011/12/18  来源:GBin1.com

jQuery类库说实话并不是很臃肿,压缩版本的jQuery类库可以帮助你有效地减少页面大小。不过并不是所有页面你都需要用到jQuery类库,或者你希望能够更好的优化你的页面使之加载的更快。不管怎样,我们希望能够自己来管理类库的加载。

在线演示

如何实现jQuery类库的动态加载呢?

第一步:调用一段代码来调用jQuery

第二步:持续调用直到jQuery类库能够加载

第三步:运行需要基于jQuery类库的代码

以下是具体代码。

代码1 (第一步)

<body>
     <h3 id='status'>jQuery is not loaded yet.</h3>
     <input type='button' value='Loading jQuery now...' onclick='load()' />
</body>

代码2 (第二步)

load…

标签: jQuery代码, jQuery代码大全, jQuery动态加载, 动态加载jQuery类库, lazy loading jquery, 懒惰加载jQuery

阅读更多

jQuery中如何使用mouseout和mouseleave?

日期:2011/11/28  来源:GBin1.com

jQuery中的鼠标事件中有mouseout和mouseleave俩个看起来类似的事件。

这俩个事件的使用有些区别,如下是jQuery文档中的官方解析:

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it…

标签: jQuery代码, jQuery代码大全, mouseout, mouseleave

阅读更多

[jQuery代码]jQuery中如何使用document ready?

日期:2011/11/28  来源:GBin1.com

很多人都使用jQuery的document ready方法,但是不是所有人都理解如何使用jQuery。

使用方式1

$(document).ready(function() {
    //当DOM完成后执行代码
});

使用方式2

$(function(){
    //jQuery 相关代码
});

和第一个种方式一样,语法上和第一钟方式没有区别

使用方式3

jQuery(document).ready(function($) {
    //当DOM完成后执行代码
});

$符合和以上代码中的jQuery意义一样,这样使用可以避免不同类库的冲突。

因为目前的各种流行的类库中都使用$来作为缩略符号,这样造成浏览器无法解析。

我们可以使用完整的jQuery来避免混淆,然后调用$.noConflict()方法

jQuery.noConflict();…

标签: jQuery代码, jQuery代码大全, noConflict, document.ready(), jQuery ready(), GBin1

阅读更多

如何使用javascript得到鼠标的位置?

日期:2011/11/22  来源:GBin1.com

javascript开发中有时候需要获取当前的鼠标位置,下面俩段代码,都可以帮助大家实现以上需求。

使用jQuery

在线演示1

jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
})

使用Javascript

在线演2 

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

//…

标签: javascript mouse, mouse position, 鼠标位置, 得到鼠标位置, 如何得到鼠标位置, GBin1

阅读更多

如何使用jQuery快速生成图片的缩放效果

日期:2011/11/07  来源:GBin1.com

下面一段代码可以帮助你快速添加缩放效果给页面特定图片。可以帮助你实现一种突兀的效果。

在线演示

$('li img').hover(
function(){
var self = $(this);
var img = self.stop().animate({width:120, left: '50%', top: '50%', marginTop:'-25px', marginLeft:'-20px', 'z-index':10}, 800);
},

阅读更多

如何快速创建一个AJAX的&quot;加载&quot;的图片效果

日期:2011/11/06  来源:GBin1.com

开发过AJAX的朋友都可能需要自己生成"加载中"的图片显示效果,用来提示用户当前操作正在处理中。这里我们提供一个快速的方法生成这种效果。

当然你可以选择使用一些在线工具来生成类似的效果,请参考这篇文章:5个在线Ajax"加载中"旋转图标生成器工具

你只需要使用ajaxStart和ajaxStop方法,你可以将整个页面的ajax方法都加上"加载中"效果。如下:

在线演示

Javascript代码:

<script type="text/javascript">
$(document).ready(function () {
$('#loading')
.hide()
.ajaxStart(function() {

阅读更多

下一页

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐