自己把code粘贴下来,运行效果跟网站的效果不一?

来源:2-3 页面切换部分的代码封装

刘颜

2016-12-30 13:44

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 <title>七夕言情</title>
 <link rel="stylesheet" type="text/css" href="style/main.css">
 <link rel="stylesheet" type="text/css" href="style/reset.css">
 <script type="text/javascript" src="js/Swipe.js"></script>
 <script src="http://img.mukewang.com/down/55ac9a860001a6c500000000.js"></script>
</head>
<body>
 <div id="content">
  <ul class="content-wrap">
   <!--第一幅画面-->
   <li>页面1</li>
   <!--第二幅画面-->
   <li>页面2</li>
   <!--第三幅画面-->
   <li>页面3</li>
  </ul>
  <div class="button">
   <button>点击切换画面</button>
  </div>
 </div>

 <script type="text/javascript">
  var swipe=Swipe($("#content"));

  $('button').click(function(){
   //调用接口
   swipe.scrollTo($("#content").width()*2, 5000);
  });
 </script>
</body>
</html>



<!--main.css-->

/*body*/
#content{
 width: 100%;
 height: 100%;
 overflow: hidden;
 position: absolute;
}
.content-wrap{
 position: relative;
}
.content-wrap>li{
 background:#cae1ff;
 color: red;
 float: left;
 overflow: hidden;
 position: relative;
}
li:nth-child(2){
 background: #9bcd9b;
}
li:nth-child(3){
 background: yellow;
}
.button{
 position: absolute;
 bottom: 0;
}
button{
 width: 100px;
 height: 50px;
}

<!--Swipe.js-->

///////////
//页面滑动///
/////////
/**
* [Swipe description]
* @param {[type]} container [页面容器节点]
* @param {[type]} options   [参数]
*/
function Swipe(container){
    // 获取第一个子节点
    var element = container.find(":first");

    //滑动对象
    var swipe={};

    // li页面数量
    var slides = element.find("li");

    // 获取容器尺寸
    var width = container.width();
    var height = container.height();

    // 设置li页面总宽度
    element.css({
        width  : (slides.length * width) + 'px',
        height : height + 'px'
    });

    // 设置每一个页面li的宽度
    $.each(slides, function(index) {
        var slide = slides.eq(index); //获取到每一个li元素   
        //
        slide.css({
            width: width+'px',
            height: height+ 'px'
        });
    });

    //监控完成与移动
    swipe.scrollTo=function(x,speed){
        //执行动画移动
        element.css({
            'transition-timing-function' : 'linear';
            'transition-duration'        : speed + 'ms';
            'transform'                  : 'translate3d(-'+x+'px,0px,0px)'
        });
        return this;
    };
    return swipe;
}

写回答 关注

3回答

  • Arya1
    2017-05-12 11:02:39

    没有把swipe的js文件引入

  • 非典型材料IT男
    2017-05-03 22:22:08
    https://github.com/MrZhangFengfeng/anAnimation

    加入了一些自己的小修改。后期会进一步优化以及加上更多效果。 

    欢迎star  欢迎fork


  • 慕婉清9494727
    2016-12-30 17:53:13

    你看看引用文件的路径对不对

H5+JS+CSS3实现七夕言情

为七夕节准备的H5+JS+CSS3特效案例,由浅入深案例拆分讲解

211523 学习 · 540 问题

查看课程

相似问题