基于jQuery实现滚动切换效果

前端之家收集整理的这篇文章主要介绍了基于jQuery实现滚动切换效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

仿锋利的Jquery案例做的一个滚动切换效果,供大家参考,具体内容如下

效果如下图:

前台HTML代码如下:

滚动图
热播电视剧
  • RollControl.css代码如下:

    view_menu {

    width: 600px;
    height: 30px;
    line-height: 30px;
    cursor: default;
    }

    view_menu_title {

    float: left;
    font-family: 'Microsoft YaHei';
    width: 150px;
    text-align: center;
    }

    view_menu_trends {

    float: left;
    line-height: 30px;
    color: #99CC99;
    font-size: 10px;
    }

    .currentTrends {
    color: #009933;
    }

    view_menu_trends ul {

    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    view_menu_trends ul li {

    text-align: center;
    float: left;
    width: 15px;
    }

    view_menu_control {

    float: left;
    width: 100px;
    height: 30px;
    text-align: center;
    }

    view_menu_control img {

    width: 25px;
    height: 25px;
    line-height: 30px;
    cursor: pointer;
    }

    view_content {

    width: 548px;
    height: 178px;
    position: relative;
    overflow: hidden;
    border: 1px solid #CCCCCC;
    }

    view_content_fixed {

    position: absolute;
    width: 2500px;
    }

    view_content_fixed img {

    cursor: pointer;
    }

    view_content ul {

    margin: 0px;
    position: absolute;
    padding: 0px;
    }

    view_content ul li {

    margin: 0px;
    padding: 0px;
    float: left;
    padding: 8px;
    list-style: none;
    display: inline;
    }

    .view_content_fixed下的SPAN标签是为了加标题

    效果图如下:

    还有两个地方没有细化,第一个就是

    这个动态点点击的时候也可以切换页面,第二个

    左右切换按钮,可以添加按压效果,点击的时候取深色图片

    好了,大体的效果就这样,细节自己去玩吧,希望自己能坚持写下去,从小案例到大案例,好好学习!

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的jQuery相关文章