一、优点：div可以load；缺点：滚动的时候有点娘，磨磨唧唧，不够干脆爽快
html
<div id="my_msg" class="my-msg bg-white clearfix none" style="display: block;">
<div class="icon"><i class="envelope"></i><p>我的消息</p><i class="red-dot"></i></div>
<div class="msg" id="myMsgContent">
<ul>
<li>
<a href="javascript:setRead(0,'http://person.tgxrc.com:88/apply/list')">
【投递反馈】您投递的“.net软件开发工程师55”等6个职位企业已查看简历。
</a>
</li><li>
<a href="javascript:setRead(5,'http://person.tgxrc.com:88/message/list')">
【人事来信】中国广西人才市场/广西人才网给你发送了一封人事来信，点击查看
</a>
</li><li>
<a href="javascript:setRead(6,'http://person.tgxrc.com:88/resume/list')">
您的竞争力较低，完善简历可以提升竞争力，赶快去完善简历吧！
</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></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=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></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:; left:; }
#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 () {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
});
})();