У меня есть изображения в

-1

Я разрабатываю веб-сайт для этой организации, который хотел бы, чтобы их изображения отображались на стороне страницы, а основное содержание - посередине. При достижении нового раздела страницы изображения будут меняться, чтобы отражать новое содержание, о котором говорят (так что каждый Div в этом случае представляет собой период истории, который отображается по сторонам в столбцах страницы). Моя проблема заключается в том, что я не знаю, как добавить переход к фотографии, чтобы он просто «прыгнул» на место, вместо того, чтобы дать пользователю возможность его ослабить на месте при создании нового div (раздела). Любые предложения будут приветствоваться, и я пробовал эффекты CSS3 для простоты в использовании, но не удачи, потому что мне нужно, чтобы он был легко с черным фоном при наведении на div и на картинке (и я действительно не понять, как создать эффект в CSS3, где вы наводили бы над средним div, но влияют только на два боковых div). Любая помощь будет оценена по достоинству.У меня есть изображения в

Редактировать: синие полоски на стороне отображают, куда будут идти фотографии, и как начинается страница, прежде чем пользователь наведет над центром (оранжевый) div. При наведении синие полосы меняются, как показано на втором снимке. Проблема в том, что, как мы все знаем, фотографии просто «прыгают» на место, а не просто становятся (больше внимания к глазам).

HTML/JS:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="practice.css" rel="stylesheet"> 
</head> 

<body> 
    <div id = "first" style = "background-color:blue"> 
    <div class = "col-sm-1" id = "left"> 
    </div> 
    <div style = "background-color: orange;" class = "col-md-10" onmouseover="changeIn('left','right')" onmouseout="changeOut('left','right')"> 
    </div> 
    <div class = "col-sm-1" id = "right"> 
    </div> 
    </div> 


    <div class = "second"> 
    <div class = "col-sm-1"></div> 
    <div style = "background-color: green;" class = "col-md-10"></div> 
    <div class = "col-sm-1"></div> 
    </div> 
</body> 
</html> 

<script type="text/javascript"> 

    function changeIn(spot1,spot2){ 
     var spot1 = spot1; 
     var spot2 = spot2; 
     document.getElementById(spot1).style.backgroundImage = "url('1.jpg')" 
     document.getElementById(spot2).style.backgroundImage = "url('2.jpg')" 
    } 
    function changeOut(spot1,spot2){ 
     document.getElementById(spot1).style.backgroundImage = "" 
     document.getElementById(spot2).style.backgroundImage = "" 
    } 
</script>

onMouseOut Результат (как начинается страницы): onMouseOut Result

OnMouseOver Результат (как заканчивается страница): OnMouseOver Result:

источник

2015-07-19 Justin E. Samuels

Пожалуйста, jsfiddle –

Fiddle дает мне неприятности, сделал несколько скриншотов, и добавлено больше описания для OP @MuhammadUmer –

Не полностью законченную мысль, но что-то, как это должно работать нормально ...

block.addEventListener('mouseover', function() { 
    parent.classList.add('transition-in'); 
    parent.classList.remove('transition-out'); 
});

Полный пример здесь: http://jsfiddle.net/k2dqs4y0/

источник

2015-07-19 22:41:57 Dann

Эй, @ Данн, спасибо за вашу скрипку. Да, это работает для цветов, но не для изображений. Это проблема, с которой я столкнулся ранее с эффектами перехода CSS3, а также –

@ JustinE.Samuels. Хорошо, я бы посмотрел методы 'fadeIn()' и 'fadeOut()' из jQuery. http://api.jquery.com/fadein/ – Dann

Спасибо @dann, я не знаю, почему я не изучал использование JQuery для этого раньше. Прекрасно работает, спасибо большое –

попробовать переход Css/трансформируют эффекты , http://www.w3schools.com/css/css3_transitions.asp

или написать js-скрипт, ps как вы можете написать сайт, если вы не знаете, как это сделать?

источник

2015-07-19 22:13:50 LostInCyberSpace

Написание веб-сайта (как я уже много раз делал) - это легкая часть (или я бы не стал делать это по зарплате). Но, не имея команды и делая это самостоятельно (тогда как я обычно не прикасаюсь к CSS, в основном просто используя стек MEAN), это то, что меня отключает. И, как я уже сказал, я уже пробовал эффекты перехода, и это не дает мне ожидаемого результата (как я уже говорил ранее), спасибо, хотя –

У меня есть изображения в

ответ

Смежные вопросы