Jquery栏目无缝滚动效果
Jquery栏目无缝滚动效果,支持从左往右或从右往左无缝滚动。代码示例:
Jquery无缝滚动效果 .container { width:1133px; height:auto; position:relative;margin:0 auto;} .new { height:445px; background:#f4f4f4; } .new .new_tit { font-size:18px; text-align:left; color:#332d2a; padding-top:55px; padding-bottom:10px;} .new .new_tit a:hover { color:#e71d4d;} .new .nw { width:100%; position: absolute;left:0; top:90px; z-index:1; height:345px; overflow:hidden;} .new .nw .allnew { width:2000px; height:294px; padding-top:5px; overflow:hidden; } .new .nw .nl{ float:left; margin-right:33px; -webkit-transform: translate(0,0);transform: translate(0,0);-webkit-transition: all ease-out 0.6s 0s;transition: all ease-out 0.6s 0s;} .new .nw .nl:hover { -webkit-transform: translate(0,-5px); transform: translate(0,-5px); } .new .nw .nl a { width:355px; height:305px;} .new .nw .nl a .img { display: block; width:356px; height:234px;border:1px solid red; background:green;} .new .nw .nl a h1 { font-size:14px; font-weight:400; color:#1f1f1f; padding-top:20px; padding-bottom:4px;} .new .nw .nl a h2 { color:rgba(120,120,120,0.6); font-size:12px;} .new .n_left { display:block; position:absolute;left:-40px; top:220px; z-index:10; cursor:pointer;width:20px;height:20px;border:1px solid red;} .new .n_right { display:block; position:absolute;right:-36px; top:220px; z-index:10; cursor:pointer;width:20px;height:20px;border:1px solid red;} Jquery栏目无缝滚动效果
左
标题一
标题二
标题三
标题四
标题五
右
页:
[1]