現在點的科技,科技就在中間,如何點其他也跑到中間?
Following the voice in heart.
點擊軍事的時候,獲得軍事這個dom距離父級dom左邊的距離,把拿到的距離除以2,然後做移動
如果點最左邊上的,居中的話左邊不就是空白的了?
點擊哪個類型的時候,這個dom距離父級的dom的左邊的距離是可以算的吧,屏幕的寬度是可以算的吧,dom的距離與屏幕一半寬的大小做比較,然後再判斷時間移動和移動多少距離
margin-left:-(x * this.index)px;判斷當前點擊物件的index 然後計算出偏移量
昨天剛好做了這個demo測試。不期而遇佈局方式也與今日頭條的一樣。 JQ實作方式:
html
<ul class="nav" > <li class="active">第0个</a> <li>第1个</a> <li>第2个</a> <li>第3个</a> <li>第4个</a> <li>第5个</a> <li>第6个</a> <li>第7个</a> <li>第8个</a> </ul
css
.nav{ white-space: nowrap; overflow-x: scroll; width: 100%; border-bottom: 1px solid #ccc; } .nav li{ display: inline-block; margin: 0 12px; line-height: 0.8rem; color: #222222; padding: 20px 0; } .nav .active{color:#F23030;}
jq
//导航条宽度 var navW = $('.navs').width(); //页面宽度 var docW = $(document).width(); $('.nav li').click(function(){ //移除样式 $('.nav li').removeClass('active'); //当前添加样式 $(this).addClass('active'); //当前li宽度 var thisW = $(this).width(); //要移动的距离 var left = $('.nav').scrollLeft() + ($(this).offset().left)-(docW/2 - thisW/2); $('.nav').animate({scrollLeft:left},300); }) 期待更好的方式。
點擊軍事的時候,獲得軍事這個dom距離父級dom左邊的距離,把拿到的距離除以2,然後做移動
如果點最左邊上的,居中的話左邊不就是空白的了?
點擊哪個類型的時候,這個dom距離父級的dom的左邊的距離是可以算的吧,
屏幕的寬度是可以算的吧,
dom的距離與屏幕一半寬的大小做比較,然後再判斷時間移動和移動多少距離
margin-left:-(x * this.index)px;
判斷當前點擊物件的index 然後計算出偏移量
昨天剛好做了這個demo測試。不期而遇佈局方式也與今日頭條的一樣。
JQ實作方式:
html
css
jq