jQuery 여러개의 박스 겹치지 않게 만들기 > javascript
javascript

jQuery 여러개의 박스 겹치지 않게 만들기

조회 30회 댓글 0건

id 값을 다르게 하여 만드는 샘플 입니다.

jQuery 여러개의 박스 겹치지 않게 만들기 할때 글로벌 변수를 하나 생성하고 이 값을 만들때 마다 변경하는 방식을 사용하여 서로 다른 선택자가 되게 생성을 하는 방식 입니다.


<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>여러개 만들기</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
</head>
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<body>
  <div id="test1" style="width: 555px; height: 400px; border: solid 1px #777">  </div>
</body>
</html>
<script>

var id_name_main  = 'test1';
var id_num        = 1;

function get_div_name( type, id_num ) {
  if ( type == 'img' ) return 'img_' + id_num;
  if ( type == 'img_border' ) return 'img_br_' + id_num;
}

function get_default_data( id_name )
{
  var id_img      = get_div_name( 'img', id_num );
  var id_img_b    = get_div_name( 'img_border', id_num );
  var img_url     = './test1.jpg';   // 이건 base64로 바로 표현 될 수 있다.

  var str         = '';
  str            += '<div id="' + id_img_b + '" style="position:absolute; border: soild 1px #f00; width: 111px; height: 111px;">';
  str            += '    <img id="' + id_img + '" src="' + img_url + '" width=111; height=111; style="position:absolute;left:0;top:0;" />';
  str            += '</div>';

  return str;
}

function show_default_data()
{
  id_num          += 1;
  var img_layer    = get_default_data( id_num );
  $( '#' + id_name_main ).append(img_layer);

  var id_img      = get_div_name( 'img', id_num );
  var id_img_b    = get_div_name( 'img_border', id_num );

  // 대략 중앙에 위치 시키기
  var parent_width    = $('#' + id_name_main).outerWidth();
  var parent_height   = $('#' + id_name_main).outerHeight();
  var width      = $('#' + id_img).outerWidth();
  var height     = $('#' + id_img).outerHeight();
  $('#' + id_img_b ).offset({left: parent_width/2  - width/2 - 20 + id_num * 10 } );
  $('#' + id_img_b ).offset({top:  parent_height/2 - height/2 - 20 + id_num * 10 } );
}

$(document).ready(function() {
  show_default_data();
  show_default_data();
  show_default_data();
});

</script>
 




  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 27건 1 페이지
  • profile_image 배열 json 중첩에 대해서 잘 나와 있는곳다양한 형태로 예제가 잘 되어 있습니다.https://rateye.tistory.com/424const data = {    code: 42,    items: [{        id: 1,        name: 'foo'    }, {        id: 2,        name: 'bar'    }]}; function toArray(obj) {    const result = [];    fo…
  • profile_image 누구든 그렇겠지만 본인이 주 언어로 사용하던 언어대로 프로그램을 다른언어에서도 그대로 사용하고 싶은 그런것이 있습니다. 이 부분은 그래서 찾은 것인데요. PHP에서는 연관배열이라고 합니다. 문자가 인덱스로 들어가는 것입니다. 딕셔너리라고 하기도 하고 이런 비슷한 형태를 사용하려면 json 으로 해도 되는 경우가 있습니다.* 배열 문자 인덱스 - 자바스크립트 2차원 배열 사용 하는 방법.물론 아래는 PHP의 배열과는 많이 다르지만 기존에 하던 논…
  • profile_image php에서 filesize 함수에 해당 하는것입니다.아래 처럼 여러가지 형태로 사용이 가능 하다.if ( fs.existsSync(file) ) {    var aStats = fs.statSync(file)    var filesize  = aStats['size'];    var filesize  = aStats.size;    console.log(aStats);    console.log('filesize: ' + fs.statSync(…
  • profile_image php에서 exit;에 해당하는 기능입니다.process.exit()실패코드로 종료하고 싶을때는 process.exit(1);너무 간단하지만. 몰라서 찾음.그리고 한동안 안쓰다가 또 몰라서 찾음.
  • profile_image 파일이 있는지 체크 하는 방법  var is_file  = 0;  fs.stat(data_file, (err,stats) => {    if ( stats.isFile() ){      is_file = 1;      console.log('stats.isFile(): ' + stats.isFile());    }  });  console.log('is_file:' + is_file + "\n");// 함수로 만들어 사용function i…
  • profile_image ◆ 파일을 읽는 방법 입니다.동기적으로 파일 읽기  const data = fs.readFileSync("package.json", "utf-8");  console.log(data);이렇게 캐릭터셋 지정하기 않고 읽어도 된다.const dataBytes = fs.readFileSync(file);◆ 아래는 파일 쓰는(저장) 하는 방법import fs from "fs";......  var file = './result.txt';  fs.wri…
  • profile_image import { mydql, db } from 'mysql';^^^^^^SyntaxError: Cannot use import statement outside a module아래처럼 추가해 주면 된다. 패키지 json 파일을 열어서 아래 처럼 추가 해준 후 저장하면 됩니다.# vim package.json {  "type": "module",  "dependencies": {    "mysql": "^2.11.1"  }}