jquery心电图跳动js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery心电图跳动js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery心电图跳动</title>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
</head>

<body>
    <div class="slide_Box_mt"></div>


    <style>
        body {
            text-align: center;
            background-color: #000;
        }

        .slide_Box_mt {
            margin: 0 auto;
            width: 523px;
            height: 425px;
        }

        p span {
            color: #fff;
            line-height: 150%;
            font-family: Verdana,"微软雅黑","宋体";
        }
    </style>
    <script>
        var parts = 100;										//切割数量
        var imgIndex = 0;										//当前图片

        $(function () {
            var op = {
                width_mt: 523,							//外框容器宽度.(与图片宽度一致)
                height_mt: 425,							//外框容器高度.(与图片高度一致)
                imgurl: 'images/6653149820121121163347025.jpg'				//默认图片.
            };
            var cut_w = op.width_mt / parts;				//小块宽度
            var cut_h = op.height_mt;					//小块高度
            var $this = $(".slide_Box_mt");


            //设置小div进行图片切割.
            for (var i = 0; i < parts; i++) {
                var div1 = '<div class="scut_mt" style=" \
						width:'+ cut_w + 'px; \
						height:'+ cut_h + 'px; \
						float:left;\
						display:inline;\
						background-image:url('+ op.imgurl + ');\
						background-repeat:no-repeat; \
						background-position:'+ (-i * cut_w) + 'px ' + 0 + 'px"\
					></div>';
                $this.append(div1);
            }
            $(".scut_mt").css({ opacity: 0 });

            Jump();
        });

        function Jump() {
            $(".scut_mt:eq(" + imgIndex + ")").animate({ opacity: 1 }, 50, function () {
                $(".scut_mt:eq(" + imgIndex + ")").animate({ opacity: 0.3 }, 50, function () {
                    if (imgIndex < parts - 1) {
                        imgIndex++;
                        Jump();
                    } else {
                        imgIndex = 0;
                        $(".scut_mt").css({ opacity: 0 });
                        Jump();
                    }
                });
            });
        }
    </script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)