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); }); }); ...