첨부파일 https://eond.com/jquery/361872

http://www.smoothdivscroll.com/
http://www.smoothdivscroll.com/basicDemo.html

 

왼쪽으로 흘러가는 텍스트 스크립트입니다.
jquery와 css 를 사용해서 매우 부드럽게 흘러갑니다.
한페이지 내에서 1개 흘러가는 용도로 매우 유용하게 사용할 수 있습니다.  2개이상은 여러분의 몫입니다.

소스는 다음과 같으며, 내용중에 필요한 js와 css 그리고 image 는 첨부파일을 확인하세요.
 

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Scrolling Text - jQuery Smooth Div Scroll - Thomas Kahn</title>
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="Scripts/smoothDivScroll/smoothDivScroll.css" />
<style type="text/css">
/* text 스크롤 */
#scrollingText {
  width: 728px;
  height: 70px;
  position: relative;
  border: solid 1px #ccc;
  padding-top: 20px;
}
 
#scrollingText div.scrollableArea p {
  display: block;
  float: left;
  margin: 0;
  padding-right: 20px;
  font-family: Georgia,Times, 'Times New Roman', Serif; 
  font-size: 45px;
  line-height: 45px;
  font-weight: bold; 
  background-color: #fff; 
  color: #000; 
  white-space: nowrap;
}
#scrollingText2 div.scrollableArea2 p {
  display: block;
  float: left;
  margin: 0;
  padding-right: 20px;
  font-family: Georgia,Times, 'Times New Roman', Serif; 
  font-size: 45px;
  line-height: 45px;
  font-weight: bold; 
  background-color: #fff; 
  color: #000; 
  white-space: nowrap;
}
 
/* image 스크롤 */
#makeMeScrollable
{
  width:470px;  /* 보여지는 넓이 */
  height: 330px; /* 보여지는 높이 */
  position: relative;
}
 
#makeMeScrollable div.scrollableArea *
{
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  /* If you don't want the images in the scroller to be selectable, try the following
      block of code. It's just a nice feature that prevent the images from
      accidentally becoming selected/inverted when the user interacts with the scroller. */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>
</head>
 
<body>
<div id="scrollingText">
<p>You know, I have one simple request.</p>
<p>And that is to have sharks with frickin' laser beams attached to their heads! </p>
<p>Now evidently, my cycloptic colleague informs me that that can't be done. </p>
<p>Can you remind me what I pay you people for? </p>
<p>Honestly, throw me a bone here. What do we have? </p>
</div>
 
<div id="makeMeScrollable">
  <img src="images/demo/field.jpg" alt="Field" id="field" />
  <img src="images/demo/gnome.jpg" alt="Gnome" id="gnome" />
  <img src="images/demo/pencils.jpg" alt="Pencils" id="pencils" />
  <img src="images/demo/golf.jpg" alt="Golf" id="golf" />
  <img src="images/demo/river.jpg" alt="River" id="river" />
  <img src="images/demo/train.jpg" alt="Train" id="train" />
  <img src="images/demo/leaf.jpg" alt="Leaf" id="leaf" />
  <img src="images/demo/dog.jpg" alt="Dog" id="dog" />
</div>
 
<!-- jQuery library - Please load it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
 
<!-- jQuery UI Widget and Effects Core (custom download)
     You can make your own at: http://jqueryui.com/download -->
<script src="Scripts/smoothDivScroll/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
 
<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
     You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="Scripts/smoothDivScroll/jquery.mousewheel.min.js" type="text/javascript"></script>
 
<!-- jQuery Kinetic - for touch -->
<script src="Scripts/smoothDivScroll/jquery.kinetic.js" type="text/javascript"></script>
 
<!-- Smooth Div Scroll 1.3 minified-->
<script src="Scripts/smoothDivScroll/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
<!-- If you want to look at the uncompressed version you find it at
     js/jquery.smoothDivScroll-1.3.js -->
 
<!-- Plugin initialization -->
<script type="text/javascript">
<!--
  // text 스크롤
  $(document).ready(function() {
    $("#scrollingText").smoothDivScroll({
      autoScrollingMode: "always",
      autoScrollDirection: "endlessLoopRight",
      autoScrollInterval: 10, 
      autoScrollStep: 2 });
    }
  );
 
  // image 스크롤
  // Initialize the plugin with no custom options
  $(document).ready(function () {
  // I just set some of the options
    $("#makeMeScrollable").smoothDivScroll({
      mousewheelScrolling: "allDirections",
      manualContinuousScrolling: true,
      autoScrollingMode: "onStart"
    });
  });
//-->
</script>
</body>
</html>
코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 4 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
82 [질문] 천천히 흐르는 배너, 제어 버튼 파일 2015/09/03 0
81 [플러그인] 여러 플러그인을 소개한 블로그 2015/09/13 0
80 [ticker] 제이쿼리 플러그인 사이트, ticker 플러그인 2015/09/12 0
79 [팁] [jQuery] 페이지 부드럽게 이동하는법 2015/09/12 0
78 [추천사이트] jQuery 관련 추천 블로그 2015/09/03 0
77 [Banner] 배너에 사용할 플러그인 모음 2015/09/04 0
76 [플러그인] jquery plugin 2015/09/04 0
75 [플러그인] animatescroll 부드럽게 스크롤링되는 유용한 플러그인 2015/09/04 0
74 [추천사이트] 제이쿼리 플러그인을 종류별로 모아둔 블로그 2015/09/04 0
73 [슬라이더 플러그인] jcarousellite 2015/09/04 0
72 [플러그인] 제이쿼리 플러그인 모음(2) 2015/09/04 0
71 [슬라이더 플러그인] 제이쿼리 플러그인 모음 2015/09/04 0
70 [팁] undefined 와 null 의 차이 JAVASCRIPT / 0과 1, true, false, null, undefined의 차이 2015/09/03 0
69 [ticker] jQuery scrollnews 2015/09/04 0
현재글 [슬라이더 플러그인] [jQuery] Smooth div scroll (왼쪽으로 흐르는 이미지/글자) 파일 2015/09/03 0
67 [추천사이트] jQuery Plug-in 2015/09/03 0
66 [추천사이트] 위젯으로 활용할 소스가 많은 사이트 2015/09/03 0
65 [고급활용] 클릭하면 확대되는 이미지, 슬라이드, 닫기 기능(여은주) 2015/09/03 0
64 [슬라이더 플러그인] jQuery rolling slider : 자동 슬라드 롤링 블릿 플러그인(샤쿠(최석균)) 2015/09/03 0
63 [슬라이더 플러그인] 스크롤링 이미지 슬라이더 2015/09/03 0

해시태그 디렉터리