不出意外的话,这应该是这个系列的最后一部分了。 第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢,只能算是加分项。废话不多说了,还是继续博文吧。 其实带背景半透明的备注的轮播效果也是网上一抓一大把,163,qq,taobao等等,仔细找找应该都能看到类似的效果。添加文本其实和前一文的添加控制器的方法差不多。无非也就是再append一个元素,在里面显示文本即可。 代码如下: /* -- 显示备注 --*/ var alt ...
其实凭借着之前良好的代码结构,加入控制器很简单(^_^这也就是为什么我说刚开始的架构的代码结构很重要!) 先说一下加入控制器的思路: 根据轮播元素的个数为每一个元素添加一个对应的控制按钮,(这里我直接用a标签来做,考虑语义的话可以用ul或ol),考虑到书写样式的方便可以先create一个控制器父标签,然后依次把每个控制按钮append到控制器父标签,再把父标签append到我们的轮播模块中就ok了。然后再为对应的元素添加上...
接上一篇,现在进行第二部分。 开始之前,还是说说前文提到的关于把所有函数都写在一个闭包内的优化问题。前文也提到了,因为我们在初始化的时候要调用的只是init,所以可以只把init写入闭包,其他功能函数作为init的原型继承方法来调用。所以前文的代码其实可以这样改写: 代码如下: var Hongru={}; function H$(id){return document.getElementById(id)} function H$$(c,p){return p.getElementsByTagName(c)} Hongru.fader...
下载JS文件引用到page中,如下代码: 代码如下: 注意其中draggable是用来实现拖拉的,如不需要这个功能不就不用引用。在目前最近的Jquery1.42下应用引用: 代码如下: 主要方法有: jAlert(message, [title, callback]) 创建一个alert jConfirm(message, [title, callback]) 创建一个确认allert,支持callback jPrompt(message, [value, title, callback]) 创建一个提示框让用户输入值,支持callback如果你有提供 可以...
前几天在blueIdea上看到一个淡入淡出的带注释的图片轮播效果http://bbs.blueidea.com/thread-2911266-1-1.html看了帖子作者的代码,虽然效果达到了,但是有几个地方本人有不同的看法: 1.那位作者的思路是隐藏掉真正的图片列表,而新建一个div,通过不断push当前图片到那个div的innerHTML里的方式来做一个一个交替变化。思路虽然有些新意,但是从目标效果的运行逻辑来看,通过改变列表元素的z-index值来实现交替变换其实更符合这个...
基于Web的在线应用已经是一个逐步成熟的趋势,Web应用的丰富多样化,都是基于JavaScript框架完成的,其中 jQuery 框架被越来越多的Web开发者青睐,它可以让你“少写,多做”轻松完成复杂效果,这里就是基于jQuery 的14个图片放大编辑插件。 1,jQuery gzoom plugin 2,Hover Zoom 3,AnythingZoomer jQuery Plugin 4,JQZoom 5,jQuery Cycle plugin 6,crop, labelOver and pluck 7,ImgAreaSelect 8,Jcrop 9,PHP & jQuery imag...
以前我一直用的那个(eyecon.ro) 功能完整也简易,但是不尽符合上面的要求,于是 google了N下,结果没找到现成的jquery拾色器插件很好的支持以下功能: 简单易用,仅显示常用的那些色块给用户选择,另外提供一个输入框方便用户输入自定义的色值 于是我写了icolor这个插件,除了支持上面的要求,还有别的一些特性如下: 1,默认提供的色值为“常用的浏览器安全的色值”。相当于整合了下面最后一个prototype版本的颜色拾取器。关于浏览...
我选择了jQuery,最主要是它的思想“write less,do more",因为我是一个挑剔的人,以前写过的代码,会时不时翻出来,看看有没有可以精简,优化的地方。一来是对不断学习的推动,二来可以将新的思想,技术应用到里面去。 对于jQuery插件的写法,以前就有介绍过,网上也有很多例子。 这里简要地进行些写法,主要是简写的说明,见下列代码: 代码如下: //jQuery插件的写法(需要传入操作对象) ;(function($) { //PI_TestPlugIn为插...
1.初始化上传控件数量。 代码如下: $(document).ready(function() { $(#H_File).uploadFile({ key: test,count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件。 2.上传图片成功后 这就是最终的效果,如果您有更好的插件,希望一起开源。 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_upload1.rar (262.34 kb)
对此,jquery.boxy插件已经做得非常强大了,常用的提示、确认,拖拽、改变大小、异步加载都非常实用,导致文件较大(可忽略不计),很多功能并不需要,为此,抱着在边学边实践的态度和想法,自制一款适用于本项目的轻量级弹出层插件,这是第一次写jqeury插件,也为了以后能将常用操作封装为jquery插件做准备吧。 首先来个插件名字,这样才能去唬人,就叫jquey.cvbox.min.js吧,cv就是网站域名ChinaValue的缩写,压缩后的容量控制在...
原理是利用1px的div,具体实现看代码。 使用方法: 代码如下: $(.test).rounder(); 这样会根据默认的设置产生一个圆角框,效果如图: 圆角处会有点锯齿:(如果仅此而已,那肯定是不够的。我们会想加上自己的一个样式该怎么办?使用方法: 代码如下:$(.test).rounder({borderColor:red,backgroundColor:#EEE,color:blue}); 效果如图: 接下来我就来讲讲实现过程了,先附上jQuery代码如下: 代码如下: (function($){ $.fn.rounder...
常听有人说jquery 比较难学,只要你感兴趣,实现幻灯片效果还是蛮有乐趣的,下面的Jquery 幻灯片教程将引领你进入Jquery插件开发的喜悦中,希望对大家有帮助。 1、 jQuery Easy Slides v1.1<?XML:NAMESPACE PREFIX = O /> <?XML:NAMESPACE PREFIX = V /> 在所有的Jquery幻灯片插件中,Jquery easy sildes算是最容易使用的一个。 2、 The Piecemaker XML Gallery非常酷的具有3D效果的jquery 插件,有详细的制作方法,...
使用情形如下: 页面a.aspx中点击按钮弹出模拟层,在这个层中有一个输入文本框“监督人”处调用hintbox来产生即时查询功能。 直接调用产生了如下情形:于是找到jquery.hintbox-1.3.js这个文件,发现其中出现这么一行: 代码如下: $("#windown-content").ajaxStart(function(){ $(this).html(""); }); 将其改为: 代码如下: $("#windown-content").html(""); 原因是两个插件即使是在不同情形下触发ajax事件,使用的仍是同一对象,...
一。基本介绍 这个jq插件主要是使用canvas来画出这个tip的外表,而且这个tip能够自动调整大小,由于是用canvas画的,而不是图片,所以调整之后也不会变模糊之类的。 主要思想是用一个P标签来装载title的值,然后把他放在一个大小根据这个P来改变的canvas里面,难点是定位。 话说貌似我们一开始不指定font-size的时候,火狐可以查找出一个默认的font-size值,而谷歌浏览器却读不出值,这个较为郁闷。 详细说明请参考代码注释。 二。...
序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦。 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件。 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同。 4.该插件依然是练习之作,一人之力,错误难免。 实例演示 1.载入页面的同时...