标签为: "jquery" 的文章

CSS+jQuery实现滑动幻灯片实例详解

今天我看见一个比较不错的jQuery幻灯片教程，比我之前的文章《两个简单的jQuery幻灯片实例》写的更为详细，并且有框架布局的演示图片，特地转载来，部分英文不翻译了，很简单的~

HTML部分代码

Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.

<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

css+jQuery实现滑动幻灯片实例教程

css+jQuery实现滑动幻灯片实例教程


阅读更多…

2010年2月8日  断桥残雪
没有评论
JavaScript, 网络技术 ,

jQuery 1.4.1 中文参考文档下载

jQuery1.4已经发布接近一个月了，而最新的jQuery1.4.1也已经发布~今天在itFeed上发现已经出现了jQuery1.4.1的中文参考文档啦，迅速转载一下：

新鲜出炉，更新了大量内容，应该还有一些BUG，欢迎纠错：

http://code.google.com/p/jquery-api-zh-cn/downloads/list

本来更早出来的，结果半路又杀出1.4.1，而且发现bind、live还有ajax等方法有大量更新，所以重新翻译这三个方法，消耗了大把时间。所以今天才发出来。

jQuery1.4.1中文文档在线地址：http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml
继续阅读：《jQuery1.4正式版发布啦》、《jQuery Easing动画效果扩展》、《jQuery1.4正式版新功能及性能测试》、《jQuery1.4十五大新功能实例精讲》

2010年2月3日  断桥残雪
没有评论
JavaScript, 网络技术 ,

使用hash来实现Ajax前进后退

Ajax应用中容易导致浏览器的前进后退按钮失效，不产生前进后退功能，在本文中断桥残雪就通过改变location.hash值来解决Ajax过程中导致的浏览器前进后退按键失效的问题，此方法兼容IE6+，Firefox，chrome，Safari，Opera等浏览器。

在去年断桥残雪已经写了一篇使用iframe来解决Ajax前进后退的方法，也提到了通过改变hash的方法来解决这个问题，这也是比较方便的方法，而使用iframe实现Ajax前进后退可以在不改变浏览器地址栏地址的前提下通过iframe地址的变化来“欺骗”浏览器产生前进后退，hash的方法则是直接改变浏览器地址栏地址，从而使浏览器产生前进后退。

hash导致浏览器产生前进后退原理

浏览器URL的hash值，指的是URL地址之后的#hash部分，我们可以通过JavaScript的location对象的location.hash方法来获得或者改变，但是IE中，不能设置，好像是IE中只能通过连接来实现hash的改变，不过我们可以通过jQuery插件hashchange中的$.locationHash函数来解决这个问题。

比如一个页面的地址是：http://www.js8.in/#top，那么这个页面的location.hash=”#top”，如果要改变这个地址的hash，可以给location.hash赋值，如：location.hash=”#home”，在IE下可以使用hashchange函数中$.locationHash(hash)给hash赋值。在日常我们常见的使用hash应用中，hash值使用最多的方式是 “返回顶部” 功能。
阅读更多…

2010年1月26日  断桥残雪
3  条评论
Ajax, JavaScript, 网络技术 , ,

两个简单的jQuery幻灯片实例

上周的手脑会议我为了演示jQuery动画的强大功能，顺手做了两个简单的jQuery幻灯片实例，其中一个是运用的fadeIn、fadeOut，另外一个使用的是滚动的效果。因为是给公司内部CSS人员做jQuery动画演示，所以也没有做什么美化，今天顺手放出来，算是凑一篇文章吧~

淡入淡出幻灯片效果

首先我们建一个DIV，里面包括5张img，其中主要css部分代码如下：

#slider1{
	margin:20px auto;
	height:240px;
	width:740px;
	position:relative;
	}	 
#slider1 img{
	position: absolute; 
	top: 0px; 
	left: 0px;
	display:none;
}

原理分析：通过间隔一定时间来改变下一张图片的z-index，实现淡入淡出的幻灯片效果，具体js部分代码如下：

      var now=0;
      setInterval(function (){
          pre=now===0?2:now-1;
          nxt=now===4?0:now+1;
          var div=$("#slider1").children();
          div.eq(now).fadeOut(0,function(){   
		      div.css('z-index',1);       
              div.eq(nxt).css("z-index",6).fadeIn(600);
              div.eq(pre).css("z-index",4);
              div.eq(now).css("z-index",5);
              now=nxt;
          });
      },3000);

阅读更多…

2010年1月24日  断桥残雪
3  条评论
JavaScript, 网络技术

jQuery 1.4的十五大新功能实例精讲

jQuery 1.4正式版已经发布了。 jQuery1.4 包含了很多新特性，并且在功能上进行增强，性能也得到了一定的提升！本文将结合实例向您介绍jQuery1.4的一些新特性和优化增强。
你可以立刻下载jQuery 1.4试用： http://code.jquery.com/jquery-1.4.js，
也可以使用谷歌提供的服务：http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

1.  jQuery()创建DOM元素：支持传参设置属性

之前，jQuery可以通过 attr 方法设置元素的属性，既可传属性的名和值，也可以是包含几组特定 属性名值对 的 对象。在 jQuery 1.4 中，你可以把一个参数对象作为附属参数传给 jQuery 函数本身，同时创建HTML元素。

比方说你想要创建一个带有几个属性的锚记元素（<a></a>）。在1.4中，一切如此简单：

jQuery('<a></a>', {
 id: 'foo',
 href: 'http://google.com',
 title: 'Become a Googler',
 rel: 'external',
 text: 'Go to Google!'
 });

你大概也能猜到，这个锚记元素没有的 text 属性会调用 jQuery 的私有方法”.text()” ，把元素里的文字设置为“Go to Google!”
阅读更多…

2010年1月17日  断桥残雪
2  条评论
JavaScript , ,

jQuery Easing 动画效果扩展

最近断桥残雪部落格的首页文章添加了“点击展开/关闭”文章功能，并且返回顶部、跳到评论等功能进行了动画效果的修改，此次修改使用了jQuery Easing动画效果扩展插件：jQuery Easing Plugin。在jQuery文档中我们可以看到，自定义动画函数.animate()有四个参数：

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
duration (String,Number) : (可选) 三种预定速度之一的字符串(”slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
callback (Function) : (可选) 在动画完成时执行的函数

其中参数easing默认有两个效果：“linear”和“swing”，如果需要更多就要插件支持了，也就是今天断桥残雪要跟大家分享的插件：jQuery Easing Plugin.

在jQuery Easing中设置了easeInElastic、easeOutElastic、easeInOutElastic等共31中不同的效果，应该可以满足大家的需要啦，如果你还想研究下动画移动的效果图，还可以看一下这篇文章不仅有动画演示，还有图片分析。 阅读更多…

2010年1月15日  断桥残雪
3  条评论
JavaScript ,

jQuery选择器使用详解

随着jQuery的风靡，有很多关于jQuery选择器的文章，可是很多人没有系统的学过或者总结过jQuery的选择器使用方法，本文主要跟大家讨论一下jQuery的选择器的用法，针对于不同的jQuery用户，从基础说起，带您领略jQuery强大的选择器。

在跟大家分享自己的jQuery选择器的使用方法之前，我想跟大家说一个Tip，当你使用jQuery选择器的时候，有时候我们却不一定使用jQuery的选择器里面的函数，而是要简单的返回HTML对象，如果使用getElementById之类选择出HTML对象，就比较麻烦了，再说我们强大的jQuery选择器就浪费了，在这里我通过Firebug查看了jQuery选择器返回的对象，发现原来$(”#id”)[0]就是我们要的HTML对象，比如我们要取其中的innerHTML就可以使用$()[0].innerHTML。

关于jQuery选择器

通过jQuery的参考手册 我们可以看见jQuery的选择器分为：基本、层次、简单筛选、内容、可见性筛选、属性筛选、子元素、表单以及表单及其属性，共九种选择器类型，本文主要介绍基本选择器、属性、简单筛选、内容筛选这几个常用的选择器。如果能熟练掌握这几个选择器，那么我们的jQuery选择器就已经很熟练了

jQuery基本选择器

jQuery的选择器跟CSS的选择器很接近，甚至于跟CSS的选择器统一，这样就比较容易学习，简单选择器就是我们常用的CSS的ID和Class选择器，例如下面的代码把id为world的html内容改为“Hello World!”
阅读更多…

2009年12月27日  断桥残雪
1  条评论
JavaScript, 网络技术 ,

jQuery1.4浏览器判断函数bug仍然存在

今天看了一下jQuery1.4Alpha2的代码，发现jQuery1.4Alpha2中的浏览器判断仍然没有添加对Chrome的判断，这是我想起了以前写过的一篇文章——《jQuery浏览器判断一个bug，以及修改建议》。我使用的测试代码如下：

<script src="http://code.jquery.com/jquery-1.4a2.js"></script>
<script>
alert($.browser.safari);
</script>

上面的代码在chrome中仍然是true，对于现在chrome的流行，jQuery1.4竟然漠视，不知道何解？
jQuery1.4中的源代码如下：

browser: {
		version: (/.*?(?:firefox|safari|opera|msie)[\/ ]([\d.]+)/.exec(userAgent) || [0,'0'])[1],
		safari: /safari/.test( userAgent ),
		opera: /opera/.test( userAgent ),
		msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
		firefox: /firefox/.test( userAgent )
	}
jQuery.browser.mozilla = /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent );

断桥残雪部落格再次提醒如果用到jQuery浏览器函数的，要特别处理一下chrome跟safari~不要导致判断错误，如果jQuery1.4正式版修复了这个bug，那就更好啦~
关于浏览判断函数可以参考以下两篇文章：
1、《jQuery浏览器判断一个bug，以及修改建议》
2、《js判断浏览器的函数，可区分chrome，safari》

2009年12月26日  断桥残雪
没有评论
JavaScript, 网络技术 ,

jQuery1.4 Alpha 2发布

作为一个jQuery的发烧友，对于jQuery1.4版本的新闻十分的关心，刚刚收到消息，jQuery1.4α2版本已经发布了。下面是我从jQuery官方博客获得的消息：

jQuery1.4 Alpha 2已经发布啦！这是jQuery1.4的第二个Alpha测试版本（第一版的发布链接），这个版本的代码是稳定的（并且在所有市面上流行的浏览器中通过了测试）

获取jQuery1.4 α2版本：
未压缩版本：http://code.jquery.com/jquery-1.4a2.js
压缩版本：http://code.jquery.com/jquery-1.4a2.min.js

注意：如果您使用jQuery1.4 Alpha2版本，并且遇到了bug，请使用未压缩版本，它可以更加简单的找到错误的代码所在的位置。

目前所知道1.4版本的功能上相对版本 1.3.2进行了一些扩展，包括：

  1. live 方法被大幅度检修，现在支持提交，更改，mouseenter，mouseleave，焦点，模糊在所有浏览器活动。现在还支持背景和数据。
  2. append, prepend 方法优化
  3. add has been adjusted to always return elements in document order.
  4. find, empty, remove, addClass, removeClass, hasClass, attr, and css 等方法进行了重构，大大的优化
2009年12月18日  断桥残雪
没有评论
JavaScript, 网络技术 ,