25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/jQuery-aniview/js/jquery.aniview.min.js:
--------------------------------------------------------------------------------
1 | !function(){var a=0;$.fn.scrolled=function(i,n){"function"==typeof i&&(n=i,i=200);var t="scrollTimer"+a++;this.scroll(function(){var a=$(this),o=a.data(t);o&&clearTimeout(o),o=setTimeout(function(){a.removeData(t),n.call(a[0])},i),a.data(t,o)})},$.fn.AniView=function(a){function i(a){var i=$(a).offset(),t=i.top+$(a).scrollTop(),o=(i.top+$(a).scrollTop()+$(a).height(),$(window).scrollTop()+$(window).height());return t
25 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_51xflash.css:
--------------------------------------------------------------------------------
1 | /*=========mF_51xflash========*/
2 | .mF_51xflash_wrap{padding:8px;border:1px solid #999;float:left;background:#fff;}/*背景边框*/
3 | .mF_51xflash{ position:relative;}
4 | .mF_51xflash .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
5 | .mF_51xflash .pic{position:absolute;top:0;left:0;overflow:hidden;}
6 | .mF_51xflash .pic ul{position:static;}
7 | .mF_51xflash .pic ul li{position:absolute;right:0;}
8 | .mF_51xflash .pic ul li a,.mF_51xflash .pic ul li a img{display:block;width:100%;height:100%;}
9 | .mF_51xflash .txt{position:absolute;left:0;bottom:0;width:100%;height:34px;line-height:34px;}
10 | .mF_51xflash .txt li{position:absolute;width:100%;height:100%;background:#f1f1f1;}
11 | .mF_51xflash .txt li a{display:block;padding-left:40px;font-size:14px;color:#333;font-weight:bold;text-decoration:none;background:url(img/mF_51xflash/tit-ar.gif) 6px center no-repeat;}
12 | .mF_51xflash .play,.mF_51xflash .stop{position:absolute;right:10px;bottom:6px;z-index:9;width:30px;height:23px;overflow:hidden;cursor:pointer;background:url(img/mF_51xflash/play.gif) left -25px no-repeat;}
13 | .mF_51xflash .stop{background-position:left top;}
14 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_YSlider.js:
--------------------------------------------------------------------------------
1 | myFocus.pattern.extend({//*********************YSlide--翻页效果 这个也没有左右******************
2 | 'mF_YSlider':function(settings,$){
3 | var $focus=$(settings);
4 | var $picList=$focus.find('.pic li');
5 | var $rePicList=$focus.addHtml('
26 |
29 | 第一屏
27 |fullPage.js — 循环演示
28 |
30 |
32 | 第二屏
31 |
33 |
35 | 第三屏
34 |
36 |
39 | 第四屏
37 |这是最后一屏了，继续往下滚返回第一屏
38 |'+$focus.find('.pic').html()+'
').find('li');
6 | var $txtList=$focus.addListTxt().find('li');
7 | var $numList=$focus.addListNum().find('li');
8 | //PLAY
9 | var s=settings.direction==='single'?true:false,d1=settings.width,d2=settings.height;
10 | $focus.play(function(i,n){
11 | var r=s?1:Math.round(1+(Math.random()*(2-1))),dis,d,p={};
12 | dis=r===1?d1:d2,d=Math.round(Math.random()+s)?dis:-dis,p[r===1?'left':'top']=d;
13 | $picList[i].style.display=$txtList[i].style.display='none';
14 | $numList[i].className='';
15 | $rePicList.eq(i).css({left:0,top:0,display:'block',opacity:1}).slide(p,500,'swing').fadeOut(500);
16 | },function(i,n){
17 | $picList[i].style.display=$txtList[i].style.display='block';
18 | $numList[i].className='current';
19 | });
20 | //Control
21 | $focus.bindControl($numList);
22 | }
23 | });
24 | myFocus.config.extend({'mF_YSlider':{direction:'random'}});//切出方向,可选：'random'(随机) | 'single'(单向/向右)
--------------------------------------------------------------------------------
/iframe改变高度.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
25 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/字符串操作/高亮文字.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
26 |
29 | 第一屏
27 |fullPage.js — 项目导航演示
28 |
30 |
33 | 第二屏
31 |请查看右边的圆圈
32 |
34 |
37 | 第三屏
35 |圆圈还可以设置位置，颜色，加上 tip，点击可以控制
36 |
38 |
41 | 第四屏
39 |这是最后一屏
40 |
22 | [张万年同志逝世]中国共产党的优秀党员，久经考验的忠诚共产主义战士，无产阶级革命家、军事家，中国人民解放军的卓越领导人，中国共产党第十五届中央政治局委员、书记处书记，中央军委原副主席张万年同志，因病医治无效，于2015年1月14日17时在北京逝世，享年87岁。
23 |
24 |
25 |
26 |
27 |
41 |
--------------------------------------------------------------------------------
/AnimatedLetters/README.md:
--------------------------------------------------------------------------------
1 | # Animated Letters
2 |
3 | A plugin that animates an artistic font using Segment, the SVG strokes animation library. By Luis Manuel.
4 |
5 | [Article on Codrops](http://tympanus.net/codrops/?p=26057)
6 |
7 | [Demo](http://tympanus.net/Development/AnimatedLetters/)
8 |
9 | ## License
10 |
11 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
12 |
13 | Read more here: [License](http://tympanus.net/codrops/licensing/)
14 |
15 | ## Credits
16 |
17 | - [segment](https://github.com/lmgonzalves/segment)
18 | - [d3-ease](https://github.com/d3/d3-ease)
19 | - Font design by [FRANK V.D HAK - KNARF ART](https://www.behance.net/knarfart)
20 | - [mo.js](http://mojs.io/) by [Oleg Solomka](https://twitter.com/legomushroom)
21 |
22 | ## Misc
23 |
24 | Follow lmgonzalves: [Twitter](https://twitter.com/lmgonzalves), [GitHub](https://github.com/lmgonzalves)
25 |
26 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/)
27 |
28 | [© Codrops 2016](http://www.codrops.com)
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/点击特效/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
26 |
27 |
28 |
29 |
30 |
31 |
53 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_quwan.css:
--------------------------------------------------------------------------------
1 | /*=========mF_quwan========*/
2 | .mF_quwan{ position:relative;}
3 | .mF_quwan .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_quwan,.mF_quwan .pic{border-bottom:1px solid #E2E2E2;}
5 | .mF_quwan .pic li{width:100%;height:100%;overflow:hidden;position:absolute;display:none;}
6 | .mF_quwan .txt li{position:absolute;z-index:2;*bottom:16px!important;height:34px;line-height:34px;display:none;}
7 | .mF_quwan .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
8 | .mF_quwan .txt li b{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);opacity:0.3;}/*标题背景*/
9 | .mF_quwan .num{position:absolute;z-index:3;bottom:0;*bottom:-1px;right:0;}/*按钮样式*/
10 | .mF_quwan .num li{float:left;}
11 | .mF_quwan .num li a{color:#B5AAB0;float:left;width:56px;height:16px;line-height:16px;overflow:hidden;text-align:center;border-left:1px solid #E2E2E2;cursor:pointer;text-decoration:none;}
12 | .mF_quwan .num li.current a,.mF_quwan .num li.hover a{color:#fff;font-weight:bold;background:#DA0A0A;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;}/*当前/悬停按钮样式*/
13 |
--------------------------------------------------------------------------------
/fullPage/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
24 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_expo2010.css:
--------------------------------------------------------------------------------
1 | /*=========mF_expo2010 --2010世博主题========*/
2 | .mF_expo2010{ position:relative;}
3 | .mF_expo2010 .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_expo2010 .pic li{position:absolute;}
5 | .mF_expo2010 .txt_bg{position:absolute;bottom:0;z-index:1;height:36px;width:100%;background:#000;filter:alpha(opacity=40);opacity:0.4;}/*标题背景*/
6 | .mF_expo2010 .txt li{position:absolute;z-index:2;left:0;height:36px;line-height:36px;}
7 | .mF_expo2010 .txt li a{display:block;color:#fff;padding:2px 0 0 16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
8 | .mF_expo2010 .num{position:absolute;z-index:3;bottom:8px;right:8px;}
9 | .mF_expo2010 .num li{float:left;position:relative;width:22px;height:18px;line-height:18px;overflow:hidden;text-align:center;margin-right:1px;cursor:pointer;}
10 | .mF_expo2010 .num li a,.mF_expo2010 .num li b{position:absolute;z-index:2;display:block;color:#fff;width:100%;height:100%;top:0;left:0;text-decoration:none;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;}/*按钮样式*/
11 | .mF_expo2010 .num li b{z-index:1;background:#fff;filter:alpha(opacity=50);opacity:0.5;}
12 | .mF_expo2010 .num li.hover a,.mF_expo2010 .num li.current a{background:#F60;}/*当前/悬停按钮*/
--------------------------------------------------------------------------------
/animate.css/1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
25 |
28 | 第一屏
26 |fullPage.js — 基本演示
27 |
29 |
30 |
31 |
32 |
33 |
34 |
36 | 第三屏
35 |
37 |
40 | 第四屏
38 |这是最后一屏
39 |
24 |
25 |
26 |
27 |
28 |
29 |
41 |
--------------------------------------------------------------------------------
/3D图片切换/11_立方体.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
19 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/fullPage/index11.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
20 |
25 | 1
21 | 2
22 | 3
23 | 4
24 |
14 |
27 |
28 |
29 |
30 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_peijianmall.css:
--------------------------------------------------------------------------------
1 | /*=========mF_peijianmall========*/
2 | .mF_peijianmall{ position:relative;}
3 | .mF_peijianmall .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_peijianmall .pic ul{position:absolute;}
5 | .mF_peijianmall .pic ul li{overflow:hidden;}
6 | .mF_peijianmall .pic ul.left li{float:left;}
7 | .mF_peijianmall .pic ul.right li{float:right;}
8 | .mF_peijianmall .txt{position:absolute;z-index:2;left:18px;bottom:10px;}
9 | .mF_peijianmall .txt li{float:left; position:relative;margin-right:10px;height:40px;width:68px;overflow:hidden;cursor:pointer;border:1px solid #f90; border-radius:3px;}
10 | .mF_peijianmall .txt li b{background:#FBF6DC; width:100%; height:100%; opacity:0.8; filter:alpha(opacity=80); position:absolute; top:0;-webkit-transition:color 0.4s;-moz-transition:color 0.4s;-o-transition:color 0.4s; }
11 | .mF_peijianmall .txt li a{ display:block;padding:3px;color:#D3520C; text-decoration:none; position:relative; z-index:1;-webkit-transition:color 0.4s;-moz-transition:color 0.4s;-o-transition:color 0.4s;}
12 | .mF_peijianmall .txt li.current{border:1px solid #c00;}
13 | .mF_peijianmall .txt li.current b{background:#FB7917;}
14 | .mF_peijianmall .txt li.current a{color:#fff;}
15 | .mF_peijianmall .txt li p{ display:none;}
16 |
--------------------------------------------------------------------------------
/擦除/html/擦除.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
15 |
17 | 第一屏
16 |
18 |
20 | 第二屏
19 |
21 |
23 | 第三屏
22 |
24 |
26 | 第四屏
25 |
26 | 
27 | 
28 |
29 |
30 |
31 |
32 |
55 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_sohusports.css:
--------------------------------------------------------------------------------
1 | /*=========mF_sohusports========*/
2 | .mF_sohusports_wrap{padding:8px;border:1px solid #999;float:left;background:#fff;}/*背景边框*/
3 | .mF_sohusports{ position:relative;}
4 | .mF_sohusports .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
5 | .mF_sohusports .pic li{position:absolute; display:none;}
6 | .mF_sohusports .txt li{position:absolute;z-index:2;bottom:0;height:60px;line-height:32px; display:none;}
7 | .mF_sohusports .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
8 | .mF_sohusports .txt li b{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.4;}/*标题背景*/
9 | .mF_sohusports .txt li p{display:none;}/*隐藏详细描述*/
10 | .mF_sohusports .num{position:absolute;z-index:3;bottom:8px;right:6px;}/*按钮样式*/
11 | .mF_sohusports .num li{float:left;}
12 | .mF_sohusports .num li a{color:#fff;float:left;width:20px;height:20px;line-height:18px;overflow:hidden;text-align:center;margin-right:4px;cursor:pointer;background:url(img/mF_sohusports/sh-btn.gif) left no-repeat;text-decoration:none;}
13 | .mF_sohusports .num li.current a,.mF_sohusports .num li.hover a{color:#FF7B11;background-position:right;}/*当前/悬停按钮样式*/
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_liquid.js:
--------------------------------------------------------------------------------
1 | myFocus.pattern.extend({//*********************液动风格 这个有点意思，不过没有前后选项******************
2 | 'mF_liquid':function(settings,$){
3 | var $focus=$(settings);
4 | var $picBox=$focus.find('.pic');
5 | var $picList=$picBox.find('li');
6 | var $txtList=$focus.addListTxt().find('li');
7 | var $numList=$focus.addListNum().find('li');
8 | var $picModList=$focus.addHtml('').html($picBox.html()).find('img');
9 | //CSS
10 | var w=settings.width,h=settings.height;
11 | $picModList.each(function(i){
12 | $picList[i].style.cssText='width:0px;z-index:1;';
13 | this.style.cssText='width:'+w*10+'px;height:'+h+'px;left:'+w+'px;';
14 | });
15 | //PLAY
16 | $focus.play(function(i){
17 | $picList.eq(i).stop()[0].style.width=0+'px';
18 | $picModList.eq(i).stop()[0].style.left=w+'px';
19 | $txtList[i].style.display='none';
20 | $numList[i].className = '';
21 | },function(i){
22 | $picModList.eq(i).slide({left:0},200,'linear',function(){ //默认的为100
23 | $picList.eq(i).slide({width:w},1700); //默认的为700，尼玛眼睛闪瞎了
24 | $(this).slide({left:-9*w},1700); //默认的为700
25 | });
26 | $txtList[i].style.display='block';
27 | $numList[i].className = 'current';
28 | });
29 | //Control
30 | settings.delay=0;//mouseover模式时延迟固定为0以兼容IE6
31 | $focus.bindControl($numList);
32 | }
33 | });
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_peijianmall.js:
--------------------------------------------------------------------------------
1 | myFocus.pattern.extend({//*********************配件商城风格******************
2 | 'mF_peijianmall':function(settings,$){
3 | var $focus=$(settings);
4 | var $picUl=$focus.find('.pic ul');
5 | var $txtList=$focus.addListTxt().find('li');
6 | $picUl[0].innerHTML+=$picUl[0].innerHTML;//无缝复制
7 | //CSS
8 | var n=$txtList.length,dir=settings.direction,prop=dir==='left'?'width':'height',dis=settings[prop];
9 | $picUl.addClass(dir)[0].style[prop]=dis*n*2+'px';
10 | $picUl.find('li').each(function(){//消除上下li间的多余间隙
11 | $(this).css({width:settings.width,height:settings.height});
12 | });
13 | //PLAY
14 | var param={};
15 | $focus.play(function(i){
16 | $txtList[i>=n?(i-n):i].className = '';
17 | },function(i){
18 | param[dir]=-dis*i;
19 | $picUl.slide(param,settings.duration,settings.easing);
20 | $txtList[i>=n?(i-n):i].className = 'current';
21 | },settings.seamless);
22 | //Control
23 | $focus.bindControl($txtList);
24 | }
25 | });
26 | myFocus.config.extend({
27 | 'mF_peijianmall':{//可选个性参数
28 | txtHeight:40,//标题高度
29 | seamless:true,//是否无缝，可选：true(是) | false(否)
30 | duration:800,//过渡时间(毫秒)，时间越大速度越小
31 | direction:'left',//运动方向，可选：'top'(向上) | 'left'(向左)
32 | easing:'easeOut'//运动形式，可选：'easeOut'(快出慢入) | 'easeIn'(慢出快入) | 'easeInOut'(慢出慢入) | 'swing'(摇摆运动) | 'linear'(匀速运动)
33 | }
34 | });
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_liuzg.css:
--------------------------------------------------------------------------------
1 | /*=========mF_liuzg --绚丽切片风格========*/
2 | .mF_liuzg{ position:relative;}
3 | .mF_liuzg .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_liuzg .pic li{position:relative;overflow:hidden;float:left;}
5 | .mF_liuzg .pic li div{width:100%;position:absolute;}
6 | .mF_liuzg .pic li div a{display:block;overflow:hidden;}
7 | .mF_liuzg .txt li{position:absolute;z-index:2;bottom:0;height:36px;line-height:36px;display:none;}
8 | .mF_liuzg .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
9 | .mF_liuzg .txt li b{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.4;}/*标题背景*/
10 | .mF_liuzg .num{position:absolute;z-index:3;bottom:6px;right:8px;color:#333;}
11 | .mF_liuzg .num li{float:left;width:22px;height:18px;position:relative;border:1px solid #333;line-height:18px;text-align:center;margin-right:3px;cursor:pointer;background:#eee;filter:alpha(opacity=70);opacity:0.7;}/*按钮样式*/
12 | .mF_liuzg .num li a{color:#333;text-decoration:none;}
13 | .mF_liuzg .num li.current{background:#f60;font-weight:bold;height:20px;line-height:20px;top:-2px;filter:alpha(opacity=100);opacity:1;}
14 | .mF_liuzg .num li.current a{color:#fff;}
--------------------------------------------------------------------------------
/slider1.2/css/slider1.2.css:
--------------------------------------------------------------------------------
1 | .slider-box{
2 | position:relative;
3 | }
4 | .slider_cube,.slider_inner_a,.slider_inner_b{
5 | position:absolute;
6 | width:100%;
7 | height:100%;
8 | overflow:hidden;
9 | }
10 | .slider_nav_box{
11 | position:absolute;
12 | right:0;
13 | bottom:25%;
14 | }
15 | .slider_nav_title{
16 | background:url(http://i1.tietuku.com/87ec913b390798fa.png) repeat center right;
17 | min-width:150px;
18 | height:100px
19 | }
20 | .slider_nav{
21 | background:url(http://i1.tietuku.com/87ec913b390798fa.png) no-repeat;
22 | height:18px;
23 | min-width:100px;
24 | }
25 | .slider_bar{
26 | position:absolute;
27 | width:100%;
28 | text-align:center;
29 | bottom:10px;
30 | height:20px;
31 | }
32 | .slider_bar span{
33 | display:inline-block;
34 | margin:0 10px;
35 | width:14px;
36 | height:14px;
37 | background:#B7B7B7;
38 | cursor:pointer;
39 | border-radius:20px;
40 | box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
41 | -webkit-transition:.3s;
42 | -moz-transition:.3s;
43 | -ms-transition:.3s;
44 | -o-transition:.3s;
45 | transition:.3s;
46 | }
47 | .slider_bar span:hover{
48 | background:#333;
49 | background:rgba(0,0,0,0.7);
50 | }
51 | .slider_bar span.active{
52 | background:#F40;
53 | background:rgba(255,68,0,0.9);
54 | cursor:default;
55 | }
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_qiyi.css:
--------------------------------------------------------------------------------
1 | /*=========mF_qiyi --奇艺主题========*/
2 | .mF_qiyi_wrap{position:relative;float:left;overflow:hidden;padding:6px;border:1px solid #333;}/*背景边框*/
3 | .mF_qiyi .loading{color:#f60;background:#333 url(img/mF_qiyi/bg.jpg) center no-repeat; z-index:9;}/*载入背景*/
4 | .mF_qiyi .slider{height:100%;position:absolute;overflow:hidden;}
5 | .mF_qiyi .slider .pic{height:100%;width:100%;}
6 | .mF_qiyi .slider .pic li{height:100%;overflow:hidden;float:left;}
7 | .mF_qiyi .slider .txt{width:100%;}
8 | .mF_qiyi .slider .txt li{position:relative;float:left;height:34px;line-height:34px;}/*默认标题高度*/
9 | .mF_qiyi .slider .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*文字样式*/
10 | .mF_qiyi .slider .txt li b{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.4;}
11 | .mF_qiyi .num{position:absolute;z-index:2;bottom:6px;right:12px;}
12 | .mF_qiyi .num li{float:left;width:18px;height:16px;line-height:16px;margin-left:4px;overflow:hidden;text-align:center;border:1px solid #000;cursor:pointer;}
13 | .mF_qiyi .num li a{color:#000;display:block;background:#ccc;text-decoration:none;}
14 | .mF_qiyi .num li.current a,.mF_qiyi .num li.hover a{background:#f60;color:#fff;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;}/*当前/悬停按钮样式*/
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_liquid.css:
--------------------------------------------------------------------------------
1 | /*=========mF_liquid ========*/
2 | .mF_liquid{ position:relative;}
3 | .mF_liquid .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_liquid .pic{position:static;}
5 | .mF_liquid .pic li,.mF_liquid .pic_mod li{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
6 | .mF_liquid .pic li img,.mF_liquid .pic_mod li img{position:absolute;left:0;top:0;}
7 | .mF_liquid .txt li{position:absolute;z-index:2;bottom:0;width:100%;height:38px;line-height:38px;display:none;}/*默认标题高度*/
8 | .mF_liquid .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
9 | .mF_liquid .txt li b{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);opacity:0.3;}
10 | .mF_liquid .num{position:absolute;z-index:3;bottom:6px;right:6px;}/*按钮样式*/
11 | .mF_liquid .num li{float:left;}
12 | .mF_liquid .num li a{color:#333;float:left;width:20px;height:18px;position:relative;line-height:18px;border:1px solid #196BA9;text-align:center;margin-right:3px;cursor:pointer;background:#dedede;filter:alpha(opacity=80);opacity:0.8;text-decoration:none;}
13 | .mF_liquid .num li.current a,.mF_liquid .num li.hover a{background:#09f;color:#fff;font-weight:bold;height:20px;line-height:20px;top:-2px;filter:alpha(opacity=100);opacity:1;}
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_taobao2010.css:
--------------------------------------------------------------------------------
1 | /*=========mF_taobao2010========*/
2 | .mF_taobao2010{ position:relative;}
3 | .mF_taobao2010 .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_taobao2010 .pic ul{position:absolute;}
5 | .mF_taobao2010 .pic ul li{position:relative;overflow:hidden;}
6 | .mF_taobao2010 .pic ul.left li{float:left;}
7 | .mF_taobao2010 .txt li{position:absolute;z-index:2;bottom:0;width:100%;height:38px;line-height:38px;display:none;}/*默认标题高度*/
8 | .mF_taobao2010 .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
9 | .mF_taobao2010 .txt li b{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);opacity:0.3;}
10 | .mF_taobao2010 .num{position:absolute;z-index:3;bottom:6px;right:6px;}/*按钮样式*/
11 | .mF_taobao2010 .num li{float:left;}
12 | .mF_taobao2010 .num li a{float:left;color:#E54B3B;width:20px;height:18px;position:relative;line-height:18px;border:1px solid #F27602;text-align:center;margin-right:3px;cursor:pointer;background:#FDF1D4;text-decoration:none;-webkit-transition:color 0.4s;-moz-transition:color 0.4s;-o-transition:color 0.4s;}
13 | .mF_taobao2010 .num li.current a,.mF_taobao2010 .num li.hover a{background:#FE8B18;color:#fff;border-color:#D86C01;font-weight:bold;height:20px;line-height:20px;top:-2px;}
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_YSlider.css:
--------------------------------------------------------------------------------
1 | /*=========mF_YSlider ========*/
2 | .mF_YSlider{ position:relative;}
3 | .mF_YSlider .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_YSlider .pic li,.mF_YSlider .rePic li{position:absolute;top:0;left:0;display:none;}
5 | .mF_YSlider .txt li{position:absolute;z-index:2;bottom:0;width:100%;height:36px;line-height:36px;display:none;}/*默认标题高度*/
6 | .mF_YSlider .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
7 | .mF_YSlider .txt li b{display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.4;}
8 | .mF_YSlider .num{position:absolute;z-index:3;bottom:8px;right:2px;}
9 | .mF_YSlider .num li{position:relative;float:left;width:20px;height:20px;overflow:hidden;text-align:center;margin-right:4px;cursor:pointer;}
10 | .mF_YSlider .num li a,.mF_YSlider .num li b{display:block;width:18px;height:18px;border:1px solid #dedede;line-height:18px;position:absolute;z-index:2;top:0;left:0;color:#333; text-decoration:none;}/*按钮样式*/
11 | .mF_YSlider .num li b{z-index:1;background:#fff;filter:alpha(opacity=60);opacity:0.6;}
12 | .mF_YSlider .num li.current a,.mF_YSlider .num li.hover a{border-color:#E63003;color:#fff;background:#F66E08;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;}/*当前/悬停按钮
--------------------------------------------------------------------------------
/字符串操作/文字替换.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
27 |
28 |
22 | [张万年同志逝世]中国共产党的优秀党员，久经考验的忠诚共产主义战士，无产阶级革命家、军事家，中国人民解放军的卓越领导人，中国共产党第十五届中央政治局委员、书记处书记，中央军委原副主席张万年同志，因病医治无效，于2015年1月14日17时在北京逝世，享年87岁。
23 |
24 |
25 |
26 |
27 |
28 |
44 |
--------------------------------------------------------------------------------
/动感十足的jquery导航/config.js:
--------------------------------------------------------------------------------
1 | $(document).ready(
2 | function()
3 | {
4 | // Toggle Single Portlet
5 | $('a.toggle').click(function()
6 | {
7 | $(this).parent('div').next('div').toggle();
8 | return false;
9 | }
10 | );
11 |
12 | // Invert All Portlets
13 | $('a#all_invert').click(function()
14 | {
15 | $('div.portlet_content').toggle();
16 | return false;
17 | }
18 | );
19 |
20 | // Expand All Portlets
21 | $('a#all_expand').click(function()
22 | {
23 | $('div.portlet_content:hidden').show();
24 | return false;
25 | }
26 | );
27 |
28 | // Collapse All Portlets
29 | $('a#all_collapse').click(function()
30 | {
31 | $('div.portlet_content:visible').hide();
32 | return false;
33 | }
34 | );
35 |
36 | // Open All Portlets
37 | $('a#all_open').click(function()
38 | {
39 | $('div.portlet:hidden').show();
40 | $('a#all_open:visible').hide();
41 | $('a#all_close:hidden').show();
42 | return false;
43 | }
44 | );
45 |
46 | // Close All Portlets
47 | $('a#all_close').click(function()
48 | {
49 | $('div.portlet:visible').hide();
50 | $('a#all_close:visible').hide();
51 | $('a#all_open:hidden').show();
52 | return false;
53 | }
54 | );
55 |
56 | // Controls Drag + Drop
57 | $('#columns td').Sortable(
58 | {
59 | accept: 'portlet',
60 | helperclass: 'sort_placeholder',
61 | opacity: 0.7,
62 | tolerance: 'intersect'
63 | }
64 | );
65 | }
66 | );
--------------------------------------------------------------------------------
/9种推拉门/move.js:
--------------------------------------------------------------------------------
1 | // JavaScript Document
2 |
3 | function startMove(obj,json,endFn){
4 |
5 | clearInterval(obj.timer);
6 |
7 | obj.timer = setInterval(function(){
8 |
9 | var bBtn = true;
10 |
11 | for(var attr in json){
12 |
13 | var iCur = 0;
14 |
15 | if(attr == 'opacity'){
16 | if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
17 | iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
18 |
19 | }
20 | else{
21 | iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
22 | }
23 | }
24 | else{
25 | iCur = parseInt(getStyle(obj,attr)) || 0;
26 | }
27 |
28 | var iSpeed = (json[attr] - iCur)/8;
29 | iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
30 | if(iCur!=json[attr]){
31 | bBtn = false;
32 | }
33 |
34 | if(attr == 'opacity'){
35 | obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
36 | obj.style.opacity = (iCur + iSpeed)/100;
37 |
38 | }
39 | else{
40 | obj.style[attr] = iCur + iSpeed + 'px';
41 | }
42 |
43 |
44 | }
45 |
46 | if(bBtn){
47 | clearInterval(obj.timer);
48 |
49 | if(endFn){
50 | endFn.call(obj);
51 | }
52 | }
53 |
54 | },30);
55 |
56 | }
57 |
58 |
59 | function getStyle(obj,attr){
60 | if(obj.currentStyle){
61 | return obj.currentStyle[attr];
62 | }
63 | else{
64 | return getComputedStyle(obj,false)[attr];
65 | }
66 | }
--------------------------------------------------------------------------------
/checkbox/checkbox.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
14 |
30 |
31 |
32 |
33 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_rapoo.css:
--------------------------------------------------------------------------------
1 | /*=========mF_rapoo========*/
2 | .mF_rapoo_wrap{padding:4px;border:1px solid #999;float:left;background:#fff;}/*背景边框*/
3 | .mF_rapoo{ position:relative;}
4 | .mF_rapoo .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
5 | .mF_rapoo .pic li{width:100%;height:100%;overflow:hidden;position:absolute;}
6 | .mF_rapoo .txt{position:absolute;z-index:2;bottom:12px;width:140px;height:18px;right:26px;}
7 | .mF_rapoo .txt li{position:absolute;height:18px;line-height:18px;*line-height:20px;width:0px;background:#f6f6f6; border-radius:3px;}
8 | .mF_rapoo .txt li a{display:block;position:relative;z-index:1;color:#f60;padding:0 10px;font-size:12px;text-decoration:none;}/*标题*/
9 | .mF_rapoo .num{position:absolute;z-index:3;bottom:12px;right:26px;}/*按钮样式*/
10 | .mF_rapoo .num li{float:left;display:inline;margin-left:6px;width:18px;height:18px;line-height:18px;overflow:hidden;text-align:center;cursor:pointer;border-radius:3px;}
11 | .mF_rapoo .num li a{display:block;color:#f60;background:#eee;text-decoration:none;}
12 | .mF_rapoo .num li.current a,.mF_rapoo .num li.hover a{color:#fff;background:#f60;}/*当前/悬停按钮样式*/
13 | .mF_rapoo .prev,.mF_rapoo .next{width:8px;height:22px;overflow:hidden;position:absolute;z-index:4;bottom:15px;right:88px;cursor:pointer;}
14 | .mF_rapoo .prev a,.mF_rapoo .next a{display:block;font:bold 26px/28px arial;color:#E3E3E3;text-align:center;}
15 | .mF_rapoo .prev a:hover,.mF_rapoo .next a:hover{color:#f60;}
--------------------------------------------------------------------------------
/字符串操作/分割文字.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
15 |
18 | 第一屏
16 |请滚动到第二屏查看
17 |
19 |
20 |
21 |
22 |
23 |
24 |
26 | 第三屏
25 |
27 |
29 | 第四屏
28 |
29 |
30 |
31 |
32 |
33 |
34 |
49 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_taobao2010.js:
--------------------------------------------------------------------------------
1 | myFocus.pattern.extend({//*********************淘宝2010主页风格 一般轮播，无左右，不是无缝******************
2 | 'mF_taobao2010':function(settings,$){
3 | var $focus=$(settings);
4 | var $picUl=$focus.find('.pic ul');
5 | var $txtList=$focus.addListTxt().find('li');
6 | var $numList=$focus.addListNum().find('li');
7 | $picUl[0].innerHTML+=$picUl[0].innerHTML;//无缝复制
8 | //CSS
9 | var n=$txtList.length,dir=settings.direction,prop=dir==='left'?'width':'height',dis=settings[prop];
10 | $picUl.addClass(dir)[0].style[prop]=dis*n*2+'px';
11 | $picUl.find('li').each(function(){//消除上下li间的多余间隙
12 | $(this).css({width:settings.width,height:settings.height});
13 | });
14 | //PLAY
15 | var param={};
16 | $focus.play(function(i){
17 | var index=i>=n?(i-n):i;
18 | $numList[index].className = '';
19 | $txtList[index].style.display = 'none';
20 | },function(i){
21 | var index=i>=n?(i-n):i;
22 | param[dir]=-dis*i;
23 | $picUl.slide(param,settings.duration,settings.easing);
24 | $numList[index].className = 'current';
25 | $txtList[index].style.display = 'block';
26 | },settings.seamless);
27 | //Control
28 | $focus.bindControl($numList);
29 | }
30 | });
31 | myFocus.config.extend({
32 | 'mF_taobao2010':{//可选个性参数
33 | seamless:true,//是否无缝，可选：true(是)/false(否)
34 | duration:600,//过渡时间(毫秒)，时间越大速度越小
35 | direction:'left',//运动方向，可选：'top'(向上) | 'left'(向左)
36 | easing:'easeOut'//运动形式，可选：'easeOut'(快出慢入) | 'easeIn'(慢出快入) | 'easeInOut'(慢出慢入) | 'swing'(摇摆运动) | 'linear'(匀速运动)
37 | }
38 | });
--------------------------------------------------------------------------------
/切换(给未来元素添加事件)/切换.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 26 | 27 | 盗墓派的开山祖师爷，文笔和逻辑性绝对能把盗墓笔记拍死在沙滩上。盗墓笔记开场就是鬼吹灯的同人， 28 | 比如王胖子，特么人物就是直接用的鬼吹灯的胖子，连姓名都不改。怕鬼吹灯的设定盗墓分北派南派，发 29 | 丘中郎将、摸金校尉、搬山道人和卸岭力士。盗墓笔记就直接抄袭了这设定。连特么作者的名字都是直接 30 | 按同人作品来的怒但为什么现在大家谈盗墓就说笔记？？难道就因为鬼吹灯是写完才出书的没有按照网文 31 | 的规矩来？？惊 难道里面少了基情就没戏了？？ 衰个人觉得南派三叔人品不咋地... 32 | 33 | >>收缩 34 |
35 | 36 | 53 | -------------------------------------------------------------------------------- /轮播神器/js/mf-pattern/mF_classicHC.css: -------------------------------------------------------------------------------- 1 | /*=========mF_classicHC --经典怀旧系列一--========*/ 2 | .mF_classicHC{ position:relative;} 3 | .mF_classicHC .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;} 4 | .mF_classicHC .pic{border:1px solid #666;} 5 | .mF_classicHC .pic li{position:absolute;left:0;top:0;} 6 | .mF_classicHC .txt li{position:absolute;left:0;background:#dedede;overflow:hidden;height:26px;line-height:26px;} 7 | .mF_classicHC .txt li a{display:block;color:#333;text-align:center;font-size:12px;font-weight:bold;text-decoration:none;}/*文字样式*/ 8 | .mF_classicHC .num,.mF_classicHC .num_bg{height:19px;position:absolute;z-index:3;right:0;bottom:31px;color:#fff;}/*按钮样式*/ 9 | .mF_classicHC .num_bg{width:100%;background:url(img/mF_classicHC/btn-bg.png) right bottom no-repeat;_height:16px;_background:0;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/mF_classicHC/btn-bg.png', sizingMethod='scale');}/*为兼容IE6请把滤镜内的图片地址改为绝对地址*/ 10 | .mF_classicHC .num_bg li{position:absolute;} 11 | .mF_classicHC .num li{float:left;width:26px;height:16px;line-height:16px;padding-top:3px;text-align:center;cursor:pointer;position:relative;} 12 | .mF_classicHC .num li a{color:#fff;} 13 | .mF_classicHC .num li b{position:absolute;top:3px;left:0;width:1px;height:16px;overflow:hidden;background:#DADADA;} 14 | .mF_classicHC .num li.hover,.mF_classicHC .num li.current{background-image:url(img/mF_classicHC/btn-red.gif);}/*当前/悬停按钮样式*/ 15 | .mF_classicHC .num li.hover{background-position:right bottom;} 16 | .mF_classicHC .num li.current{background-position:left top;} 17 | -------------------------------------------------------------------------------- /fullPage/index13.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
14 |
27 |
28 |
29 |
30 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/数组去重.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
15 |
17 | 根据可视区域大小启用/关闭全屏滚动效果
16 |
18 |
20 | 如果可视区宽度小于1024，则关闭全屏滚动效果，使用自带的滚动条
19 |
21 |
23 | 请试着调整浏览器大小并查看滚动条是否出现
22 |
24 |
26 | 第四屏
25 |
21 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_ladyQ.css:
--------------------------------------------------------------------------------
1 | /*=========mF_ladyQ========*/
2 | .mF_ladyQ{ position:relative;}
3 | .mF_ladyQ .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_ladyQ .pic li{width:100%;height:100%;overflow:hidden;position:absolute;display:none;}
5 | .mF_ladyQ .txt li{position:absolute;z-index:2;left:0;bottom:28px;line-height:30px;font-family:'微软雅黑'; visibility:hidden; opacity:0;}
6 | .mF_ladyQ .txt li.current{ visibility:visible; opacity:1;-webkit-transition:all 1s .4s;-moz-transition:all 1s .4s;-o-transition:all 1s .4s;}
7 | .mF_ladyQ .txt li a{display:block;position:relative;z-index:1;color:#fff;margin-top:2px;padding-left:10px;font-size:16px;text-decoration:none;}/*标题样式*/
8 | .mF_ladyQ .txt li p{position:relative;z-index:1;padding-left:11px;line-height:22px;font-size:14px;color:#eee;}
9 | .mF_ladyQ .txt li b{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.4;}
10 | .mF_ladyQ .time_bar{position:absolute;left:0;height:20px;overflow:hidden;background:#444;}
11 | .mF_ladyQ .num{position:relative;height:28px;background:#000;}/*按钮样式*/
12 | .mF_ladyQ .num ul{position:absolute;right:6px;top:4px;}
13 | .mF_ladyQ .num ul li{float:left;display:inline;margin-left:3px;width:20px;height:20px;line-height:20px;overflow:hidden;text-align:center;cursor:pointer;}
14 | .mF_ladyQ .num ul li a{color:#B1B1B1;display:block;background:#444;text-decoration:none;}
15 | .mF_ladyQ .num ul li.current a,.mF_ladyQ .num ul li.hover a{color:#fff;background:#f60;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;}/*当前/悬停按钮样式*/
--------------------------------------------------------------------------------
/cookie,jsonp,拖拽等综合/拖拽改变div大小(类似textarea).html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
22 |
29 | 1
23 | 2
24 | 3
25 | 4
26 | 5
27 | 6
28 |
26 | 
27 |
28 |
29 |
30 |
52 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_kdui.css:
--------------------------------------------------------------------------------
1 | /*=========mF_kdui ========*/
2 | .mF_kdui{ background:#000; position:relative;}
3 | .mF_kdui .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_kdui .pic{position:absolute;z-index:1;width:100%;height:100%; overflow:hidden;}
5 | .mF_kdui .pic li{ position:absolute; top:0; display:none;}
6 | .mF_kdui .txt{position:absolute;z-index:2; top:12px;left:12px; width:200px;}/*默认标题高度*/
7 | .mF_kdui .txt li{position:absolute;top:0;width:100%; padding:12px; display:none;}
8 | .mF_kdui .txt li a{position:relative;z-index:1;display:block;color:#fff;font-size:14px;font-weight:bold;text-decoration:none; font-family:'微软雅黑';}/*标题样式*/
9 | .mF_kdui .txt li b{position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:#000;filter:alpha(opacity=20);opacity:0.2; border-radius:5px;}
10 | .mF_kdui .txt li p{color:#fff;}
11 | .mF_kdui .dot{position:absolute; z-index:3;bottom:8px;left:0;width:100%;text-align:center;}
12 | .mF_kdui .dot li{ display:inline-block;margin:0 3px;*display:inline;*zoom:1; width:16px;height:16px; background:url(img/mF_kdui/dots.png); cursor:pointer;}
13 | .mF_kdui .dot li.current{background-position: 0 -16px;}
14 | .mF_kdui .prev,.mF_kdui .next{ visibility:hidden; opacity:0; position:absolute; z-index:9;bottom:40%; left:12px; cursor:pointer; background:url(img/mF_kdui/slider-arrows.png) 0 0; width:38px; height:38px;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;}
15 | .mF_kdui .next{ left:auto;right:12px; background-position:100% 0;}
16 | .mF_kdui .prev:hover,.mF_kdui .next:hover{opacity:1;}
17 | .mF_kdui .arr-hover{ visibility:visible; opacity:0.5;}
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_shutters.css:
--------------------------------------------------------------------------------
1 | /*=========mF_shutters ========*/
2 | .mF_shutters{ position:relative;}
3 | .mF_shutters .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_shutters .pic{position:absolute;z-index:1;}
5 | .mF_shutters .pic ul{ position:absolute; top:0;left:0;width:x;height:100%; overflow:hidden;}
6 | .mF_shutters .pic ul li{ position:absolute;top:0;left:0; display:none;}
7 | .mF_shutters .txt{position:absolute;z-index:2;bottom:0; width:100%;height:36px;line-height:36px;}/*默认标题高度*/
8 | .mF_shutters .txt li{position:absolute;top:0;width:100%; visibility:hidden;opacity:0;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;}
9 | .mF_shutters .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
10 | .mF_shutters .txt li b{display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.4;}
11 | .mF_shutters .txt li.current{ visibility:visible; opacity:1;-webkit-transition:all 1s 1s;-moz-transition:all 1s 1s;-o-transition:all 1s 1s;}
12 | .mF_shutters .prev a,.mF_shutters .next a{ position:absolute;bottom:46px;left:0;padding:4px 6px; z-index:9;color:#333; text-decoration:none; background:#fff; border-radius:0 3px 3px 0;visibility:hidden;opacity:0;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;}
13 | .mF_shutters .hover a{visibility:visible;filter:alpha(opacity=80);opacity:0.8;}
14 | .mF_shutters .next a{left:auto;right:0;border-radius:3px 0 0 3px;}
15 | .mF_shutters .prev a:hover,.mF_shutters .next a:hover{ color:#f60;}
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_taobaomall.js:
--------------------------------------------------------------------------------
1 | myFocus.pattern.extend({//*********************淘宝商城风格 向上轮播，无上下选项******************
2 | 'mF_taobaomall':function(settings,$){
3 | var $focus=$(settings);
4 | var $picBox=$focus.find('.pic');
5 | var $picUl=$picBox.find('ul');
6 | var $txtList=$focus.addListTxt().find('li');
7 | $picUl[0].innerHTML+=$picUl[0].innerHTML;//无缝复制
8 | //CSS
9 | var n=$txtList.length,dir=settings.direction,prop=dir==='left'?'width':'height',dis=settings[prop];
10 | $picUl.addClass(dir)[0].style[prop]=dis*n*2+'px';
11 | $picUl.find('li').each(function(){//消除上下li间的多余间隙
12 | $(this).css({width:settings.width,height:settings.height});
13 | });
14 | var txtH=settings.txtHeight;
15 | $focus.css({height:settings.height+txtH+1});
16 | $picBox.css({width:settings.width,height:settings.height});
17 | $txtList.each(function(){this.style.width=(settings.width-n-1)/n+1+'px'});
18 | $txtList[n-1].style.border=0;
19 | //PLAY
20 | var param={};
21 | $focus.play(function(i){
22 | $txtList[i>=n?(i-n):i].className = '';
23 | },function(i){
24 | param[dir]=-dis*i;
25 | $picUl.slide(param,settings.duration,settings.easing);
26 | $txtList[i>=n?(i-n):i].className = 'current';
27 | },settings.seamless);
28 | //Control
29 | $focus.bindControl($txtList);
30 | }
31 | });
32 | myFocus.config.extend({
33 | 'mF_taobaomall':{//可选个性参数
34 | txtHeight:28,//默认标题按钮高度
35 | seamless:true,//是否无缝：true(是)| false(否)
36 | duration:600,//过渡时间(毫秒)，时间越大速度越小
37 | direction:'top',//运动方向，可选：'top'(向上) | 'bottom'(向下) | 'left'(向左) | 'right'(向右)
38 | easing:'easeOut'//运动形式，可选：'easeOut'(快出慢入) | 'easeIn'(慢出快入) | 'easeInOut'(慢出慢入) | 'swing'(摇摆运动) | 'linear'(匀速运动)
39 | }
40 | });
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_tbhuabao.css:
--------------------------------------------------------------------------------
1 | /*=========mF_tbhuabao========*/
2 | .mF_tbhuabao {background:#ddd;border:10px solid #333;overflow:visible;margin-left:10px; position:relative;}
3 | .mF_tbhuabao .loading{ position:absolute; width:100%; height:100%; background:#fff url(img/loading.gif) center no-repeat; z-index:9;}
4 | .mF_tbhuabao .pic,.mF_tbhuabao .pic ul{position:absolute;top:0;left:0;overflow:hidden;}
5 | .mF_tbhuabao .pic li{position:relative;float:left;overflow:hidden;}
6 | .mF_tbhuabao .txt li{position:absolute;z-index:2;width:100%;height:38px;line-height:38px;display:none;}/*默认标题高度*/
7 | .mF_tbhuabao .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
8 | .mF_tbhuabao .txt li b{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);opacity:0.3;}
9 | .mF_tbhuabao .dot{position:absolute;bottom:0;left:0;height:32px;line-height:28px;width:100%;text-align:center;}
10 | .mF_tbhuabao .dot li{display:inline;margin:0 3px;}
11 | .mF_tbhuabao .dot li a{color:#999;font-size:26px;text-decoration:none;-webkit-transition:color 0.4s;-moz-transition:color 0.4s;-o-transition:color 0.4s;}
12 | .mF_tbhuabao .dot li.current a{color:#f60;}
13 | .mF_tbhuabao .prev,.mF_tbhuabao .next{font:700 53px/58px arial;width:37px;height:65px;overflow:hidden;position:absolute;z-index:4;left:-20px;cursor:pointer;background:url(img/mF_tbhuabao/btn-bg.gif) no-repeat;}
14 | .mF_tbhuabao .next{left:auto;right:-20px;}
15 | .mF_tbhuabao .prev a,.mF_tbhuabao .next a{display:block;color:#bbb;text-align:center;text-decoration:none;}
16 | .mF_tbhuabao .prev a:hover,.mF_tbhuabao .next a:hover{color:#f60;}
17 |
--------------------------------------------------------------------------------
/roundabout/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
27 |
10 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_shutters.js:
--------------------------------------------------------------------------------
1 | myFocus.pattern.extend({//*********************百叶窗 和之前一个差不多******************
2 | 'mF_shutters':function(settings,$){
3 | var c=Math.floor(settings.width/50);
4 | var $focus=$(settings);
5 | var $txtList=$focus.addListTxt().find('li');
6 | var $picUls=$focus.find('.pic ul').repeat(c);
7 | var $prevBtn=$focus.addHtml('');
8 | var $nextBtn=$focus.addHtml('');
9 | var $picListArr=[];
10 | //CSS
11 | var w=settings.width/c;
12 | $picUls.each(function(i){
13 | $(this).css({width:w*(i+1),zIndex:c-i});
14 | $picListArr.push($(this).find('li'));
15 | });
16 | //PLAY
17 | var running=false,done=0;//记录运行状态
18 | $focus.play(function(i){
19 | running=true;
20 | $txtList[i].className='';
21 | },function(i){
22 | $txtList[i].className='current';
23 | for(var j=0;j
17 | 
21 | 
25 | 
29 | 
33 |
21 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_kdui.js:
--------------------------------------------------------------------------------
1 | myFocus.pattern.extend({//*********************kdui一般轮播，每张图片的标题动态展示不错******************
2 | 'mF_kdui':function(settings,$){
3 | var $focus=$(settings);
4 | var $picList=$focus.find('.pic li');
5 | var $txtList=$focus.addListTxt().find('li');
6 | var $dotList=$focus.addList('dot').find('li');
7 | var $prevBtn=$focus.addHtml('');
8 | var $nextBtn=$focus.addHtml('');
9 | //PLAY
10 | var param={isRunning:false};
11 | $focus.play(null,function(i,n,l){
12 | param.isRunning=true;
13 | $txtList.eq(l).slide({left:-settings.width},800,'easeInBack');
14 | fx(i,l);//延迟执行部分
15 | });
16 | function fx(i,l){
17 | setTimeout(function(){
18 | $txtList.eq(i).css({display:'block',left:settings.width}).slide({left:0},300);
19 | $picList.eq(i).css({display:'block',left:settings.width}).slide({left:0},function(){param.isRunning=false});
20 | if(i!==l) $picList.eq(l).slide({left:-settings.width},700);
21 | $dotList[l].className='';
22 | $dotList[i].className='current';
23 | },600);
24 | }
25 | //Control
26 | $focus.bindControl($dotList,param);
27 | $prevBtn.bind('click',function(){if(!param.isRunning) $focus.run('-=1')});
28 | $nextBtn.bind('click',function(){if(!param.isRunning) $focus.run('+=1')});
29 | $focus.bind('mouseover',function(){$prevBtn.addClass('arr-hover'),$nextBtn.addClass('arr-hover')});
30 | $focus.bind('mouseout',function(){$prevBtn.removeClass('arr-hover'),$nextBtn.removeClass('arr-hover')});
31 | }
32 | });
33 | myFocus.extend( myFocus.fn.easing,{//扩展缓动方法
34 | easeInBack: function (t, b, c, d, s) {
35 | if (s == undefined) s = 1.70158;
36 | return c*(t/=d)*t*((s+1)*t - s) + b;
37 | }
38 | });
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_luluJQ.js:
--------------------------------------------------------------------------------
1 | myFocus.pattern.extend({//*********************luluJQ 这个就是一个推拉门******************
2 | 'mF_luluJQ':function(settings,$){
3 | var $focus=$(settings);
4 | $focus.find('.pic a').each(function(){
5 | var $o=$(this),txt=$o.find('img')[0].alt;
6 | $o.addHtml(''+txt+'');
7 | });
8 | var $picBox=$focus.find('.pic');
9 | var $picList=$focus.find('li');
10 | var $imgList=$picBox.find('img');
11 | var $txtList=$focus.find('span');
12 | var $txtBgList=$focus.find('i');
13 | //CSS
14 | var n=$picList.length,tabW=settings.tabWidth,txtH=settings.txtHeight,o=settings.grayOpacity;
15 | $focus.css({width:settings.width+(n-1)*tabW});
16 | for(var i=0;i
22 |
29 | 1
23 | 2
24 | 3
25 | 4
26 | 5
27 | 6
28 | | 1 | 29 |C# | 30 |
| 2 | 33 |C++ | 34 |
| 3 | 37 |js | 38 |
| 4 | 41 |Jquery | 42 |
| 5 | 45 |html | 46 |
| 6 | 49 |PHP | 50 |
| 7 | 53 |Perl | 54 |
| 8 | 57 |PASCAL | 58 |
| 111 | 17 |18 | 上移 19 | 下移 20 | | 21 |
| 222 | 24 |25 | 上移 26 | 下移 27 | | 28 |
| 333 | 31 |32 | 上移 33 | 下移 34 | | 35 |
| 444 | 38 |39 | 上移 40 | 下移 41 | | 42 |
| 555 | 45 |46 | 上移 47 | 下移 48 | | 49 |
28 | 11111111111111
29 |
30 |
31 |
32 |
33 |
59 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_liuzg.js:
--------------------------------------------------------------------------------
1 | /*
2 | * 绚丽切片风格 v2.0
3 | * Date 2012.5.25
4 | * Author koen_lee 这个也不错，不过也没有左右选项
5 | */
6 | myFocus.pattern.extend({
7 | 'mF_liuzg':function(settings,$){
8 | var $focus=$(settings);
9 | var $picBox=$focus.find('.pic');
10 | var $picList=$picBox.find('li');
11 | var $txtList=$focus.addListTxt().find('li');
12 | var $numList=$focus.addListNum().find('li');
13 | //HTML++
14 | var c=Math.floor(settings.height/settings.chipHeight),n=$txtList.length,html=['
30 | - '];
15 | for(var i=0;i
50 | 
51 | 
52 | 
53 | 
54 |
');
17 | for(var j=0;j');
19 | }
20 | html.push('');
21 | $picBox[0].innerHTML=html.join('');
22 | //CSS
23 | var w=settings.width,h=settings.height,cH=Math.round(h/c);
24 | $picList=$picBox.find('li');
25 | var $picDivList=$picBox.find('div');
26 | $picList.each(function(i){
27 | $picList.eq(i).css({width:w,height:cH});
28 | $picDivList.eq(i).css({height:h*n,top:-i*h});
29 | });
30 | $picBox.find('a').each(function(){this.style.height=h+'px'});
31 | //PLAY
32 | $focus.play(function(i){
33 | $txtList[i].style.display='none';
34 | $numList[i].className='';
35 | },function(i){
36 | var tt=settings.type||Math.round(1+Math.random()*2);//效果选择
37 | var dur=tt===1?1200:300;
38 | for(var j=0;j
2 |
3 |
4 |
5 | 妙味课堂-www.miaov.com
6 |
17 |
18 |
45 |
46 |
47 | 鼠标
6 |
30 |
31 |
32 |
41 |
42 |
43 |
59 |
--------------------------------------------------------------------------------
/蛇形文字/蛇形文字.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 蛇形文字
6 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
56 |
--------------------------------------------------------------------------------
/轮播神器/js/mf-pattern/mF_ladyQ.js:
--------------------------------------------------------------------------------
1 | myFocus.pattern.extend({//*********************ladyQ没什么好说的，这个一般******************
2 | 'mF_ladyQ':function(settings,$){
3 | var $focus=$(settings);
4 | var $picList=$focus.find('.pic li');
5 | var $txtList=$focus.addListTxt().find('li');
6 | var $numList=$focus.addListNum().find('li');
7 | var $bar=$focus.addHtml('');
8 | //CSS
9 | var n=$picList.length,numH=28,barW=settings.width-23*n-6;
10 | $focus[0].style.height=settings.height+numH+'px';
11 | $bar[0].style.cssText='top:'+(settings.height+4)+'px;width:'+barW+'px;'+(settings.timeBar?'':'display:none');
12 | for(var i=0;i
3 |
4 |
5 |
6 | 文字转移
7 |
24 |
25 |
26 |
48 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/列表项滚动(多用于新闻条目)/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | -
49 |
27 |
28 |
29 |
30 |
31 |
32 |
56 |
--------------------------------------------------------------------------------