前端开发者网页前端外包开发流程图|网页开发前端与后端接口|网页设计与前端开发 素材文件
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>网页开发前端占比：弹窗效果</title>
<script>
$(function () {
/**
* 代替alert弹窗提示方法
* @param width 弹窗div的宽
* @param alertcontent 弹窗内容
*/
function show_alert(width, alertcontent) {
var boarddiv = “<div id=’promptalert’ style=’width:200px;height: 30px;background-color: #fd4c5d;text-align: center;line-height: 30px;position: fixed;top:-30px;margin: 0 auto;z-index: 9999′><span class=’alert-content’ style=’color: #FFFFFF;font-size: 14px;’>添加成功！</span></div>”;
$(document.body).append(boarddiv); //生成显示的div
var window_width = ($(window).width()) / 2; //页面宽度的50%
var promptalert_width = ($(“#promptalert”).width()) / 2; //div宽度的50%
var position_left = window_width – promptalert_width; //position定位left的值，实现不管div多宽都水平居中
$(“#promptalert”).css({ “width”: width });
$(“#promptalert”).css({ “left”: position_left });
$(“#promptalert .alert-content”).html(alertcontent);
$(“#promptalert”).animate({
top: ’15px’
});
setTimeout(function () {
$(“#promptalert”).animate({
top: ‘-30px’
});
}, 2000);//2秒后执行该方法
}
$(“a”).click(function () {
show_alert(“300px”, “winter is coming ╮(￣▽￣)╭”);
});
})
</script>
</head>
<body>
<a style=”cursor: pointer”>点我点我(=・ω・=)</a>
</body>
</html>
前端开发比网页制作|网页前端开发技术|炫酷的前端开发网页作品
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册