回到顶部（原创）

Html

Css

#box {
	margin:0 auto;
	width:70%;
	height:3000px;
	background-color:rgba(247,247,247,1.00);
}
.top {
	overflow:hidden;
	width:100px;
	height:100px;
	left:84.8%;
	top:45%;
	position:relative;
}
.top_img {
	position:relative;
	bottom:0px;
}
h1 {
	text-align:center;
	line-height:800px
}

var m_top = 300;
var m_scrolltop = 0;
var speed = 0.5;
$(".top").stop(true, false).animate({
    top: '100px'
}, "100"); //改变css bottom

$(document).scroll(function() {
    var stop = parseInt($(document).scrollTop());
    $(".top").stop(true, false).animate({
        top: stop + 100 + 'px'
    }, "100"); //改变css bottom
})
var bottom = 0;
var t_mover;
var t_out;
$(".top").mouseover(function() {
    clearInterval(t_out);
    m_over();
});
$(".top").mouseout(function() {
    clearInterval(t_mover);
    m_out();
});

function m_over() {
    t_mover = setInterval(function() {
        bottom = bottom + 100; //每次加100 是图片的高度
        if (bottom > 1000) //循环400-1000的高度。眨眼睛
            bottom = 400;
        $(".top_img").css('bottom', bottom + 'px'); //改变css bottom
    }, 100); //使用字符串执行方法 
    return bottom;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

回到顶部（原创）

代码描述：可爱的回到顶部插件

页面的导航的下拉滑动菜单，一个简单的不能再简单的例子，结合css3动画完成

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

895268679

相关代码

1

2

3

4

5

6

回到顶部（原创）

最新