摘要:因項目需要實現消息通知上下無縫輪播的效果,所以寫了一下,在這個分享出來,希望再次遇到此需求的道友,可以直接拷貝來用,節約一點不必要的時間。
因項目需要實現消息通知上下無縫輪播的效果,所以寫了一下,在這個分享出來,希望再次遇到此需求的道友,可以直接拷貝來用,節約一點不必要的時間。 原生JS版本
<span class="properties"><span class="hljs-attr">文字上下無縫輪播</span></span>
- 富強、民主、文明、和諧、自由1
- 富強、民主、文明、和諧、自由2
- 富強、民主、文明、和諧、自由3
- 富強、民主、文明、和諧、自由4
- 富強、民主、文明、和諧、自由5
- 富強、民主、文明、和諧、自由6
- 富強、民主、文明、和諧、自由1
- 富強、民主、文明、和諧、自由2
- 富強、民主、文明、和諧、自由3
- 富強、民主、文明、和諧、自由4
- 富強、民主、文明、和諧、自由5
- 富強、民主、文明、和諧、自由6
jQuery版本
文字上下無縫輪播 - * {
- margin: 0;
- padding: 0;
- }
- #container{
- width: 60%;
- margin: 100px auto;
- position: relative;
- height: 200px;
- overflow: hidden;
- }
- #list-wrapper{
- position: relative;
- top: 0;
- }
- ul {
- list-style: none;
- background: #f8f8f8;
- text-align: center;
- padding: 0 20px;
- }
- li{
- height: 35px;
- line-height: 35px;
- color: #fff;
- }
- li:nth-child(odd){
- background: #5077aa;
- }
- li:nth-child(even){
- background: #fb6b06;
- }
- 富強、民主、文明、和諧、自由1
- 富強、民主、文明、和諧、自由2
- 富強、民主、文明、和諧、自由3
- 富強、民主、文明、和諧、自由4
- 富強、民主、文明、和諧、自由5
- 富強、民主、文明、和諧、自由6
- var ROLL_SPEED = 100
- var noticeList1 = $("#notice-list");
- var noticeList2 = $("#notice-list-2");
- var listWrapper = $("#list-wrapper");
- noticeList2.html(noticeList1.html())
- listWrapper.css("top", 0)
- var timer = setInterval(rollStart, ROLL_SPEED);
- function rollStart() {
- if (Math.abs(_subStr(listWrapper.css("top"))) >= noticeList1.height()) {
- listWrapper.css("top", 0)
- } else {
- var top = listWrapper.css("top");
- listWrapper.css("top", _subStr(top) - 1)
- }
- }
- // 截取px前數值
- function _subStr(str) {
- var index = str.indexOf("px");
- if (index > -1) {
- return parseFloat(str.substr(0, index + 1))
- }
- }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/52572.html
摘要:因項目需要實現消息通知上下無縫輪播的效果,所以寫了一下,在這個分享出來,希望再次遇到此需求的道友,可以直接拷貝來用,節約一點不必要的時間。 因項目需要實現消息通知上下無縫輪播的效果,所以寫了一下,在這個分享出來,希望再次遇到此需求的道友,可以直接拷貝來用,節約一點不必要的時間。 原生JS版本 文字上下無縫輪播 * { margin: ...
摘要:因項目需要實現消息通知上下無縫輪播的效果,所以寫了一下,在這個分享出來,希望再次遇到此需求的道友,可以直接拷貝來用,節約一點不必要的時間。 因項目需要實現消息通知上下無縫輪播的效果,所以寫了一下,在這個分享出來,希望再次遇到此需求的道友,可以直接拷貝來用,節約一點不必要的時間。 原生JS版本 文字上下無縫輪播 * { margin: ...
摘要:函數庫動畫庫動畫庫,也是目前最通用的動畫庫。下拉框級聯選擇器移動端最好用的的篩選器組件聯動篩選移動端最好用的的篩選器組件聯動篩選顏色選擇器時間選擇器時間日期處理是一個解析,驗證,操作和顯示日期和時間的類庫。 showImg(https://segmentfault.com/img/bVbjpHt?w=900&h=383); 前言 在開發中,我們經常會將一些常用的代碼塊、功能塊進行封裝,...
知識點介紹: innerHTML 主要是為獲取或設置某個對象的內容 scrollTop 主要是實現滾動條滾動的距離,注意這是系統定義好的屬性 offsetHeight 獲取或設置對象的高度 setInterval() 開始定時器 clearInterval() 關閉定時器 html布局結構如下: 其中con2是用來儲存復制con1內容的容器 <body> &l...
摘要:一些有用的一些有用的,包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程,大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署,可能大多數前端工程師在工作中都是使用的公司現成的部署系統,與SRE對接、一起完...
閱讀 2394·2019-08-30 15:56
閱讀 1052·2019-08-30 15:55
閱讀 3215·2019-08-30 15:44
閱讀 942·2019-08-30 10:53
閱讀 1899·2019-08-29 16:33
閱讀 2502·2019-08-29 16:13
閱讀 728·2019-08-29 12:41
閱讀 886·2019-08-26 13:56