Атрибут в фоновом изображении URL

Question

Первый взгляд на мой код:

IMAGE:

<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>

ФОН URL:

<div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>

В ИЗОБРАЖЕНИИ я могу использовать атрибут src в jquery

attr("src");

Но как мне сделать это в URL-адресе фонового изображения? Я сделал этот код и добавил атрибут, но он не работает, есть идеи?

<div class="small" style="background-image: url(attr(data-image-src='http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>

attr("data-image-src");

Теперь причина, по которой я хочу, чтобы это произошло, заключается в том, что если вы посмотрите в этот CodePen:

codepen

Пример кода является изображением, и они использовали attr (src) в коде jquery, но я хочу, чтобы это был URL фонового изображения, а не изображение.

Answer 1

Сначала вы должны установить '' на URL

 <div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>

Чтобы получить URL фонового изображения:

var url=$('.small').attr('src')
$('.large').css('background-image',"url('"+ url + "')");   

.large{
    background-repeat: no-repeat;
    width: 175px;
    height: 175px;
    background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/>
<div class="large"></div>

Answer 2

Чтобы получить background-image в jQuery, вы можете использовать:

var urlFull = $('.small').css('background-image');
//You will get the full value here
url = urlFull.split('"');
//But for using it properly you have to split it and get the url with `"` which will be holding the url.

console.log(url[1]); //You will get URL here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')"></div>

Теперь к вашей реальной проблеме:

$(document).ready(function() {

  var native_width = 0;
  var native_height = 0;
  var urlFull = $('.small').css('background-image');
  //You will get the full value here
  url = urlFull.split('"');
  //But for using it properly you have to split it and get the url with `"` which will be holding the url.
  //console.log(urlFull);

  $(".large").css("background-image", urlFull);

  //Now the mousemove function
  $(".magnify").mousemove(function(e) {
    //When the user hovers on the image, the script will first calculate
    //the native dimensions if they don't exist. Only after the native dimensions
    //are available, the script will show the zoomed version.
    if (!native_width && !native_height) {
      //This will create a new image object with the same image as that in .small
      //We cannot directly get the dimensions from .small because of the 
      //width specified to 200px in the html. To get the actual dimensions we have
      //created this image object.
      var image_object = new Image();
      image_object.src = url[1];

      //This code is wrapped in the .load function which is important.
      //width and height of the object would return 0 if accessed before 
      //the image gets loaded.
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      //x/y coordinates of the mouse
      //This is the position of .magnify with respect to the document.
      var magnify_offset = $(this).offset();
      //We will deduct the positions of .magnify from the mouse positions with
      //respect to the document to get the mouse positions with respect to the 
      //container(.magnify)
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      //Finally the code to fade out the glass if the mouse is outside the container
      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".large").fadeIn(100);
      } else {
        $(".large").fadeOut(100);
      }
      if ($(".large").is(":visible")) {
        //The background position of .large will be changed according to the position
        //of the mouse over the .small image. So we will get the ratio of the pixel
        //under the mouse pointer with respect to the image and use that to position the 
        //large image inside the magnifying glass
        var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";

        //Time to move the magnifying glass with the mouse
        var px = mx - $(".large").width() / 2;
        var py = my - $(".large").height() / 2;
        //Now the glass moves with the mouse
        //The logic is to deduct half of the glass's width and height from the 
        //mouse coordinates to place it with its center at the mouse coordinates

        //If you hover on the image now, you should see the magnifying glass in action
        $(".large").css({
          left: px,
          top: py,
          backgroundPosition: bgp
        });
      }
    }
  })
})

/*Some CSS*/

* {
  margin: 0;
  padding: 0;
  text-align: center
}

.magnify {
  width: 200px;
  margin: 50px auto;
  position: relative;
  cursor: none;
  display: inline-block;
}


/*Lets create the magnifying glass*/

.large {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
  /*Multiple box shadows to achieve the glass effect*/
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  /*hide the glass by default*/
  display: none;
  background-repeat: no-repeat;
}


/*To solve overlap bug at the edges during magnification*/

.small {
  display: block;
  width: 200px;
  height: 400px;
  float: left;
  background-size: contain;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lets make a simple image magnifier -->
<div class="magnify">

  <!-- This is the magnifying glass which will contain the original/large version -->
  <div class="large"></div>

  <!-- This is the small image -->
  <div class="small" style="background-image:url('http://thecodeplayer.com/uploads/media/iphone.jpg')" width="200" />
</div>
</div>

Codepen если хотите.

Надеюсь, это для вас.

Answer 3

Я думаю, вы пропустили одиночную кавычку в вашем атрибуте.

Изменение

<div class="small" style="background-image: url(http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>

до

<div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')" ></div>

Надеюсь, это поможет.