一、
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; self.options.timeout = self.options.timeout != null ? self.options.timeout : 5000; self.options.dir = self.options.dir || 4; self.options.autoPlay = self.options.autoPlay || "auto"; self.target = $(self.options.target); self.item = self.target.find(self.options.item); self.list = self.item.parent(); self.options.step = self.options.step || 1; self.options.width = self.target.outerWidth(); self.options.height = self.target.outerHeight(); self.options.outWidth = self.item.outerWidth(true); self.options.outHeight = self.item.outerHeight(true); self.options.tempDir = self.options.dir; self.maxIndex = self.item.length; self.enabled = true; self.steup(); }, steup: function () { var self = this, size = self.getSizeInfo().viewPageLen; if (self.options.step > size) self.options.step = size; if (self.maxIndex <= size) { self.options.prev && self.target.find(self.options.prev).hide(); self.options.next && self.target.find(self.options.next).hide(); return; } self.bind(); }, bind: function () { var self = this; self.initList(); self.target.hover(function () { self.stopTimer(); }, function () { self.autoPlay(); }); self.options.prev && self.target.find(self.options.prev).click(function () { if (self.enabled) { self.options.dir = self.getDir() ? 3 : 2; self.play(); } }); self.options.next && self.target.find(self.options.next).click(function () { if (self.enabled) { self.options.dir = self.getDir() ? 1 : 4; self.play(); } }); self.autoPlay(); }, initList: function () { var self = this, avaisize = self.maxIndex - self.getSizeInfo().viewPageLen, total = self.maxIndex * self.getElemSize(), html = self.list.html(); if (avaisize < self.options.step) { self.list.append(html); } self.list.prepend(html); self.pos = -total; self.list.css(self.getDirName(), self.pos); }, addElement: function () { var self = this; self.item = self.target.find(self.options.item); self.maxIndex = self.item.length; self.item.each(function (i) { if (i >= self.options.step) return; if (self.isDir()) { self.item.eq(i).appendTo(self.list); } else { self.item.eq(self.maxIndex - i - 1).prependTo(self.list); } }); self.list.css(self.getDirName(), self.pos); }, play: function () { var self = this; self.enabled = false; self.go(); self.stopTimer(); }, autoPlay: function () { var self = this; if (self.options.autoPlay === "auto") { self.stopTimer(); self.startTimer(); } }, go: function () { var self = this; self.list.stop(true, false).animate(self.getPos(), self.options.time, function () { self.addElement(); self.enabled = true; self.options.dir = self.options.tempDir; self.autoPlay(); }); }, dir: function () { var self = this; return (self.options.dir == 4 || self.options.dir == 3) ? "Next" : "Prev"; }, getPos: function () { var self = this, size = self.getElemSize() * self.options.step; switch (self.options.dir) { case 1: return { "margin-top": (self.pos - size) }; break; case 2: return { "margin-left": (self.pos + size) }; break; case 3: return { "margin-top": (self.pos + size) }; break; case 4: return { "margin-left": (self.pos - size) }; break; } } }); augment(slider, direction); sr = new slider({ target: "#ImportantRecruitmentPosition", dir: 1, timeout: 3000 }); sr2 = new slider({ target: "#GraduateRecruitmentPosition", dir: 1, timeout: 3000 }); })();