温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
刘国利：白色,是我的世界的颜色,独特而隐逸。我的“自由”不单纯是不让别人决定我的人生,还是认识我的个性,维护我的个性,决定我生活目标的代名词,也从不以“地位”、“权力”为目标,只为了自己心底的梦、珍重的事、守护的情而奋斗。
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
&单击中心位置，上下两个div块会滑动进入大DIV，再次单击会滑出代码：引入了mobi-jq的js框架（jq框架也可）&!DOCTYPE HTML&&html& &head&
&meta charset="utf-8"&
&title& css3 滑动块效果 &/title&
&meta name="Keywords" content=""&
&meta name="Description" content=""&
&style type="text/css"& .top{position:width:500height:50top:0background:#} .bottom{position:width:500height:50margin:-50px 0 0 0;top:250background:#000;} .mokuai{position:margin:100px auto 0;width:500height:300background:#999;}
@-webkit-keyframes autoscroll {from{top:-50} to{top:0
@-webkit-keyframes autoscroll2 {from{top:300} to{top:250} }
@-webkit-keyframes autoscroll_2{from{top:0 } to{top:-50} }
@-webkit-keyframes autoscroll2_2{from{top:250} to{top:300} } .reset1{top:-50} .reset2{top:300} .con1{-webkit-animation:autoscroll 1s linear 0;} .con2{-webkit-animation:autoscroll2 1s linear 0;} .con1_2{-webkit-animation:autoscroll_2 1s linear 0;} .con2_2{-webkit-animation:autoscroll2_2 1s linear 0;}
&/style& &/head& &body& &div class='mokuai' id='mokuai'& &div class="top" id='top'&&/div& &div class='bottom' id='bottom'&&/div& &/div& &/body& &script src="jq_mobi_min.js" type="text/javascript"&&/script&/*在此引入了mobi-jq的js框架*/ &script type="text/javascript"& &!-- var con=0; var content=document.getElementById('mokuai'); $('#top').addClass('reset1'); $('#bottom').addClass('reset2'); content.onclick=function(){
if(con==0){
$('#top').removeClass('reset1').removeClass('con1_2').addClass('con1');
$('#bottom').removeClass('reset2').removeClass('con2_2').addClass('con2');
$('#top').removeClass('con1').addClass('reset1').addClass('con1_2');
$('#bottom').removeClass('con2').addClass('reset2').addClass('con2_2');
} } //--& &/script&&/html&
独行冰海推荐阅读：
& 23:55:06
& 23:40:56
& 16:47:51
& 21:43:19
& 12:52:46
阅读(5846)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'CSS3配合js实现滑动块效果',
blogAbstract:'效果图：',
blogTag:'css3,滑动块效果,js,javascript',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:7,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'刘国利：白色,是我的世界的颜色,独特而隐逸。我的“自由”不单纯是不让别人决定我的人生,还是认识我的个性,维护我的个性,决定我生活目标的代名词,也从不以“地位”、“权力”为目标,只为了自己心底的梦、珍重的事、守护的情而奋斗。',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
黑夜,给了我黑色的眼睛,我却用它来寻找光明....
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
02&div&data-role="page"&id="index"&03&div&data-role="content"&04&&&&&&ul&data-role="listview"&id="circle-news-list1"&05&&&&&!-- 第一个列表 --&06&&&&&&/ul&&&&&&&&&&&&07&/div&08&/div&09//第二页面10&div&data-role="page"&id="class-page"&11&div&data-role="content"&12&&&&&&ul&data-role="listview"&id="class-news-list2"&13&&&&&!-- 第二个列表 --&14&&&&&&/ul&&&&&&&&&&&&15&/div&16&/div&接下来通过jquery mobile 中的swipe事件还执行左右滑动效果：01&script&02$(function(){03&&&&$("#circle-news-list1").bind("swipeleft",function(){04&&&&&&&&$.mobile.changePage("#class-page");05&&&&});06&&&&$("#class-news-list2").bind("swiperight",function(){07&&&&&&&&$.mobile.changePage("#index", {transition:"slide",reverse:true},&true,&true);08&&&&});09});10&/script&这里，从左往右比较容易，默认的slide就可以了，从右往左是关键，默认的切换效果还是会从左往右，所以要加上reverse:true,这样就可以实现左右切换了~
阅读(1094)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_095067',
blogTitle:'Jquery Mobile左右滑动效果page',
blogAbstract:'首先，页面里有两个&div data-role=\"page\"&，捡重点的写是，省掉其中的header和footer,这样：',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:5,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'黑夜,给了我黑色的眼睛,我却用它来寻找光明....',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}