美文网首页
js实现向上滚动效果

js实现向上滚动效果

作者: 李奕锦liyijin | 来源:发表于2018-10-17 15:07 被阅读0次

目前公司需要实现学员就业信息向上滚动的修改
把代码送上,欢迎提供建议:

// 向上滚动效果
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
addEventSimple(window,'load',initScrolling);
var scrollingBox;
var scrollingInterval;
var reachedBottom=false;
var bottom;
function initScrolling(){
scrollingBox = document.getElementById('toutiao');
scrollingBox.style.overflow = "hidden";
scrollingInterval = setInterval("scrolling()",100);
scrollingBox.onmouseover = over;
scrollingBox.onmouseout = out;
}
function scrolling(){
var origin = scrollingBox.scrollTop++;
if(origin == scrollingBox.scrollTop){
if(!reachedBottom){
scrollingBox.innerHTML+=scrollingBox.innerHTML;
reachedBottom=true;
bottom=origin;
}else{
scrollingBox.scrollTop=bottom;
}
}
}
function over(){
clearInterval(scrollingInterval);
}
function out(){
scrollingInterval = setInterval("scrolling()",50);
}

例子:
https://output.jsbin.com/xejubehala

$(document).ready(function () {
startmarquee('toutiao', 1, 2000, 3000);
});

function startmarquee(elementID, n, speed, delay) {
var t = null;
var box = '#' + elementID;
var h = (box).find('li').height(); console.log(h);(box).hover(function () {
clearInterval(t);
}, function () {
t = setInterval(start, delay);
}).trigger('mouseout');

function start() {
(box).children('ul:first').animate({marginTop: '-=' + h}, speed, function () {(this).css({marginTop: '0'}).find('li').slice(0, n).appendTo(this);
})
}
}

function scrollTop(time, name1, name2, name3) {
var _speed = time;
var _slide = (name1); var _slide1 =(name2);
var _slide2 = $(name3);
_slide2.html(_slide1.html());

function Marquee() {
if (_slide.scrollTop() >= _slide1.height()) {
_slide.scrollTop(0);
} else {
_slide.scrollTop(_slide.scrollTop() + 1);
}
}

var sliding = null;
sliding = setInterval(Marquee, _speed);
_slide.hover(function () {
clearInterval(sliding);
}, function () {
sliding = setInterval(Marquee, _speed);
});
}

function tabChange(tabHead, tabBody, on, speed) {
var tabHead = (tabHead).children(); var tabBody =(tabBody).children();
var timer = null;
var index = 0;
var len = tabHead.length;
timer = setInterval(function () {
index++;
if (index >= len) {
index = 0;
}
tabHead.eq(index).addClass(on).siblings().removeClass(on);
tabBody.eq(index).addClass(on).siblings().removeClass(on);
}, speed);
tabHead.mouseover(function () {
clearInterval(timer);
(this).addClass(on).siblings().removeClass(on); tabBody.eq((this).index()).addClass(on).siblings().removeClass(on);
});
tabHead.parent().parent().hover(function () {
clearInterval(timer);
}, function () {
timer = setInterval(function () {
index++;
if (index >= len) {
index = 0;
}
tabHead.eq(index).addClass(on).siblings().removeClass(on);
tabBody.eq(index).addClass(on).siblings().removeClass(on);
}, speed);
});
}

效果:


image.png

相关文章

网友评论

      本文标题:js实现向上滚动效果

      本文链接:https://www.haomeiwen.com/subject/dghrzftx.html