之前也寫過兩篇程式猿生涯的文章.後面都給刪掉了
一直想重新寫起來 把一些碼**遇到的一些坑給記下來,一直忘記,也一直拖著,拖延症越來越嚴重了..
回到主題吧.
最近做專案 遇到乙個小效果.對的 只是乙個小效果而已 就是文字上下輪播
一樣..但是基本可以解決需求.現學現用.問題也可以解決但是並不知道這個東西是怎麼實現的,不知其所以然.
最近這份工作,標籤是全棧程式猿,一些簡單的js效果,就不用外掛程式了吧.自己簡單的寫寫,也順便想提公升一下自己的水平,畢竟太菜了.寫乙個東西.你要先知道這個東西原理是
什麼，才能知道怎麼去實現.不知道原理的那還是用外掛程式吧..畢竟人家封裝好的.但是對於自己的進步不利,原地踏步.
說這個文字上下輪播 其實挺簡單的 無非就是位置的改變而已
而位置的改變有什麼 css中有position: relative; 配合 position: absolute; 這兩個配合起來真的爽
css3有transform 不過css3我不太會....所以這裡就不介紹css3的寫法了，有時間補上
**貼上
html
上下輪播1
上下輪播2
上下輪播3
上下輪播4
上下輪播5
上下輪播6
$(function ()
$(".new-carousel-div").animate(, 200);
index++;
}, 3000);
});
overflow: hidden;//超出隱藏 因為你設定了它的高度 並又設定了這個屬性,所以它的子div實際上有高度有300px 但是顯示出來的只有50px.new-carousel-div無非就是設定輪播div的top值. 隔斷時間將top值給它更新一下,等到達頂點,歸0 我這裡使用了jq庫..呃.原生js寫的不太好.....jq這個庫還是nb的不行...也可以提高效率 能用則用吧
用window的畫圖功能簡單的畫了畫 黑色陰影就是不可見的 中間的div 是不變的
嗯.畫風師承印象派
上下輪播是改變top 左右輪播就是改變left
小程式文字上下滾動輪播效果實現CSS
1 這是一句話 2 這是一句話 3 這是一句話 4 這是一句話 5 這是一句話 6 這是一句話 7 這是一句話 8 這是一句話 9 這是一句話 10 這是一句話 11 這是一句話 webkit keyframes rowup 0 webkit transform translate3d 0,0,0 ...
文字上下滾動
效果圖 無間隙文字向上滾動1a li href 無間隙文字向上滾動2a li href 無間隙文字向上滾動3a li href 無間隙文字向上滾動4a li href 無間隙文字向上滾動5a li href 無間隙文字向上滾動6a li href 無間隙文字向上滾動7a li ul div div ...
超簡單的文字輪播
這是一段耐人尋味的 當然了你想看就看，不想看就直接跳過。兩分鐘即可寫出文字輪播，因為這是封裝的乙個js檔案，主要是使用簡單。fn.extend var this this.eq 0 find ul first var lineh this.find li first height 獲取行高 line...