地下城与勇士的项目整理

weixin_30501857

于 2019-06-27 18:43:00 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LQK157/p/11098931.html

1.雪碧图的用hover指上改变位置

.div:hover{



background-position
:


-223px -33px;



-webkit-transform
:

rotate(10deg);

2.用了js的移入移出事件

3.用了轮播图的每2s播放一张图片

4。div的显示隐藏

5.hover指上变色变小手

6.雪碧图的点击跳转另一个位置

js代码如下：

    for (var i=0;i<job_name.length;i++) {
        job_name[i].index = i;
        job_name[i].onclick = function () {
            // console.log(this.index);
            for (var i=0;i<job_name.length;++i) {
                // console.log(aar[i]);
                aar[i].style.display = 'none';

                // console.log(-215-(i*30)  +"px -218px");

                tpweizhi[i].style.backgroundPosition= -215-(i*30)  +"px 0px";
            }
            aar[this.index].style.display = 'block';
            // console.log();
            // console.log("right "+ (-215 - (this.index * 30)) +"px top -218px");

            tpweizhi[this.index].style.backgroundPosition="left "+ (-215 - (this.index * 30)) +"px top -218px";
            // console.log(tpweizhi[this.index].style.backgroundPosition);

        }
    }