js無間縫向上滾動
阿新 • • 發佈：2019-01-14
一、
html
<div id="my_msg" class="my-msg bg-white clearfix none"><div class="icon"><i class="envelope"></i><p>我的訊息</p><i class="@(Model!=null&&Model.Count>0? "red-dot":"")"></i></div> <div class="msg" id="myMsgContent"> <ul> @if (Model != null && Model.Count > 0) { foreach (var item in Model) { if (item.MsgType == Gxrc.Common.GxrcEnum.JobseekerWebAppPushMsgType.公司發來面試邀請.GetHashCode()) { targetUrl = string.Format("http://my.{0}gxrc.com/ResumeInterview/MyInvitation", WebHelper.TestTag); } else { targetUrl = string.Format("http://person.{0}gxrc.com{1}", WebHelper.TestTag, (WebHelper.IsTest ? ":88" : "")) + item.url; }<li> <a href="javascript:setRead(@(item.MsgType),'@(targetUrl)')"> @if (!string.IsNullOrEmpty(item.MsgTitle)) { ViewContext.Writer.Write(string.Format("【{0}】", item.MsgTitle)); } @(item.MsgContent)</a> </li> } } else { <li> <a href="#"> 暫無訊息 </a> </li> } </ul> </div> </div>
css
.my-msg{height:46px;color:#999;padding:10px;} .my-msg .icon{float:left;width:50px;border-right:1px solid #dcdcdc;text-align:left;margin-right:10px;position:relative;} .my-msg a,.my-msg i{display:block;} .my-msg i.envelope{float:left;width:40px;height:28px;background:#fff url(/Content/Images/2018/message.png) no-repeat;background-size:100%;} .my-msg .icon p{float:left;font-size:12px;color:#666;transform: scale(0.8);margin-left:-4px;} .my-msg i.red-dot{width:10px;height:10px;background:#f33;border-radius:100%; position:absolute;top:-2px;right:8px;} .my-msg .msg{height:46px;overflow: hidden;} .my-msg .msg li a{display:block;height:40px;line-height:20px;margin:5px; font-size:14px;color:#666;overflow:hidden;}
js
//資料向上滾動 function scrollNews(obj) { var $self = obj.find('ul:first'); var lineHeight = $self.find('li:first').height(); $self.animate({ 'marginTop': -lineHeight + 'px' }, 500, function () { $self.css({ marginTop: 0 }).find('li:first').appendTo($self); }); } function afterScrollNews(obj) { var timeout = 3000; var scrollTimer = setInterval(function () { scrollNews(obj); }, timeout); obj.hover(function () { clearInterval(scrollTimer); }, function () { scrollTimer = setInterval(function () { scrollNews(obj); }, timeout); }); }
var $obj = $('#myMsgContent');
afterScrollNews($obj);
二、不是很好用，程式碼繁瑣，而且div內容是load的話，無效
html
<div class="contentWidth" id="RecruitmentArea"> <div id="ImportantRecruitment" class="RecruitmentInfo"> <div class="RecruitmentIcon"> <nav> <a href="/HomePosition/resultCity?schType=1&IsEmer=true&pageSize=10&page=1" class="menuJp" title="急聘"> <i class="icon-clock"></i> <p>急聘</p> </a> </nav> </div> <div class="RecruitmentDe" id="ImportantRecruitmentPosition"> <ul class="Triangle" style="margin-top: -325px;"> <li> <a href="/home/jobDetail?pid=3142012"> <p class="PositionName">蔚來顧問（Fellow)--高薪</p> <p class="Enterprise">上海蔚來汽車有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市/青秀區</span><span class="vl">|</span><span>8001-10000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=2611237"> <p class="PositionName">技術支援/維護</p> <p class="Enterprise">廣西樂美趣智慧科技有限公司</p> <p class="Enterprise"><span></span><span class="vl"></span><span>南寧市/西鄉塘區</span><span class="vl">|</span><span>4001-5000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=2604036"> <p class="PositionName">銷售行政助理（週末雙休）</p> <p class="Enterprise">南寧中天房地產有限責任公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市</span><span class="vl">|</span><span>3001-4000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3142277"> <p class="PositionName">寒假工(餐飲服務員）</p> <p class="Enterprise">廣西好友緣餐飲投資有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市</span><span class="vl">|</span><span>2001-3000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=376009"> <p class="PositionName">土建工程師</p> <p class="Enterprise">皇氏集團股份有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市/西鄉塘區</span><span class="vl">|</span><span>4001-5000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3142012"> <p class="PositionName">蔚來顧問（Fellow)--高薪</p> <p class="Enterprise">上海蔚來汽車有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市/青秀區</span><span class="vl">|</span><span>8001-10000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=2611237"> <p class="PositionName">技術支援/維護</p> <p class="Enterprise">廣西樂美趣智慧科技有限公司</p> <p class="Enterprise"><span></span><span class="vl"></span><span>南寧市/西鄉塘區</span><span class="vl">|</span><span>4001-5000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=2604036"> <p class="PositionName">銷售行政助理（週末雙休）</p> <p class="Enterprise">南寧中天房地產有限責任公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市</span><span class="vl">|</span><span>3001-4000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3142277"> <p class="PositionName">寒假工(餐飲服務員）</p> <p class="Enterprise">廣西好友緣餐飲投資有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市</span><span class="vl">|</span><span>2001-3000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=376009"> <p class="PositionName">土建工程師</p> <p class="Enterprise">皇氏集團股份有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>南寧市/西鄉塘區</span><span class="vl">|</span><span>4001-5000</span></p> </a> </li></ul> </div> </div> <div id="Graduate" class="RecruitmentInfo"> <div class="RecruitmentIcon"> <nav> <a href="/home/bys?did=2" class="menuBys" title="畢業生"> <i class="icon-doctorialHat"></i> <p>畢業生</p> </a> </nav> </div><div class=" RecruitmentDe" id="GraduateRecruitmentPosition"> <ul class="Triangle" style="margin-top: -650px;"> <li> <a href="/home/jobDetail?pid=3155622"> <p class="PositionName">工程測量</p> <p class="Enterprise">廣西高立工程技術有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>3001-4000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3155354"> <p class="PositionName">道路設計實習生</p> <p class="Enterprise">廣西高立工程技術有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>1001-1500</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3155168"> <p class="PositionName">財務實習生</p> <p class="Enterprise">永誠財產保險股份有限公司廣西分公司</p> <p class="Enterprise"><span>本科</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>1001-1500</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3154921"> <p class="PositionName">app推廣員</p> <p class="Enterprise">南寧領友網路科技有限責任公司百色分公司</p> <p class="Enterprise"><span>高中</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>2001-3000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3153857"> <p class="PositionName">弱電施工員</p> <p class="Enterprise">廣西南寧市鵬華科技有限責任公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>3001-4000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3153309"> <p class="PositionName">銷售培訓生-華南大區廣西區域</p> <p class="Enterprise">內蒙古伊利實業集團股份有限公司南寧第一分公司</p> <p class="Enterprise"><span>本科</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>5001-6000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3151368"> <p class="PositionName">零售管理培訓生</p> <p class="Enterprise">廣西安聯體育用品有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>3001-4000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3157871"> <p class="PositionName">產品專員</p> <p class="Enterprise">廣西金奔騰汽車科技有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>3001-4000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3157279"> <p class="PositionName">海運操作員</p> <p class="Enterprise">廣西吉馳物流有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>2001-3000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3156912"> <p class="PositionName">電廠運營工程師國際培訓生</p> <p class="Enterprise">斯道拉恩索（廣西）漿紙有限公司</p> <p class="Enterprise"><span>本科</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>565-1000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3155622"> <p class="PositionName">工程測量</p> <p class="Enterprise">廣西高立工程技術有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>3001-4000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3155354"> <p class="PositionName">道路設計實習生</p> <p class="Enterprise">廣西高立工程技術有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>1001-1500</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3155168"> <p class="PositionName">財務實習生</p> <p class="Enterprise">永誠財產保險股份有限公司廣西分公司</p> <p class="Enterprise"><span>本科</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>1001-1500</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3154921"> <p class="PositionName">app推廣員</p> <p class="Enterprise">南寧領友網路科技有限責任公司百色分公司</p> <p class="Enterprise"><span>高中</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>2001-3000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3153857"> <p class="PositionName">弱電施工員</p> <p class="Enterprise">廣西南寧市鵬華科技有限責任公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>3001-4000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3153309"> <p class="PositionName">銷售培訓生-華南大區廣西區域</p> <p class="Enterprise">內蒙古伊利實業集團股份有限公司南寧第一分公司</p> <p class="Enterprise"><span>本科</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>5001-6000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3151368"> <p class="PositionName">零售管理培訓生</p> <p class="Enterprise">廣西安聯體育用品有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>3001-4000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3157871"> <p class="PositionName">產品專員</p> <p class="Enterprise">廣西金奔騰汽車科技有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>3001-4000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3157279"> <p class="PositionName">海運操作員</p> <p class="Enterprise">廣西吉馳物流有限公司</p> <p class="Enterprise"><span>大專</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>2001-3000</span></p> </a> </li><li> <a href="/home/jobDetail?pid=3156912"> <p class="PositionName">電廠運營工程師國際培訓生</p> <p class="Enterprise">斯道拉恩索（廣西）漿紙有限公司</p> <p class="Enterprise"><span>本科</span><span class="vl">|</span><span>廣西壯族自治區</span><span class="vl">|</span><span>565-1000</span></p> </a> </li></ul> </div> </div> </div>
css
#RecruitmentArea { padding: 10px 0; } #RecruitmentArea .RecruitmentInfo { height: 65px; background-color: #fff; padding: 0 0 0 90px; overflow: hidden; position: relative; } #RecruitmentArea .RecruitmentIcon { position: absolute; top: 0; left: 0; } #RecruitmentArea .RecruitmentIcon a { width: 80px; height: 80px; } .menuJp { background: #ff6666; } .menuBys { background: #99cc99; } .menuJp i { width: 49px; height:28px; margin: 10px auto 0; font-size: 26px; } .menuBys i { width: 49px; height:30px; margin: 3px auto 3px; font-size: 36px; } #ImportantRecruitmentPosition, #GraduateRecruitmentPosition { height: 65px; overflow: hidden; } #RecruitmentArea ul li { position: relative; height: 65px; } #RecruitmentArea ul li a { display:block; padding-right:20px;} #RecruitmentArea p {} #RecruitmentArea .PositionName { height: 24px; color: #009FE7; font-size: 16px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; } #RecruitmentArea .Enterprise { height:19px; color: #666666; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #Graduate { margin-top: 10px; clear: both; } .RecruitmentDe { }
js
(function () { //$("#HotKey").find("a").each(function () { // var $this = $(this); // $this.attr("href", "/HomePosition/resultCity?keyword=" + $this.text() + "&schType=1"); //}); $('#silder').imgSilder({ s_width: '100%', //容器寬度 s_height: 90, //容器高度 is_showTit: false, // 是否顯示圖片標題 false :不顯示，true :顯示 s_times: 3000 //設定滾動時間 }); $(".vl").each(function () { var $this = $(this); if ($.trim($this.next().text()) == "" || $.trim($this.prev().text()) == "") { $this.text(""); } }); function mix(t, s, ov, wl) { if (!s || !t) return t; if (ov === undefined) ov = true; var i, p, l; if (wl && (l = wl.length)) { for (i = 0; i < l; i++) { p = wl[i]; if (p in s) { if (ov || !(p in t)) { t[p] = s[p]; } } } } else { for (p in s) { if (ov || !(p in t)) { t[p] = s[p]; } } } return t; }; function augment(t, s, ov, wl) { mix(t.prototype, s.prototype || s, ov, wl); return t; } var direction = function () { } direction.prototype = { startTimer: function (fn) { var self = this; if (self.options.timeout) { self.timer = setInterval(function () { fn && fn.call(self); self.play(); }, self.options.timeout); } }, stopTimer: function () { var self = this; self.timer && clearInterval(self.timer); }, isDir: function () { var self = this; return self.options.dir == 1 || self.options.dir == 4; }, getDir: function (b) { var self = this; return self.options.dir == 1 || self.options.dir == 3; }, getDimName: function () { var self = this; return self.getDir() ? "height" : "width"; }, getDirName: function () { var self = this; return self.getDir() ? "margin-top" : "margin-left"; }, getElemSize: function () { var self = this; return self.getDir() ? self.options.outHeight : self.options.outWidth; }, getContainerSize: function () { var self = this; return self.getDir() ? self.options.height : self.options.width; }, //獲取滾動的演算法資訊 getSizeInfo: function () { var self = this, totalPageSize = self.maxIndex * self.getElemSize(), totalPageLen = Math.floor(totalPageSize / self.getContainerSize()), viewPageLen = Math.floor(self.getContainerSize() / self.getElemSize()), residuePageLen = self.maxIndex - viewPageLen, endLen = residuePageLen % self.options.step, pageIndex = self.index * self.options.step, endPos = totalPageSize - self.getContainerSize(), stepPos = self.isDir() ? pageIndex - self.options.step : pageIndex + self.options.step, scrollPos = stepPos * self.getElemSize(), viewSize = self.getElemSize() * self.options.step, resultLen = self.maxIndex - endLen == self.maxIndex ? 0 : Math.abs(self.maxIndex - ((self.maxIndex - endLen) + self.options.step)), resultSize = resultLen * self.getElemSize(), maxIndex = Math.ceil((self.maxIndex - viewPageLen) / self.options.step); return { totalPageSize: totalPageSize, endPos: endPos, pageIndex: pageIndex, scrollPos: scrollPos, viewSize: viewSize, viewPageLen: viewPageLen, totalPageLen: totalPageLen, resultSize: resultSize, maxIndex: maxIndex } } } var slider = function (o) { this.options = o || {}; this.init(); } mix(slider.prototype, { init: function () { var self = this; self.options.target = self.options.target || '#banner_scroller'; self.options.item = self.options.item || 'li'; self.options.prev = self.options.prev || null; self.options.next = self.options.next || null; self.options.time = self.options.time != null ? self.options.time : 500;