1.jquery隐藏and显示事件$("p").hide(); //隐藏事件 $("p").hide(1000); //1秒内缓慢隐藏 $("p").show(); //显示事件 $("p").toggle(); //在隐藏和显示中切换隐藏后显示提示callback$("p").hide(function(){ alert("提示消息已经隐藏"); }); $("p").hide(1000,function(){ alert("1s内缓慢隐藏并提示消失已经隐藏"); });2.淡入淡出$("#p1").fadeIn(); //淡入$("#p2").fadeIn("slow"); //缓...
在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用,而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。构建框架,基本没难度。<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>透明度函数的封装</title><style type="text/css">#box{width: 200px;height: 200px;background: red;margin: 50px auto;opacity: .3;filter: al...
效果图:运行以后,刷新下即可。jQuery淡入淡出、展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;} $(document).ready(function(){ $(".menu").hover( function(){ //$(".content").fadeIn(800); // 淡入 ...
经典选项卡 .tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;} .tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;} .tab dt strong{padding:0 15px;color:#444;} .tab dt a{display:inline-block;cursor:pointer;padding:0 10px;text-align:center;background:#f1f1f1;color:#000;} .tab dt a.on{background:#fff;color:#333;fon...
其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载 使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义; 代码如下: 样式文件无须引入,若使用DEMO中的结构,可直接将样式合并于项目页面中.建议样式自定义. 2. 在页面中调用插件...
思维是个很诡异的东西,一旦陷入某个死角,很难逃出. 惟有冷却一些时间,完全抛开旧的思维,才能找到新的出路. 其实就是一个幻灯效果,考虑到使用方便,就封装成一个插件了. 插件特点 1. 参数高度自定义; 2. 可重复调用且与不影响; 3. 插件文件小,压缩后仅1.04k,开发版3.29k. 演示及下载 点此查看DEMO 点此下载插件 使用方法 1. 引入jQuery库文件及jQuery.iFadeSlide.pack.js插件文件(若页面有其他js文件,可与之合并以减小http请求),引入...
不出意外的话,这应该是这个系列的最后一部分了。 第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢,只能算是加分项。废话不多说了,还是继续博文吧。 其实带背景半透明的备注的轮播效果也是网上一抓一大把,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...
前几天在blueIdea上看到一个淡入淡出的带注释的图片轮播效果http://bbs.blueidea.com/thread-2911266-1-1.html看了帖子作者的代码,虽然效果达到了,但是有几个地方本人有不同的看法: 1.那位作者的思路是隐藏掉真正的图片列表,而新建一个div,通过不断push当前图片到那个div的innerHTML里的方式来做一个一个交替变化。思路虽然有些新意,但是从目标效果的运行逻辑来看,通过改变列表元素的z-index值来实现交替变换其实更符合这个...
今天练习了个Jquery淡入淡出的特性代码如下: 代码如下: 无标题文档 #gallery1 {width:100%; overflow:hidden;} #gallery1 a {position:relative; float:left; margin:5px;} #gallery1 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;} #gallery1 img { border: solid 1px #999; padding:5px;} #gallery1 a:hover...
如题,只有思路,没有代码。 这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了。 比如写一个图片切换类,切换效果是淡入淡出,通常我们会这样写:当切换发生的时候,当前显示的图片淡出(渐渐隐藏),将要显示的图片淡入(渐渐出现),通常两张图片的动画速度是一致的,以便实现当前图片完全隐藏之时就是下一张图...
往带有png图的类里加红色字的部分代码如下:background-image:url(******.png)!important;background-image:url(../images/space.gif);/*space.gif 是一个透明的图片文件*/filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="******.png", enabled=true, sizingMethod=scale);
代码如下:无标题文档 #div1{width:100px;height:100px;background:#ccc;position:absolute;top:0px;left:0px;} #div2{width:100px;height:100px;background:#ccc;position:absolute;left:0px;top:110px;} #div3{width:100px;height:100px;background:red;position:absolute;left:220px;top:0px;filter:alpha(opacity:30);opacity:0.3;} #div4{width:100px;height:100px;background:red;position:absolute;left:330...
代码如下: 无标题文档 $(document).ready(function(){ $("#btn1").toggle(function(){ $("p").fadeOut("slow"); },function(){ $("p").fadeIn("slow"); }); $("#btn2").toggle(function(){ $("p").fadeTo("slow",0.66); },function(){ $("p").fadeTo("slow",0.66); }); }); ...