一 : 信手拈花，舞尽年华

且行，且止，采一地红花绘一场风花雪月为你我的相遇做背景。且歌，且泣，录一首情歌造一方浓雅氛围为你我的相爱做烘托。声声慢，漫漫舞，为郎君舞一曲江南小巷里的柔情妩媚。字字情，轻轻吟，为美人题一首只应天上有的爱慕绝句。

给我一树花，为你造一场花雨。婀娜多姿似彩碟，翩翩起舞若雀羽，摇摇晃晃如醉酒，袖里散花像天仙。在一树花下独舞，寒了落花羞了粉蝶低了绿枝，却吸引不来心里向往的那个过客。落花铺一地，衣带渐宽人憔悴，下一个花开时节，舞姿是否还像当年那样华丽？

窈窕淑女在水一方，所为何事？千芳散尽舞动人生，流水不解其中味，过尽三千依旧无恋情。汗水浸湿了绸缎沾湿了青丝，却高傲的不肯停下擦拭汗颜，芳草不明其中情，依依呀呀低耳语。一曲未罢一支又起，袅袅婷婷玉臂展，风姿优雅玉人动，碎花长裙自由舞，蜻蜓点水还未休。过尽千帆皆不是知音之客，年华易逝，你来之时不知是否还有那时的风貌？

朦胧月色照红楼，余音绕指柔，音乐附舞裙，节奏随步履。轻如飞燕，时起时伏任我意。动则飓风，吹尽万种风情。静则素颜，任是无情也动人。一静一动音乐逝，一起一落年华衰。熙熙攘攘的看客却没有一人能始终驻留在某个角落注视这一举一动，红楼喧闹歌舞升平，红楼人流数不尽，那个人还是没有出现，会不会空等一世？或者当那个人来之时已经再也舞不动了……

绿竹通幽处，风高星河稀，百鸟争先栖，嫣红随叶眠。盼望一曲潇湘，带动舞步的欲望。期待一袭白袍信手琵琶奏一曲人间四月芳菲尽，而我款款落地，一指拈花，舞一支落花似雪雪如羽。渴望一眼秋波，承载对华丽进行曲的赞赏。渴望一抹浅笑，诠释对午夜飘舞的喜爱。渴望一指柔肠，叙述对舞若天堂的爱慕。渴望一响掌声，寄托对纷花漫天的青睐。

信手拈花，插一朵在发梢，拉起裙摆，走过千水万山寻找高山流水之处。在高山流水之音里，又开始簌簌起舞。心若浮尘，身若弹指。眼含苍茫，唇微微启。走过天涯，舞向海角，今生今世沉醉于飞舞只为寻找你的身影。只是你的脚步可不可以快一点点，一点点就好，在烟花三月的扬州深巷里为你舞尽天上人间！( 文章阅读网：www.61k.com )

脱下层层华丽的舞裙，套上米白素衣，扬起碎花边。溪边，湖边，海边，山间，月下，花下，西楼，戏楼，红楼……为你舞遍天下。

舞尽了绝代年华，舞尽了万种风情，舞尽了亿万姿势，却还是等不来你，等不来你的身影，而我现今是一帘瘦影。

年华啊！多希望你犹如西湖之倒影，永远停留在我风华正茂的时节，让我以最风光的面貌，最佳的状态在他的面前舞一曲，只一曲。为这一曲，全世的感情一生的悸动将都融入其中，为这一曲，朝朝暮暮夕阳西下白了青丝。

剪断一缕发丝，若是我老君还年轻就当做我一生的纪念送你一世情，若是我飘然而逝而你还未出现，那么就当我一生的遗物赠你我一世的遗憾。

只等候你，等候你来观赏我全世的舞姿，清风屡屡，是你送我的耳语吗？嘱咐我一再的等待吗？

绝代佳人，绝世舞姿，舞尽弱草破土，舞尽葱葱郁郁，舞尽落叶纷纷，舞尽白雪皑皑，舞尽沧桑年轮……引不来你的一眼销魂。

二 : 图片轮播，信手拈来（jquery）

制作图片轮播，可以说是js或者jquery学习者应该掌握的技巧。但惭愧的是本菜之前一直一知半解，这回抽了半天多总结了下分享给大家。虽然标题比较吹牛，但目的是希望大家看了之后制作图片轮播会非常迅速。

首先申明几点：

1.既然使用了jquery，制作方法就不再是最基础的那种将图片列表的位置一直改变，比如：切第二张图片left:-100px，切第三种图片left:-200px，切第四张图片left:-300px。

这种方法在从最后一张图回第一张图时会快速倒回去，搓爆了。

2.制作目标是轮播基本的三个功能：1）自动播放 2）光标移入停止播放，移开继续播放 3）按钮操作前/后张图片切换

3.制作图片轮播的方法网上非常多，我的写法不一定是最简单的，但确实比较少，思路也算清晰。

准备工作：

1.body中写入如下内容：

复制代码

<div id="container">

<ul id="picList">

<li><img src="images/1.png"></li>

<li><img src="images/2.png"></li>

<li><img src="images/3.png"></li>

<li><img src="images/4.png"></li>

<li><img src="images/5.png"></li>

<li><img src="images/6.png"></li>

<li><img src="images/7.png"></li>

</ul>

</div>

复制代码

其中外部div表示我们需要的“相框”，ul列表即是图片列表

2.将相框尺寸设为单张图片的尺寸；ul宽度设为图片列表的总宽度，可以在CSS中设置，不过写在javascript中动态添加也比较好；

var picArr=$("#picList li");

$("#picList").css("width",picArr.length*120);

最后让ul下的li float:left使图片横排。

完成之后效果如上，淡绿色的边框部分就是我们的“相框”。

普通写法：

这种写法个人认为比较简单，也比较实用。后面有个高级点的写法，虽然唬人但也麻烦一些。

复制代码

function next(){

$("#picList li:first-child").animate({

marginLeft:"-120px"

},1000,function(){

var temp=$(this).clone();

$(this).remove();

temp.css({marginLeft:"0"});

$("#picList").append(temp);

});

}

复制代码

解释下上面的代码，本例中单张图片宽120px高190px。

这个next函数即向后播的函数，首先jquery中的animate自定义动画使图片列表的第一列左移120px，用时1000毫秒，左移完成后执行接下来的函数：

将图片列表的第一列克隆存在名为temp的变量中，将第一列删除。此时克隆后的temp依然保持着之后marginLeft:"-120px"的css样式，先将其回0，否则在将插到队尾时会盖在前一张上。

最后将克隆后的列通过append()插入队尾。

使用setInterval循环执行next函数：

var intervalObj=window.setInterval(next,2000);

这里之所有用了setInterval是为了之后鼠标放上去后能停止轮播，setInterval的执行间隔时间减去动画执行过程所用时间即为图片的切换延迟时间。效果：

将setInterval赋给全局变量intervalObj为了接下来的停止功能：

$("#container").mouseover(function(){

window.clearInterval(intervalObj);

});

$("#container").mouseout(function(){

intervalObj=window.setInterval(next,2000);

});

效果：

接下来在id为container的div中添加按钮：

<button onclick="prev()" id="goLeft">&larr;</button>

<button onclick="next()" id="goRight">&rarr;</button>

向右的按钮即执行上面所写的next函数，把两个按钮加在div中有个好处就是：之前我们是在div上加的mouseover事件，也就是说当我们想要点击切换上下张时自动播放也会停止，不会和我们的操作起冲突。

向左翻的函数：

复制代码

function prev(){

var temp=$("#picList li:last-child").clone();

$("#picList li:last-child").remove();

temp.css({marginLeft:"-120px"});

$("#picList").prepend(temp);

$("#picList li:first-child").animate({

marginLeft:"0"

},1000);

}

复制代码

这里和向右的函数稍微有些区别，我们得在图片列表右移之前先完成克隆。

首先将图片列表的最后一列克隆，并将最后一列移除。将克隆后的temp样式设为-120px，否则插到队头时会盖住第一张。

将克隆的temp通过prepend插入队头，注意此时图片列表的第一张不再是原始的第一张而是刚才插到队头的temp，由于temp的marginLeft为-120px，将其变为0。整个图片列表自然会右移，显示上一张。

最后将“相框”的overflow设为hidden，一个较完整的轮播就完成了：

整理后的代码，方便大家一次性COPY：

复制代码

var intervalObj=window.setInterval(next,2000);

var picArr=$("#picList li");

$("#picList").css("width",picArr.length*120);

function next(){

$("#picList li:first-child").animate({

marginLeft:"-120px"

},1000,function(){

var temp=$(this).clone();

$(this).remove();

temp.css({marginLeft:"0"});

$("#picList").append(temp);

});

}

function prev(){

var temp=$("#picList li:last-child").clone();

$("#picList li:last-child").remove();

temp.css({marginLeft:"-120px"});

$("#picList").prepend(temp);

$("#picList li:first-child").animate({

marginLeft:"0"

},1000);

}

$("#container").mouseover(function(){

window.clearInterval(intervalObj);

});

$("#container").mouseout(function(){

intervalObj=window.setInterval(next,2000);

});

复制代码

进阶写法：

原理基本是一样的，只是这回在ul中需要加入两个li，分别装第一张、第二张图片即可。

<ul id="picList">

<li><img src="images/1.png"></li>

<li><img src="images/2.png"></li>

</ul>

在js中将所有的图片地址装入数组中：

var srcArr=[&#39;images/1.png&#39;,&#39;images/2.png&#39;,&#39;images/3.png&#39;,&#39;images/4.png&#39;,&#39;images/5.png&#39;,&#39;images/6.png&#39;,&#39;images/7.png&#39;]

定义全局变量picNo=1，在之前所写的next及prev函数中加入判断条件：

复制代码

function next(){

picNo++;

if(picNo==7){

picNo=0;

}else if(picNo==8){

picNo=1;

}

$("#picList li:first-child").animate({

marginLeft:"-120px"

},1000,function(){

var temp=$(this).clone();

$(this).remove();

temp.css({marginLeft:"0"}).children().attr("src",srcArr[picNo]);

$("#picList").append(temp);

});

}

function prev(){

picNo--;

if(picNo<1){

picNo=7;

}

var temp=$("#picList li:last-child").clone();

$("#picList li:last-child").remove();

temp.css({marginLeft:"-120px"}).children().attr("src",srcArr[picNo-1]);

$("#picList").prepend(temp);

$("#picList li:first-child").animate({

marginLeft:"0"

},1000);

}

复制代码

这里picNo作用是提供图片地址数组的下标索引，这部分有点难讲清楚，我也是当初测试了很久才找到了规律。

先看next函数，picNo初值为1，第一次执行next函数时加1变为2，也就是说在接下来要插入的图片应该为第三张图片，因为第一、二张已经存在了。

if(picNo==7){picNo=0}表示向下切换到头时，添加第一张图片地址。

else if(picNo==8){picNo=1}，加这句是因为在切换时发现个BUG，在从第一张倒切到最后一张，再从最后一张切回第一张时，新插入的不是第二张，而还是第一张。

再看prev函数，由于这里要插入的图片地址是前一张，所以在最后srcArr的下标索引应为picNo-1。

。。。我讲都讲晕了，看不懂就看不懂吧，直接拿去用吧。。。

三 : 信手拈来

君不见黄河滔滔却不胜小溪入瀑布，哪又堪 ，思绪纷乱却不似笑颜如初玉。

又怎是，青青绿地漫漫风尘，几多无奈几多愁忧。

何不如，甘守淡泊独守寂寞，几许沉寂几许平和。

------------------------------------------------------------------

追逐惯了世间名利，却不能放弃得舍的纷扰。难道，种地织布足以劳人之筋，更易劳人之心吗？偶尔垂钓柳溪池塘，散步麦田于夕阳，呼吸空气之清新，淡淡漂泊的是土地的咸涩，偶尔跳跃的绿色青蛙。青草蓝天，静静露珠或荷叶或麦梗，晨光染下七彩色。

年少轻狂已无谓，老来恬淡亦怡人，岂非不是？？！！( 文章阅读网：www.61k.com )

本文标题：信手拈来-信手拈花，舞尽年华
本文地址： http://www.61k.com/1115031.html