Форум

Stas1985 · #1 (**permalink**) 06.10.2017, 15:10

Вот мой код

<style>
.all-photo{  text-align: left;}
.all-photo a{font-size: 20px; cursor: pointer; line-height: 95px; color: #e0000f; text-decoration: none;}
.all-photo span{font-size: 15px; cursor: pointer; color: #e0000f; text-decoration: none;}
</style>
<div class="all-photo">
<a href="javascript:allphoto()">Еще&nbsp;<?php echo $count_images ;?>&nbsp;фото&nbsp;&nbsp;&nbsp;</a>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-chevron-up"></span>
</div>
<div id="info">

Тут скрипт вывода картинок .................

</div>
<script type="text/javascript">
// <![CDATA[
allphoto();
function allphoto() 
{ 
obj = document.getElementById("info"); 
if( obj.style.display == "none" ) 
{
	obj.style.display = "block"; 
	} else { 
	obj.style.display = "none"; 
	} 
	}
// ]]>
</script>

Помогите сделать так чтоб начало блока было полупрозрачным и была видна часть картинок.
вот как на примере
https://screenshots.firefox.com/Za5n.../www.sulpak.kz

рони · #2 (**permalink**) 06.10.2017, 16:38

Stas1985,
возможный вариант, может кто-то предложит другой ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  </head>

<body>
<style>
.all-photo{  text-align: left;  }
.all-photo a{font-size: 20px; cursor: pointer; line-height: 95px; color: #e0000f; text-decoration: none;}
.all-photo span{font-size: 15px; cursor: pointer; color: #e0000f; text-decoration: none;}
#info{
  position: relative;height: 100px; width: 200px; overflow: hidden; transition: all 1s;
}

#info:after{
      content: "";
      position:  absolute;
      background-image: linear-gradient(transparent 25%, rgba(255, 255, 255, 1) 100%);
      height: 100px; width: 200px;
      top:0;
      left: 0;
      transition:  1s;
    }
#info.open{
  height: 400px;
}
#info.open:after{
  transition: top 1.5s 1s;
  height: 400px;
  top : 400px;
}
</style>
<div class="all-photo">
<a href="javascript:allphoto()">Еще&nbsp;<?php echo $count_images ;?>&nbsp;фото&nbsp;&nbsp;&nbsp;</a>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-chevron-up"></span>
</div>


<div id="info">
<img src="https://javascript.ru/img/webstorm_200x200.png" alt="">
<img src="https://javascript.ru/img/webstorm_200x200.png" alt=""></div>
<script>
   function allphoto()
   {
     document.querySelector("#info").classList.toggle("open")
   }
</script>
</body>
</html>

Stas1985 · #3 (**permalink**) 07.10.2017, 06:09

Что то не понял как ширину настроить.
Пытаюсь настроить все летит.
_https://update.lik-astana.kz/bagetnaya-masterskaya/oformlenie-v-baget/oformlenie-kollektsionnykh-futbolok-detail.html_

рони · #4 (**permalink**) 07.10.2017, 09:36

Stas1985,
разобрались?

Stas1985 · #5 (**permalink**) 07.10.2017, 09:38

Да со стилями разобрался спасибо большое.
Подскажите еще на один вопрос. Необходимо чтоб при нажатии на сам блок он так же открылся, возможно ли такое.

рони · #6 (**permalink**) 07.10.2017, 10:01

Stas1985,

document.querySelector("#info").addEventListener('click', function() {
                 this.classList.add("open")
           });

Stas1985 · #7 (**permalink**) 07.10.2017, 10:10

Спасибо работает

function allphoto()
{ 
document.querySelector("#info").classList.toggle("open") 
}
document.querySelector("#info").addEventListener('click', function() 
{
this.classList.add("open")
});

а что то вроде cursor: pointer; можно? Чтоб при наведении на блок курсор менялся

рони · #8 (**permalink**) 07.10.2017, 10:13

Stas1985,

#info{
   cursor: pointer;
}

Stas1985 · #9 (**permalink**) 07.10.2017, 10:15

Спасибо вам большое все работает.

рони · #10 (**permalink**) 07.10.2017, 10:15

Stas1985,
#info.open{
cursor: default;
}

Форум

Справочник

Discord чат

Курсы javascript