jQuery实现手机端地球旋转特效代码

jQuery实现手机端地球旋转特效代码

使用jQuery实现,方法很简单欢迎使用。简单易用,运用背景的特性以及定时器完成整个过程,适合放在H5的app的开场部分,非常的大气

使用方法
需要用到的JS文件jquery.min.js和rem.js

1
2
<script src="js/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/rem.js"></script>

JS代码

1
2
3
4
5
6
7
8
9
10
11
$(function() {
    ab();

    function ab() {
        var k=0
        setInterval(function(){
            k++;
            $('div').css('background-position-x',"-"+k+"px")
        },40);
    }
})

HTML结构

1
<div style="width: 7rem; height: 7rem; margin: 0 auto; position: absolute; top: 25%; left: 50%; margin-left: -3.5rem; border-radius: 50%; overflow: hidden; background: url(images/aa.jpg); background-size: auto 100%; box-shadow: inset 0px 0px 170px 30px rgba(0,0,0,1);">
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论