프로그래밍/Javascript
이미지 썸네일
즐겁게 하하하
2022. 1. 14. 03:13
728x90
이미지 썸네일1
<style>
.preview {
position: fixed;
left: 42%;
right: 0;
top: 9%;
bottom: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
display: none;
width: 850px;
height: 500px;
}
.preview a {
display: flex;
align-items: center;
position: relative;
}
.preview a::before {
position: absolute;
content: '⨉';
display: inline-block;
background: tomato;
top: -16px;
right: -16px;
width:32px;
height: 32px;
border-radius: 50%;
color: white;
text-align: center;
font-size: 16px;
line-height: 32px;
}
.preview img {
width: 850px;
height: 500px;
}
.preview:target {
display: flex;
}
.preview-trigger {
text-decoration: none;
font-family: monospace;
border: 2px solid;
padding: 10px;
margin-top: 10px;
display: inline-block;
transition: 0.16s;
}
.preview-trigger:active {
border-radius: 50%;
animation: effect 0.16s linear infinite;
}
@keyframes effect {
100% {
transform: rotateZ(360deg);
}
}
</style>
<!--이미지 미리보기.-->
<div id="flower" class="preview" style="z-index: 4000">
<a href="#"><img id="mapimg" src="" alt=""/></a>
</div>
<!--ajax 선택박스.-->
tag += "<td><select class='maps_bubble' name='maps[]' id='maps_" + flag + "' onchange='mapsChange("+ flag +")' onmouseover='overEffect("+ flag +")' onmouseout='outEffect("+ flag +")' >"+ $("#account_maps").val() +"</select><input type='hidden' name='select_maps[]' id='select_maps_" + flag + "' value='' /></td>";
//선택박스 마우스over
function overEffect( flag ){
var mapsSelect = $("#maps_"+ flag +" option:selected").val();
if(mapsSelect != 0){
var img = $("#select_maps_" + flag).val();
$("#mapimg").attr("src","/attach/" + img );
$("#maps_" + flag).css("color", "#FF4500");
$("#flower").show();
}
}
//선택박스 mouseout
function outEffect( flag ){
$("#maps_" + flag).css("color", "black");
$("#flower").hide();
}
//선택박스값 변경
function mapsChange( flag ){
var mapsSelect = $("#maps_"+ flag +" option:selected").val();
if(mapsSelect != 0){
var data = {"mode" : "getMapsSearch" , "mapsSelect" : mapsSelect };
$.ajax({
type : "post",
data : data,
async: false,
url : "ajax.php",
success: function(str){
$("#select_maps_" + flag).val(str);
}
});
}
}이미지 썸네일2 ( 업로드 전 이미지 선택시 미리보기 )
<th style="background-color:#f1f1f1; vertical-align:middle;" rowspan='7'> 이미지</th>
<td rowspan='7' style="width:40%">
<div style="height:400px;width:400px;border:1px solid #ddd;">
<div>
<img src="#" id="v_blah" style=" height:400px;width:400px;display:none;"/>
</div>
</div>
<input type="file" name="img" id="img"/>
</td>
// 이미지
$("#img").change(function(){
$("#v_blah").css("display","block");
readURL(this,"v_blah");
});
//이미지 미리보기
function readURL(input,id) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#'+id).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}■ 버튼 대면 메뉴 리스트 형식으로 보이고 빠져 나오면 메뉴 없애기
//css
<!----------------- //폼 레이어 ------------------->
<style>
.imgSelect:hover {
background-color:#f7f7f7;
}
.popupLayer {
position: absolute;
display: none;
background-color: #ffffff;
border: solid 1px #d0d0d0;
width: 150px;
height: 148px;
}
.di:hover {
background-color:#f2f2f2;
}
.di{
float:left;
width:100%;
font-size:14px;
text-align:center;
height:35px;
line-height:35px;
cursor:pointer;
}
</style>
//html
<!-- //클릭 이미지 -->
<!-- 폼 레이어 -->
<div class="popupLayer">
<div class="popupButton" >
</div>
</div>
<input type="hidden" name="divLeft" id="divLeft" value="" placeholder="클릭한 x 좌표"/>
<input type="hidden" name="divTop" id="divTop" value="" placeholder="클릭한 Y 좌표"/>
<input type="hidden" name="pageX" id="pageX" value="" placeholder="클릭후 움직이는 마우스 x좌표"/>
<input type="hidden" name="pageY" id="pageY" value="" placeholder="클릭후 움직이는 마우스 Y좌표"/>
<!----------------- //폼 레이어 ------------------->
//버튼
<td>
<input type='button' class='btn btn-xs btn-success regist' id='moldBtn' value='관리' onmouseleave=\"clClose()\" onclick=\"cl(" + json[i].uid + ");\" />
</td>
//마우스가 버튼을 벗어나면
function clClose(){
$(document).mousemove(function(e){
//창닫히는 좌표의 시작과 끝은 약간 여유를 둔다.
var divDownSite = Number( $("#divTop").val() )+230; //Y좌표 화면아래로 이동시 체크하는 최대값..
var divTopSite = Number( $("#divTop").val() )-40 //Y좌표 체크 시작지점..
var divLeftSite = Number( $("#divLeft").val() )-50; // X좌표 체크 시작지점 // X축 끝부분 누르면 알아서 위치값 잡아줌..
var divRightSite = Number( $("#divLeft").val() )+150; //Y좌표 체크 시작지점..
if( $("#divTop").val() != "" && $("#divLeft").val() != "" ){ //테이블 안에 클릭한 지점이 있으면.
if( (e.pageY > divTopSite && e.pageY < divDownSite) && ( e.pageX > divLeftSite && e.pageX < divRightSite ) ){ // 마우스 Y 좌표 체크.
$("#pageX").val(e.pageX); //x 위치 확인하기
$("#pageY").val(e.pageY); // Y 위치 확인하기.
}else{
$(".popupLayer").css("display","none");
}
}
});
}
//마우스가 버튼위로 올라가면
function cl( param ){
var tag = "";
if( classify != "1"){
tag +="<div class='di' onclick='postItem("+ param +")'>메뉴1</div>";
tag +="<div class='di' onclick='registProcess("+ param +")'>메뉴2</div>";
tag +="<div class='di' onclick=\"registSelfInspection("+ param + ")\">메뉴3</div>";
}else{
tag +="<div class='di' onclick='postItem("+ param +")'>메뉴1</div>";
$(".popupLayer").css("height","39");
}
$(".popupButton").html(tag);
var sWidth = window.innerWidth;
var sHeight = window.innerHeight;
var oWidth = $('.popupLayer').width();
var oHeight = $('.popupLayer').height();
// 레이어가 나타날 위치를 셋팅한다.
var divLeft = event.clientX + 10;
var divTop = event.clientY;
// 레이어가 화면 크기를 벗어나면 위치를 바꾸어 배치한다.
if( divLeft + oWidth > sWidth ) divLeft -= oWidth;
if( divTop + oHeight > sHeight ) divTop -= oHeight;
// 레이어 위치를 바꾸었더니 상단기준점(0,0) 밖으로 벗어난다면 상단기준점(0,0)에 배치하자.
if( divLeft < 0 ) divLeft = 0;
if( divTop < 0 ) divTop = 0;
//레이어 위치 저장
$("#divLeft").val(divLeft); //클릭한 x 좌표
$("#divTop").val(divTop); // 클릭한 Y 좌표
$('.popupLayer').css({
"top": divTop,
"left": divLeft,
"position": "absolute"
}).show();
}
728x90