投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 选项卡滑动门 / jQuery模拟手机滚屏交互图片滚动代码
jQuery模拟手机滚屏交互图片滚动代码
标签:

插件介绍

    这是一款jQuery模拟手机滚屏,选项标签切换上下图片滚动交互式代码。适用于手机产品介绍展示页面代码。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-24
    阅读:

jQuery模拟手机滚屏交互图片滚动代码

简要教程

这是一款jQuery模拟手机滚屏,选项标签切换上下图片滚动交互式代码。适用于手机产品介绍展示页面代码。

使用方法

在页面引入以下jquery.min.js文件

<script src="js/jquery.min.js" type="text/javascript"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $(".xcx_dowhat_list ul li").hover(function () {
            $(".xcx_dowhat_list ul li").removeClass("current");
            $i = $(this).index();
            $(this).addClass("current");
            top1 = -$i * 364;
            $(".xcx_phone_main ul").stop(true, false).animate({"top": top1});
        });
    });
</script>

CSS样式

<link rel="stylesheet" type="text/css" href="css/style.css" />