<div id="mono">
<input type="checkbox" name="image" id="tonggle" />
<label for="tonggle">
<img src="http://wikipics.net/photos/20150206142322639625248.jpg" >
</label>
<div id="tex">Praesent sodales suscipit eros ut tempor. Curabitur pulvinar lectus ut enim gravida dictum. Vivamus eget nunc diam. Donec nec risus dictum, ullamcorper erat non, rutrum purus. Mauris lacus nibh, ornare sit amet ipsum et, rutrum sagittis tellus. Cras tincidunt facilisis facilisis. Cras lectus elit, efficitur at est nec, dictum gravida diam. Praesent eget ex porttitor nisi egestas commodo placerat vel eros. Nam sed justo congue, lobortis felis quis, fermentum massa. Donec egestas faucibus magna vitae maximus. Integer non facilisis dolor. Maecenas posuere elit ut magna bibendum, sit amet iaculis justo tempus. Vivamus vulputate eu neque quis hendre</div>
</div>#mono {
width: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#mono label {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
z-index: 2;
position: relative;
}
#mono input {
position: absolute;
left: -9999px;
}
#mono input:checked + label img {
-webkit-transform: translate(0, -350px);
-ms-transform: translate(0, -350px);
transform: translate(0, -350px);
}
#mono #tex {
position: absolute;
padding: 20px;
z-index: 1;
top: 0;
left: 0;
}
#mono img {
width: 500px;
position: relative;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}.cont-title {
background-color: green;
}
.cont-title a {
background-color: white;
display: inline-block;
}
.cart {
background-color: white;
}<div class="cont-title">
<a href="#" class="cell">
<h1>Заголовок</h1>
</a>
<div class="cell cell--mid"></div>
<div class="cart cell">Дата</div>
</div>.cont-title {
display: table;
}
.cell {
display: table-cell;
}
.mid {
width: 100%;
background-color: green;
}(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());#bg {
background: rgba(0,0,0,.6);
position: fixed;
left: 0;
top: 0;
width: 320px;
height: 100%;
z-index: 100;
overflow: auto;
}
#form {
width: 150px;
min-height: 520px;
padding: .3em 1em;
background: #fff;
border-radius: 12px;
z-index: 200;
top: 20px;
margin: 1em auto;
}(function() {
var app = angular.module('testApp', [
'ngRoute'
]);
app.config(function($routeProvider) {
$routeProvider.when('/page', {
templateUrl: 'test.tpl.html',
controller: 'TestCtrl'
});
});
app.controller('TestCtrl', function($scope) {
console.log('тут уже можно пользоваться теми скриптами, которые подгрузили во вьюхе');
});
})();<div class="testView">
<script src="testFunction.js"></script>
</div>document.addEventListener( "DOMContentLoaded", function () {
alert('Меня подгрузили!!!');
}, false );
});/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width: 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width: 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width: 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
/* Styles */
}<div class="roulette" style="display:none;">
<img src="http://example.com/star.png"/>
<img src="http://example.com/flower.png"/>
<img src="http://example.com/coin.png"/>
<img src="http://example.com/mshroom.png"/>
<img src="http://example.com/chomp.png"/>
</div>
<button class="start">START</button>
<button class="stop">STOP</button>$(document).ready(function () {
var option = {
speed : 10,
duration : 3,
stopImageNumber : 0,
startCallback : function() {
console.log('start');
},
slowDownCallback : function() {
console.log('slowDown');
},
stopCallback : function($stopElm) {
console.log('stop');
}
}
$('div.roulette').roulette(option);
// START!
$('.start').click(function(){
$('div.roulette').roulette('start');
});
// STOP!
$('.stop').click(function(){
$('div.roulette').roulette('stop');
});
});$(function(){
$('a[data-scroll^="#"]').click(function(){
$('.menu li').removeClass('active');
var target = $(this).attr('data-scroll');
$('html, body').animate({scrollTop: $(target).offset().top - 0}, 800);
return false;
});
});
var hide = false, show = true;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= 100 && !hide){
hide = true;
$('.navigation').stop()
.animate({"marginTop": "-210px"},"slow", function () {
show = false;
});
}
if (scrollTop < 100 && !show){
show = true;
$('.navigation').stop().animate({"marginTop": "+0px"}, "slow", function () {
hide = false;
});
}
});<button id="open">Открыть</button>
<div id="form">
<form action="#" method="post">
<input type="text" value="" placeholder="найти" />
</form>
</div>#form {
padding: 20px;
background-color: #000;
display: none;
}$(document).ready(function () {
var searchBlock = $('#form');
$(document).on('click', '#open', function () {
searchBlock.slideToggle();
return false;
});
});