查看插件效果 如题，模仿新浪微博首页滚动效果写的一个jQuery插件。 刚开始练习写jQuyer的插件，还不大熟手，凑合着用先。 代码如下： (function(jQuery){ /** * jQuery.weibo * Date: 2012/01/22 * * @projectDescription 仿照微薄滚动效果 * * @author Joe nikejaycn#gmail.com * @version v0.1 */ jQuery.fn.iscroll = function(params){ options = { ShowTime: 500, //显示时间 moveTime: 3000, //移动时间 charElement:”li”, //子节点 ajaxTrunOn: false, //是否开启ajax请求，定时获取数据 ajaxTime: 30000, //发出一次ajax请求时间，默认是30秒获取一次数据 ajaxUrl: “”, //ajax数据请求路径 setAjaxHtml: function(data){ //数据源输出设置 //data是ajax返回数据 //在这里都其进行格式化输出 } }; jQuery.extend(options, [...]
查看插件效果 本插件的作用是为了支持table鼠标经过变色和选中效果，原始版本是只能单列或者单行选取。 修改了后的版本只是单个表格选取，配置参数如下： options = { ltColor: ‘#fbfbfb’, // 行背景交互色。默认为 ‘#ECF6FC’， 设置为 ‘none’ 则不使用背景交互色。 bgColor: ‘#fff’, // 背景色（默认背景色为白色）。 hoverColor: ‘#eff6ff’, // 当鼠标在行上悬停时的背景色。默认为 ‘#BCD4EC’。 hoverClass:”, // mouseover样式类；hoverColor属性优先。 hiliteColor: ‘#ffffe5′, // 行高亮色。默认为 ‘yellow’，设置为 ‘none’ 时关闭高亮。 hiliteClass:”, // 行或列高亮时使用的样式类，当设置了hiliteColor时被优先使用。 oneClick: false, // 每次只允许一行或一列高亮，当点击新行/新列时取消当前高亮。默认为false。 hover:’row’, // 设置mouseover特性，可使用如下值：’row’、’column’、’cross’ 。默认值为 ‘row’。 click:’row’, // 设置鼠标点击时的高亮选项，可用值：’row’、’column’、 ‘cross’。当设置为 ‘row’，点击时行高亮；当设置为 ‘column’，点击时列高亮；当设置为 ‘cross’，点击时行和列同时高亮。默认值为 ‘row’。 banColumns: [], [...]
AJAX为“Asynchronous JavaScript XML”（异步的JavaScript与XML技术），是一种广泛应用在浏览器的网页开发技术。Ajax是多项技术的综合应用，Ajax概念由 Jesse James Garrett 所提出，AJAX： 运用XHTML+CSS来表达信息； 运用JavaScript操作DOM（Document Object Model）运行动态效果； 运用XML和XSLT进行数据交换及操作； 运用XMLHttpRequest为Agent与网页服务器进行异步数据交换； 运用JavaScript技术实现。 类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生／合成”式（derivative/composite）的技术正在出现，如AFLAX。 来自wiki对Ajax技术的一段说明。使用jQuery封装的ajax多了，同时对原生的ajax技术产生兴趣，异步刷新的核心是XMLHttpRequest这个对象，Come On~ 查看demo页面 一、创建一个XMLHttpRequest对象 XMLHttpRequest对象并没有标准化，在IE和其他浏览器创建的过程不相同。幸运的是，使用XMLHttpRequest对象的API在所有浏览器都是一样的。 这是一段来自wiki的代码 // Provide the XMLHttpRequest class for IE 5.x-6.x: // Other browsers (including IE 7.x-8.x) ignore this // when XMLHttpRequest is predefined var xmlHttp; if (typeof XMLHttpRequest != “undefined”) { xmlHttp = new XMLHttpRequest(); } [...]
今天心血来潮，就研究了一下JQ自定义动画的一些简单用法。点击这里查看效果 下面是JS代码. $(function(){ //定义easing jQuery.easing.def = ‘easeInQuad’; var sel1 = $(“<select>”).appendTo(‘#controls’); for (x in jQuery.easing) { if (x != ‘linear’ && x != ‘swing’) sel1.append($(‘<option>’).attr(‘value’, x).text(x)); } sel2 = sel1.clone().appendTo(‘#controls’); sel3 = sel1.clone().appendTo(‘#controls’); sel4 = sel1.clone().appendTo(‘#controls’); sel1.val(‘easeInOutCirc’); sel2.val(‘easeOutBounce’); sel3.val(‘easeInCubic’); sel4.val(‘easeInElastic’); //第一个动画 单向运动 $(“.inline_box:eq(0)”).bind(‘click’, function(){ var _this = $(this), _width = _this.width() – _this.find(‘span’).width(); _this.find(‘span’).animate({left: ‘+’+ [...]
1.通过方法返回Jquery对象实例 //用 var someDiv = $(‘#someDiv’).hide(); //代替 var someDiv = $(‘#someDiv’); someDiv.hide(); 2.使用find来查找 //用 $(‘#someDiv’).find(‘p.someClass’).hide(); //代替 $(‘#someDiv p.someClass’).hide(); 因为可以不必触发Jquery的Sizzle引擎，同时在写选择符的时候尽量让您的选择符简单同时优化最右边的选择符 3.不要滥用$(this) //用 $(‘#someAnchor’).click(function() { alert( this.id ); }); //代替 $(‘#someAnchor’).click(function() { alert($(this).attr(‘id’)); }); 4.ready的简写形式 //用 $(function() { }); //代替 $(document).ready(function() {}); 5.让你的代码安全 //方法1（使用noConflict） var j = jQuery.noConflict(); j(‘#someDiv’).hide(); // The line below will reference some other [...]
最近在做一个相册功能过的时候，需要动态改变img的src地址，并且在图片加载完成后再加载对应的相片评论。需要用到的一个小功能，如下: var objImagePreloader = new Image(); objImagePreloader.onload = function() { $(‘#lightbox-image’).attr(‘src’,'/demo.jpg’); //do something objImagePreloader.onload=function(){}; }; objImagePreloader.src = ‘/demo.jpg’;
