欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

求段jquery手动向左向右滑动实际的代码

更新时间: 2014-01-05 01:50:47 责任编辑: Author_N1

 

求段Jquery手动向左向右滑动现实的代码


实现如上图功能,最好不用第三方插件,有的请指导,谢谢!
--参考方法--
<!DOCTYPE>
<html>
<head>
        <title></title>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <style>
        label{
            width: 50px;
            height: 25px;
            float: left;
        }
    </style>
    </head>
    <body>
        <span style="float: left" onclick="if(i>0)i--;jump()"><<</span>
        <div id="content" style="float: left;overflow: hidden;width: 400px;height: 25px">
            <div id="checks" style="width: 550px;margin-left: 0px">
                <label><input type="checkbox" />1</label>
                <label><input type="checkbox" />2</label>
                <label><input type="checkbox" />3</label>
                <label><input type="checkbox" />4</label>
                <label><input type="checkbox" />5</label>
                <label><input type="checkbox" />6</label>
                <label><input type="checkbox" />7</label>
                <label><input type="checkbox" />8</label>
                <label><input type="checkbox" />9</label>
                <label><input type="checkbox" />10</label>
                <label><input type="checkbox" />11</label>
            </div>
        </div>
        <span style="float: left" onclick="if(i<max)i++;jump()">>></span>
    </body>

<script>
    var i = 0;
        max = 3;
    function jump(){
        $("#checks").animate({
            marginLeft:-50*i+"px"
        },500);
    }
</script>
    </html>

拿去改改吧
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:50:47
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1929/
本文WWW.DOC100.NET DOC100.NET版权所有。