지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > jquery는 이미지의 가로 스크롤 효과를 얻습니다.

jquery는 이미지의 가로 스크롤 효과를 얻습니다.

不言
풀어 주다： 2018-07-02 15:58:48
원래의
2351명이 탐색했습니다.

이 기사에서는 이미지의 가로 스크롤 효과를 구현하기 위해 jquery를 주로 소개합니다. 이는 매우 실용적인 코드이며 도움이 필요한 모든 사람에게 권장됩니다.

본 글의 예시는 jquery를 활용한 이미지의 가로 스크롤 효과를 설명하고 있으니 참고하시기 바랍니다. 자세한 내용은 다음과 같습니다.
실행 효과 다이어그램: ------효과 보기---- -

Tips: 브라우저가 제대로 작동하지 않으면 브라우징 모드를 전환해 보세요.
공유한 이미지의 가로 스크롤 효과를 구현하는 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>
<p 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">p+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">p+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>
 <p 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></p>
</p>
<SCRIPT type="text/javascript">
$(document).ready(function(){

 // cover flip effects //
 //var noOfArtists = 31; //jx
 var noOfArtists = 7; //jx
 
 $(&#39;#flip&#39;).jcoverflip({
 current: 0,
 
 beforeCss: function(el, container, offset){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + &#39;px&#39;,
  bottom: &#39;20px&#39;
  }, {}), $.jcoverflip.animationElement(el.find(&#39;img&#39;), {
  width: Math.max(10, 120 - 0 * offset * offset) + &#39;px&#39;
  }, {})];
 },
 afterCss: function(el, container, offset){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 + 100 + 130 * offset) + &#39;px&#39;,
  bottom: &#39;20px&#39;
  }, {}), $.jcoverflip.animationElement(el.find(&#39;img&#39;), {
  width: Math.max(10, 120 - 0 * offset * offset) + &#39;px&#39;
  }, {})];
 },
 currentCss: function(el, container){
  return [$.jcoverflip.animationElement(el, {
  left: (container.width() / 2 - 80) + &#39;px&#39;,
  bottom: &#39;20px&#39;
  }, {}), $.jcoverflip.animationElement(el.find(&#39;img&#39;), {
  width: &#39;160px&#39;
  }, {})];
 },
 change: function(event, ui){
  //jx $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, ui.to * 10);
  $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, ui.to * (100 / (noOfArtists - 1))); //jx
 }
 });
 
 $(&#39;#scrollbar&#39;).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
  $(&#39;#flip&#39;).jcoverflip(&#39;current&#39;, newVal);
  //jx $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, newVal * 10);
  $(&#39;#scrollbar&#39;).slider(&#39;value&#39;, newVal / (noOfArtists - 1) * 100); //jx
  }
 }
 });
 // cover flip effects //

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

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

위 내용은 모두의 학습에 도움이 되기를 바랍니다. , PHP 중국어 웹사이트를 주목해주세요!

관련 추천 :

jQuery 기반의 전체 텍스트 보기 기능

jQuery를 사용하여 WordPress에서 @ID 플로팅 디스플레이 구현

위 내용은 jquery는 이미지의 가로 스크롤 효과를 얻습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
jquery实现滚动效果 jquery滚动效果 jquery水平滚动 jquery实现图片滚动
원천：php.cn
이전 기사：jquery 주소 표시줄 링크와 레이블 링크를 일치시키는 특수 효과 다음 기사：Angular.Js의 자동화된 테스트 정보
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 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
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿