点击显示下一个图片

PROMULGATOR

??爱吃胡萝卜的大灰狼

山东省济南市

← CSS3 SVG点击爱心散开动画特效

→ canvas写字板

相关代码

轮播图，幻灯片，焦点图

js淘宝幻灯片

仿京东轮播图

幻灯片倒计时广告

H5 Switch全屏垂直滚动

css网站背景渐变切换效果

Html

Css

Js

* {
	margin:0;
	padding:0;
}
body,html {
	height:100%;
	width:100%;
	overflow:hidden;
}
#main {
	}.list {
	margin:20px auto;
	width:1000px;
	height:600px;
	border:1px solid;
	text-align:center;
}
ul {
	list-style:none;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
}
li {
	height:600px;
	width:250px;
	background:salmon;
	margin-left:20px;
}
.huadong {
	animation:huadong 1s,100ms;
}
@keyframes huadong {
	from {
	transform:translateY(-100%) scale(0);
}
to {
	transform:translateY(0%) scale(1);
}
}#canvas1,h2 {
	margin-top:100%;
}
button {
	margin-left:50%;
}

var Progress = function() {
    var progress = {
        textheight: null,
        renderOne: function(id, length, r, percent) {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            canvas.width = length;
            canvas.height = length;
            var i = 0;
            progress.render(context, length, r, percent, percent);
            /*var interval = setInterval(function() {
            	i++;
            	progress.render(context, length, r, i, percent);
            	if(i >= percent) {
            		clearInterval(interval)
            	}
            },50)*/
        },
        render: function(context, length, r, i, percent) {
            context.clearRect(0, 0, length, length);
            context.beginPath();
            var gradient = context.createLinearGradient(length, 0, 0, 0);
            gradient.addColorStop("0", "#76EEC6");
            gradient.addColorStop("1.0", "#63B8FF");
            context.strokeStyle = gradient;
            context.lineWidth = r;
            context.arc(length / 2, length / 2, length / 2 - r, -0.5 * Math.PI, -0.5 * Math.PI + i * 0.02 * Math.PI, false);
            context.stroke();
            context.closePath();
            context.beginPath();
            context.strokeStyle = "#8d8d8d";
            context.lineWidth = 2;
            context.fillStyle = "#ffffff";
            context.arc(length / 2, r, 0.6 * r, 0, 2 * Math.PI, false);
            context.stroke();
            context.fill();
            context.closePath();
            context.beginPath();
            var radian = percent / 100 * 2 * Math.PI - 0.5 * Math.PI;
            var x = Math.cos(radian) * (length / 2 - r) + length / 2;
            var y = Math.sin(radian) * (length / 2 - r) + length / 2;
            context.arc(x, y, 0.6 * r, 0, 2 * Math.PI, false);
            context.stroke();
            context.fill();
            context.closePath();
            context.beginPath();
            context.lineWidth = 1;
            context.strokeStyle = "#54DDAF";
            context.fillStyle = "#54DDAF";
            context.arc(length / 2, length / 2, length / 2 - 2 * r, 0, 2 * Math.PI);
            context.fill();
            context.closePath();
            context.beginPath();
            context.font = "bold " + (length / 2 - 2.5 * r) / 2 + "px";
            context.fillStyle = "#ffffff";
            var text = percent + "%";
            textwidth = context.measureText(text).width;
            if (this.textheight == null) {
                var div = document.createElement("div");
                document.body.appendChild(div);
                div.innerHTML = text;
                div.style.fontSize = ((length / 2 - 2.5 * r) / 2) + "px";
                this.textheight = div.offsetHeight;
                div.parentNode.removeChild(div)
            }
            textheight = this.textheight;
            context.fillText(text, (length - textwidth) / 2, length / 2 + textheight / 4);
            context.fill();
            context.closePath()
        }
    };
    return progress
};
$(function() {

$('ul li').show(1000)
    setTimeout(function() {
        yuan()
    }, 1100)

var i = 0
    var falg = false
    $('button').click(function() {
        if (falg) {
            $('ul').append('<li class="huadong"><canvas id="canvas1"></canvas>')
            var leng = $('li').length
            setTimeout(function() {
                yuan()
            }, 1100)
            if (leng > 3) {
                i = 1
                $('ul li:nth-child(' + i + ')').hide(1000)
                setTimeout(function() {
                    $('ul li:nth-child(' + i + ')').remove()
                }, 1100)
            }
        }
    })

function yuan() {
        var j = 0;
        var interval = setInterval(function() {
            j++;
            new Progress().renderOne('canvas1', 100, 5, j);
            falg = false
            if (j >= 100) {
                clearInterval(interval)
                $('#canvas1').parent().append('<h2>完成')
                $('#canvas1').remove()
                falg = true
            }
        }, 10)
    }

})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

立即下载

点击显示下一个图片



代码描述：点击显示下一个图片加载

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>点击显示下一个图片-jq22.com</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号