지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jquery는 이미지 가로 스크롤 효과 코드를 구현합니다.

WBOY
풀어 주다： 2016-05-16 15:42:17
원래의
1113명이 탐색했습니다.

본 글의 예시는 jquery를 이용한 이미지의 가로 스크롤 효과를 설명하고 있으니 참고하시기 바랍니다. 세부 내용은 다음과 같습니다.
작업 렌더링: ------보기 효과------

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
이미지의 가로 스크롤 효과를 얻기 위해 모든 사람과 공유하는 jquery 코드는 다음과 같습니다 

<HEAD>
<META content="text/html; charset=gb2312" http-equiv="Content-Type">
<TITLE>jquery实现图片水平滚动效果</TITLE>
<LINK rel="stylesheet" type="text/css" href="css/style.css">
<SCRIPT type="text/javascript" src="js/ga.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.js"></SCRIPT>
</HEAD>
<BODY>

<!--演示内容开始-->
<SCRIPT type="text/javascript" src="js/jquery.min.1.5.1.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jquery.ui.1.8.10.js"></SCRIPT>
<SCRIPT type="text/javascript" src="js/jCoverflip.js"></SCRIPT>
<DIV class="artist_flow_contn">
 <UL id="flip" class="ui-jcoverflip">
  <LI style="left: 80px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/01.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN></LI>
  <LI style="left: 220px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 160px; display: inline-block;" border="0" src="images/02.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN></LI>
  <LI style="left: 400px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/03.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN></LI>
  <LI style="left: 530px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/04.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN></LI>
  <LI style="left: 660px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/05.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN></LI>
  <LI style="left: 790px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/06.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">div+css多张背景图片规范写法图片透明度显示</A></SPAN></LI>
  <LI style="left: 920px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG 
style="width: 120px; display: inline-block;" border="0" src="images/07.jpg"></A><SPAN 
style="display: none;" class="title"><A href="#" 
target="_blank">CSS如何定位工程</A></SPAN></LI>
  <SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">CSS如何定位工程</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">div+css多张背景图片规范写法图片透明度显示</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片切换插件制作图片与文字切换特效</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片放大点击小图放大查看大图效果</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片放大插件鼠标滑过图片放大效果</A></SPAN><SPAN style="display: block; opacity: 1;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图像幻灯片制作大小图片切换滚动展示</A></SPAN><SPAN style="display: none; opacity: 0;" 
class="title ui-jcoverflip--title"><A href="#" 
target="_blank">jquery图片切换插件制作图片层叠缩放展示效果</A></SPAN>
 </UL>
 <DIV id="scrollbar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><A 
style="left: 16.66%;" class="ui-slider-handle ui-state-default ui-corner-all" 
href="#"></A></DIV>
</DIV>
<SCRIPT type="text/javascript">
$(document).ready(function(){

 // cover flip effects //
 //var noOfArtists = 31; //jx
 var noOfArtists = 7; //jx
 
 $('#flip').jcoverflip({
 current: 0,
 
 beforeCss: function(el, container, offset){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + 'px',
  bottom: '20px'
  }, {}), $.jcoverflip.animationElement(el.find('img'), {
  width: Math.max(10, 120 - 0 * offset * offset) + 'px'
  }, {})];
 },
 afterCss: function(el, container, offset){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 + 100 + 130 * offset) + 'px',
  bottom: '20px'
  }, {}), $.jcoverflip.animationElement(el.find('img'), {
  width: Math.max(10, 120 - 0 * offset * offset) + 'px'
  }, {})];
 },
 currentCss: function(el, container){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 - 80) + 'px',
  bottom: '20px'
  }, {}), $.jcoverflip.animationElement(el.find('img'), {
  width: '160px'
  }, {})];
 },
 change: function(event, ui){
  //jx $('#scrollbar').slider('value', ui.to * 10);
  $('#scrollbar').slider('value', ui.to * (100 / (noOfArtists - 1))); //jx
 }
 });
 
 $('#scrollbar').slider({
 //jx value: 50,
 value: 0, //init. pic is the beginning of the artists list, so change from 50 (middle) to 0
 //jx step: 10,
 step: 100 / (noOfArtists - 1), //jx
 stop: function(event, ui){
  if (event.originalEvent) {
  //jx var newVal = Math.round(ui.value / 10);
  var newVal = Math.round(ui.value / 100 * (noOfArtists - 1)); //jx
  $('#flip').jcoverflip('current', newVal);
  //jx $('#scrollbar').slider('value', newVal * 10);
  $('#scrollbar').slider('value', newVal / (noOfArtists - 1) * 100); //jx
  }
 }
 });
 // cover flip effects //

});
</SCRIPT>
<!--演示内容结束-->

</BODY>
</HTML>
로그인 후 복사

위는 공유한 이미지의 가로 스크롤 효과를 구현하는 jquery 코드입니다. 마음에 드셨으면 좋겠습니다.

관련 라벨：
jquery实现滚动效果 jquery滚动效果 jquery水平滚动 jquery实现图片滚动
원천：php.cn
이전 기사：JavaScript는 C# 형식의 string_javascript 기술을 시뮬레이션합니다. 다음 기사：jquery 유효성 검사 및 jquery 양식 플러그인 조합은 form_jquery 유효성을 검사한 후 AJAX 제출을 구현합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
0ms 수면을 생략하면 CSS 전환이 중단되는 이유는 무엇입니까? 제가 제대로 이해하고 있는지 알아보기 위해 FLIP 애니메이션을 구현해 보려고 합니다. 이 코드펜에서(잘못된 코드를 양해해 주세요. 그냥 장난을 쳤을 뿐입니다) ...
에서 2024-04-06 16:29:50
0
2
490
자바스크립트를 사용하여 표시된 형식 데이터 필드에 추가 값 추가 저는 이것을 달성하려고 합니다. 사용자가 입력한 데이터를 수집하여 화면에 인쇄하는 양식을 만들고 싶습니다. 지금까지 아래 코드 조각을 사용하여 거의 작업 효과를 ...
에서 2024-04-04 15:17:13
0
1
3589
그림자 복제 버전으로 메뉴 버튼을 x 모양으로 변환하는 호버 효과 만들기 먼저 제 제목이 혼란스럽다는 점을 인정하고 죄송합니다. 내가 달성하고 싶은 것은 hover에 대한 다음과 같은 효과입니다. 내 웹 사이트는 여기 https://w...
에서 2024-04-04 11:55:21
0
2
315
클릭하면 텍스트가 새 요소(예: 구분선)로 바뀌도록 하려면 어떻게 해야 합니까? 페이지의 특정 텍스트를 클릭하면 구분 기호/새 요소로 바뀌는 방법을 찾으려고 합니다. 어떻게 설명해야 할지 모르겠지만, 아래에 제목이 있는 이미지를 상상해 보세요...
에서 2024-04-04 11:21:03
0
1
3580
단일 그리드 또는 Flex를 사용하여 다양한 카드 레이아웃 만들기: 실용적인 가이드 그림과 같은 반응형 카드 레이아웃을 만들려고 합니다. 제가 현재 하고 있는 일은 컴퓨터, 태블릿, 모바일 기기용으로 별도의 레이아웃을 만드는 것입니다. 그런 다음...
에서 2024-04-02 21:07:36
0
2
377
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿