[javascript] 요즘 웹페이지에서 영상 플레이시 스크롤이 플레이어를 지나가면 레이어팝업으로 따라가는 스크립트. 


페이스북에서도 영상 플레이하면 스크롤 되었을때 좌측 상단에 레이어로 따라오더라. 

JTBC 뉴스 페이지에서 그렇게 나오길래 보니 jwPlayer를 사용하고 있다. 




jQuery로 적용되어있다. document.ready 에서 window.on('scroll',fun~~~  로 스크롤시 고정 플레이어의 위치를 확인해서 플레이어의 top을 벗어나면 플레이어 사이즈를 변경하고 우측 하단에 bottom 100px, right 50px 주고 fixed 하는 것으로 되어있네. 멋짐. ㅎㅎ 


영상을 보면서 들으면 지문을 읽을 수 있어서 좋다. 








...

저작자 표시 비영리
신고
Posted by 홍반장水 홍반장水

10 Tips for Writing JavaScript without jQuery

http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/


jQuery없이 JavaScript 작성을위한 10 가지 팁


jQuery는 훌륭한 라이브러리입니다. IE6이 최고의 브라우저였던시기가 다가 왔습니다. 당시에는 해결해야 할 지루한 단점과 차이점이 있었으며 jQuery는 크로스 브라우저 코드를 작성하기위한 완벽한 도구였습니다.

그러나 오늘날 웹 브라우저는 그 당시부터 많은 발전을 이루었습니다. 우리는 ES5 에서 제공하는 모든 기능을 편안하게 사용할 수 있으며, DOM과 함께 작업하는 데 도움이되는 멋진 HTML5 API 를 처리 할 수 있습니다. 개발자는 이제 일부 프로젝트에서 jQuery를 생략하고 생산성을 유지할 수있는 위치에 있습니다.

나쁘게 생각하지 마라. jQuery는 여전히 훌륭한 라이브러리이며, 자주 사용하지 않는 것이 더 좋다. 그러나 제한된 JS 상호 작용, 브라우저 확장 및 모바일 사이트가있는 단순한 페이지와 같은 작은 항목의 경우 vanilla JS를 사용할 수 있습니다. 당신의 노력에 도움이 될 10 가지 요령이 있습니다.




저작자 표시
신고
Posted by 홍반장水 홍반장水

[jQuery] jQuery로 모바일에서 가로보기인지 세로보기인지 알아내기

jQuery orientationchange Event

 

 

 

 

 

$(window).on("orientationchange", function(event){
    if(window.matchMedia("(orientation: portrait)").matches){
        // 세로 모드 (평소 사용하는 각도)
    }else if(window.matchMedia("(orientation: landscape)").matches){
        // 가로 모드 (동영상 볼때 사용하는 각도)
    }
});

.

 

저작자 표시
신고
Posted by 홍반장水 홍반장水

Turntable.js: Responsive jQuery slider

 

 

Turntable.js is a responsive jQuery slider. It lets you flip through a series of images as your mouse/finger moves across a container.

turntable.js

 

 

 

 

 

저작자 표시
신고
Posted by 홍반장水 홍반장水

Multi-Screen.js: Turn a single page into a collection of screens

 

Prezi 같은 느낌 구현

 

Multi-Screen.js is a lightweight jQuery plugin that lets you turn a single page into a collection of screens with animated navigation. It’s as simple as dividing up your single page into divs to correspond with each screen.

multiscreen.js

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자 표시
신고
Posted by 홍반장水 홍반장水
jQuery Cheat Sheet: A quick API reference

 

This colorful jQuery Cheat Sheet is your one-stop reference for the jQuery API. It covers selectors, attributes, CSS, events, effects, and much more.

jquery

 

저작자 표시
신고
Posted by 홍반장水 홍반장水

Unslider 2.0: An ultra-simple jQuery slider - 슬라이드  carousel

 

Unslider (now in version 2.0) is a super simple jQuery carousel/image slider. It has a variety of options available, including animation, a totally manual option, infinite sliders, and more.

 

unslider

 

 

 

 

 

 

.

저작자 표시
신고
Posted by 홍반장水 홍반장水

 

한 시간 만에 배우는 Jquery

 

 

 

 

 

 

.

저작자 표시
신고
Posted by 홍반장水 홍반장水

 

Slidesjs - 원하는 페이지로 이동시킬때.

http://www.slidesjs.com/

 

 

 

 

http://stackoverflow.com/questions/16043600/refresh-slidejs

 

$('#SLIDESID').slidesjs({
    //...
});

// ... later somewhere else ... //

var currentIndex = $('#SLIDESID').data().plugin_slidesjs.data.current;

//remove active tab
$('#SLIDESID [slidesjs-index="' + currentIndex + '"]').remove();
$('#SLIDESID [data-slidesjs-item="' + currentIndex  + '"]').parent().remove();

//reindex tabs
var tabs = $('#SLIDESID [slidesjs-index]');
tabs.each(function(idx, elem){
    $(elem).attr('slidesjs-index', idx);
});

//reindex pagination
$('#SLIDESID [data-slidesjs-item]').each(function(idx, elem){
    $(elem).attr('data-slidesjs-item', idx);
    $(elem).text(idx+1);
});

//tweek plugin data
$('#SLIDESID').data().plugin_slidesjs.data.total = tabs.length;
$('#SLIDESID').data().plugin_slidesjs.data.current--;

//animate to new element by clicking on NEXT
$('#SLIDESID .slidesjs-next').click();
저작자 표시
신고
Posted by 홍반장水 홍반장水

 bxSlider



The Responsive jQuery Content Slider



Why should I use this slider?

  • Fully responsive - will adapt to any device
  • Horizontal, vertical, and fade modes
  • Slides can contain images, video, or HTML content
  • Advanced touch / swipe support built-in
  • Uses CSS transitions for slide animation (native hardware acceleration!)
  • Full callback API and public methods
  • Small file size, fully themed, simple to implement
  • Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
  • Tons of configuration options

How to install

Step 1: Link required files

First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Step 2: Create HTML markup

Create a <ul class="bxslider"> element, with a <li> for each slide. Slides can contain images, video, or any other HTML content!

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Step 3: Call the bxSlider

Call .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Check the examples and FAQs for more information on installation and customization


저작자 표시
신고
Posted by 홍반장水 홍반장水