index.html添加图片,index.html

图片管理器

*{

box-sizing: border-box;margin: 0;padding: 0;

}

ul,li{

list-style: none;

}

.up_warp{

width: 800px;height: 416px;box-shadow: 0 0 0 2px #0099CB;border-radius: 5px;

position: fixed;top: 10%;left: 0;right: 0;margin: auto;z-index: 99;overflow: hidden;

}

.up_title{

width: 100%;height: 45px;background-color: #f1f2f4;position: relative;

}

.up_title:after{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.up_title_l{

width: 140px;height: 100%;

text-align: center;line-height: 45px;font-size: 20px;color: #333;

float: left;

}

.up_title_r{

width: 17px;height: 17px;font-size: 12px;text-align: center;line-height: 15px;

background-color: #0099cb;color: #fff;

float: right;margin: 14px 14px 0 0;cursor: pointer;

}

.up_catgory{

width: 100%;padding: 22px 12px;

}

.up_catgory:after{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.up_catgory li{

width: 85px;height: 28px;margin-right: 15px;float: left;

font-size: 14px;line-height: 28px;text-align: center;cursor: pointer;

background-color: #f1f2f4;color: #666;border-radius: 2px;

}

.up_catgory .active{

background-color: #0099cb;color: #fff;

}

.up_sidle{

width: 100%;height: 230px;padding: 0 60px;position: relative;margin-bottom: 22px;

}

.up_list_l{

width: 60px;height: 100%;position: absolute;left: 0;top: 0;cursor: pointer;

line-height: 230px;text-align: center;font-size: 120px;color: #dddddd;

}

.up_list_l:hover{

opacity: 0.6;

}

.up_list_r{

width: 60px;height: 100%;position: absolute;right: 0;top: 0;cursor: pointer;

line-height: 230px;text-align: center;font-size: 120px;color: #dddddd;

}

.up_list_r:hover{

opacity: 0.6;

}

.up_list{

width: 100%;height: 100%;margin-right: -22px;

}

.up_list:after{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.up_list li{

float: left;width: 148px;height: 100px;margin:0 11px;margin-bottom: 22px;

text-align: center;line-height: 100px;position: relative;cursor: pointer;

background-color: #f2f2f2;

}

.up_list li span{

position: absolute;bottom: 0;left: 0;

width: 100%;height: 30px;background-color: rgba(0,0,0,0.3);

font-size:14px;line-height:30px;color:#fff;text-align:center;

}

.up_list li img{

width: 100%;min-height: 60%;max-height: 100%;

position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;

}

.up_sidle_up{

display: none;

width: 100%;height: 252px;position: relative;

}

.up_sidle_up:after{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

.up_sidle_up .up_img{

width: 130px;margin-left: 26px;margin-bottom: 26px;height: 100px;float: left;

font-size: 60px;text-align: center;line-height: 100px;position: relative;

background-color: #f2f2f2;cursor: pointer;

}

.up_img img{

width: 100%;min-height: 60%;max-height: 100%;

position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;

}

.up_img span{

position: absolute;bottom: 0;left: 0;

width: 100%;height: 30px;background-color: rgba(0,0,0,0.3);

font-size:14px;line-height:30px;color:#fff;text-align:center;

}

.up_sidle_up .up_add{

width: 130px;margin-left: 26px;margin-bottom: 26px;height: 100px;float: left;

font-size: 60px;text-align: center;position: relative;

border: 1px solid #f1f2f4;color: #bbb;line-height: 80px;

}

.up_add input{

display: block;width: 100%;height: 100%;opacity: 0;cursor: pointer;

position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;

}

.up_bottom{

width: 100%;height: 47px;background-color: #f1f2f4;

}

.up_btn{

width: 72px;height: 28px;line-height: 28px;text-align: center;font-size: 14px;

float: right;margin: 10px 10px 0 0;border-radius: 2px;

background-color: #0099CB;color: #fff;cursor: pointer;

}

图片管理器

x

• 选择图片
• 上传图片

• 

• 

• 

• 

• 

• 

• 

• 

‹

›

+

确定

$(function () {

$("body").on("click",".up_catgory li",function () {

$(".up_catgory li").removeClass("active");

$(this).addClass("active");

$(".up_sidle").toggle();

$(".up_sidle_up").toggle();

});

$(".up_list li").hover(function () {

$(this).append("删除")

},function () {

$(this).children("span").remove();

});

$(".up_img").hover(function () {

$(this).append("删除")

},function () {

$(this).children("span").remove();

});

$("body").on("click","#del_up",function () {

$(this).parent().remove();

});

$("body").on("click",".up_title_r",function () {

$(".up_warp").remove();

});

$("body").on("click",".up_btn",function () {

alert("选择结束");

})

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史