Блог

Главная - Вопросы по программированию - Поворот изображения на случайную величину при наведении в угловом положении?

Поворот изображения на случайную величину при наведении в угловом положении?

#javascript #html #css #angular #typescript

Вопрос:

Я создаю фотогалерею и пытаюсь заставить изображения вращаться при наведении курсора, но у меня возникают проблемы с передачей значений из машинописного текста в CSS.

HTML

 <div class="back">
   <div class="row">
      <div class="column">
         <img src="https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=2100amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583585635793-0e1894c169bd?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=913amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583531172005-814191b8b6c0?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=975amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583426573939-97d09302d76a?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=968amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583532452513-a02186582ccd?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583445013765-46c20c4a6772?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;q=80" style="width:100%">
      </div>
      <div class="column">
         <img src="https://images.unsplash.com/photo-1583531172005-814191b8b6c0?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=975amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583426573939-97d09302d76a?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=968amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583532452513-a02186582ccd?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583445013765-46c20c4a6772?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=2100amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583585635793-0e1894c169bd?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=913amp;q=80" style="width:100%">
      </div>
      <div class="column">
         <img src="https://images.unsplash.com/photo-1583532452513-a02186582ccd?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583445013765-46c20c4a6772?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583531172005-814191b8b6c0?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=975amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583426573939-97d09302d76a?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=968amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=2100amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583585635793-0e1894c169bd?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=913amp;q=80" style="width:100%">
      </div>
      <div class="column">
         <img src="https://images.unsplash.com/photo-1583426573939-97d09302d76a?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=968amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1558981359-219d6364c9c8?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=2100amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583585635793-0e1894c169bd?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=913amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583532452513-a02186582ccd?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583445013765-46c20c4a6772?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=1950amp;q=80" style="width:100%">
         <img src="https://images.unsplash.com/photo-1583531172005-814191b8b6c0?ixlib=rb-1.2.1amp;ixid=eyJhcHBfaWQiOjEyMDd9amp;auto=formatamp;fit=cropamp;w=975amp;q=80" style="width:100%">
      </div>
   </div>
</div>

CSS

 .back {
  background-color: var(--grey1);
  padding-bottom: 28px;
}

* {
  box-sizing: border-box;
}



.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 14px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 14px;
}

.column img {
  margin-top: 28px;
  vertical-align: middle;
  width: 100%;

  background-color: white;
  padding: 10px;

  transition: all 500ms;

  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;

}

.column img:hover {
    box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
    transform: scale(1.025);

 }

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

Машинописный текст

 export class PhotosComponent implements OnInit {

  random = Math.random(); //Trying to pass this into CSS

  constructor() { }

  ngOnInit(): void {
  }

}

Я пытался использовать [ngStyle], чтобы изменить его в HTML, но, насколько я знаю, вращение не может быть изменено таким образом.

Ссылка на JSFiddle: https://jsfiddle.net/6okvLu7a/

Ответ №1:

Вы можете использовать

 //in .ts
rotate(){
   return {transform:'rotate(' Math.random()*360 'deg)',
           'transform-origin':'50% 50%'}
}
//in .html
<img src="https://picsum.photos/200/300" [ngStyle]="style" 
  (mouseout)="style=null" 
  (mouseover)="style=random()">

или

 random(){
  return Math.random()*360 'deg'
}

//and in .html
<img src="https://picsum.photos/200/300" [ngStyle]="{transform:'rotate(' rotation ')'}"
  (mouseout)="rotation=null" 
  (mouseover)="rotation=random()">

Если вы хотите изменить «поворот» изображения. Но на самом деле вам следует поместить свой код в *ngFor (или в два), чтобы сделать вещи более удобными-это не практика — и использовать массив «поворотов» или подобных

Ответ №2:

попробуйте этот код в typescript, чтобы связать его с классом css:

элемент const = document.getElementById(«myDiv»); элемент.classList.add(«MyClass»);

Комментарии:

1. Это не решает проблему того, как ввести случайное число в класс CSS

Ответ №3:

В принципе, код CSS статичен, поэтому вы не можете изменять значения в своем CSS во время выполнения, если только вы не обновите CSS на лету. Но если бы вы определили изображения в CSS и назначили им классы («class1», «class2» и т. Д.), Вы могли бы переключать их с помощью случайного числа, которое вычисляется для определенных вами классов. Сгенерируйте случайное число 0-10 и объедините его с «классом».

И вам нужно подключить его к событию наведения курсора мыши с помощью @HostListener, о котором я спрашиваю.

Метки: