찾다
웹 프론트엔드H5 튜토리얼hwSlider-content 슬라이딩 전환 효과(2): 반응형 터치 슬라이딩

오늘은 콘텐츠 슬라이딩 전환 효과의 두 번째 부분을 계속해서 설명하겠습니다. 요즘 우리의 웹 개발은 모바일 장치에 적응해야 하며, 이는 우리의 웹 페이지가 휴대폰과 같은 모바일 장치에서도 접근 가능해야 함을 의미합니다. 따라서 첫 번째 부분의 기본 전환 효과를 강화하고 반응성과 터치 슬라이딩 효과를 추가했습니다.

hwSlider-content 슬라이딩 전환 효과(2): 반응형 터치 슬라이딩
데모 다운로드 소스코드 보기

이 글은 hwSlider-content 슬라이딩 전환 효과의 두 번째 부분입니다. 데모 DEMO는 첫 번째 부분의 내용을 기반으로 합니다. , 그러니까, 첫 번째 부분을 읽지 않으셨다면 다음을 참고하세요: hwSlider-content 슬라이딩 전환 효과(1)

반응형

반응형 디자인이란 무엇입니까? 여기 I I 그것을 설명하지 않을 것입니다. hwSlider에서는 CSS를 통해 슬라이더의 너비와 높이를 설정하고 너비를 백분율로 설정합니다.

[code=css]
#hwslider{width: 100%;height:auto;min-height: 120px;margin:40px auto; position: relative; overflow: hidden;}
#hwslider ul{width: 100%; height:100%; position: absolute; z-index: 1}
#hwslider ul li{display:none;position:absolute; left:0; top:0; width: 100%;height:100%; overflow: hidden;}
#hwslider ul li.active{display: block;}
#hwslider ul li img{max-width: 100%}
#dots{position: absolute; bottom:20px; left:200px; min-width:60px; height: 12px; z-index: 2;}
#dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 8px; cursor: pointer;}
#dots span.active{background:orangered}
.arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line-height: 38px; text-align: center;; font-size: 36px; background: rgba(0,0,0,.3); color: #fff; text-decoration: none}
.arr:hover{background: rgba(0,0,0,.7); text-decoration: none;}
#hwslider:hover .arr{display: block; text-decoration: none;color: #fff}
#prev{left: 20px}
#next{right: 20px}

다음으로 js 부분 시작 부분에 변수를 정의합니다. 초기화 resize() 함수에서 탐색 점과 탐색 화살표의 위치를 ​​계산하고 위치를 지정하며 브라우저 창을 조정합니다. size resize()는 다음과 같은 경우에도 호출됩니다.

rree

모바일 터치 스크린 슬라이딩

모바일 기기에서는 화면을 탭하고 제스처 슬라이딩을 사용하여 슬라이더를 전환할 수 있습니다. 이 효과를 얻으려면 핵심 터치 이벤트를 사용해야 합니다. 터치 이벤트를 처리하면 화면에서 미끄러지는 각 손가락을 추적할 수 있습니다.

다음은 네 가지 터치 이벤트입니다.

touchstart: 손가락이 화면에 놓일 때 트리거됩니다.

touchmove: 손가락이 화면에서 슬라이드될 때 트리거됩니다

touchend : 손가락이 화면에서 벗어날 때 트리거

touchcancel: 시스템이 터치 이벤트를 취소할 때 트리거됨

자, 이제 바인딩하고 들어야 합니다. 슬라이더의 터치 이벤트, 터치 시작 및 터치 끝에서 각각 화면 슬라이더의 손가락 위치를 얻은 다음 변위에 따라 왼쪽 또는 오른쪽으로 슬라이드할지 여부를 결정한 다음 moveTo()를 호출하여 슬라이딩 전환을 구현합니다.

[code=js]
$(function(){
	var slider = $("#hwslider");
	var dots = $("#dots span"),
		prev = $("#prev"),next = $("#next");
	var sliderInder = slider.children('ul')
	var hwsliderLi = sliderInder.children('li');
	var hwsliderSize = hwsliderLi.length;  //滑块的总个数
	var sliderWidth = 600; //滑块初始宽度
	var sliderHeight = 320; //滑块初始高度
	var index = 1; //初始显示第一个滑块
	var speed = 400; //滑动速度
	var interval = 3000; //间隔时间
	var dotShow = true; //是否显示可切换的导航圆点
	var autoPlay = false; //是否支持自动滑动
	var clickable = true; //是否已经点击了滑块在做滑动动画

	

	//初始化组件
	var resize = function(){
		var sWidth = slider.width();
		var dotWidth = hwsliderSize*20;
		var dotOffset = (sWidth-dotWidth)/2;

		var sHeight = sliderHeight/sliderWidth*sWidth;
		slider.css('height',sHeight); 
		$("#dots").css('left',dotOffset+'px'); //导航圆点位置

		var arrOffset = (sHeight-40)/2;
		$(".arr").css('top',arrOffset+'px'); //导航箭头位置
	}

	resize();

	$(window).resize(function(){
	  resize();
	});

});

이전 글의 기본 슬라이더 js 코드를 추가하여 반응형 터치 슬라이딩 콘텐츠 슬라이딩 효과를 구현하세요.
PC에서 드래그 및 슬라이딩을 구현하려면 슬라이더의 onmousedown, onmousemove 및 onmouseup 이벤트를 바인딩하여 마우스를 누른 상태에서 슬라이더를 드래그하여 슬라이딩 전환을 구현해야 합니다. 주요 코드는 여기에 게시되지 않습니다. . 소스코드를 다운로드하여 보실 수 있습니다.

위 내용은 hwSlider 콘텐츠 슬라이딩 전환 효과(2) : 반응형 터치 슬라이딩 콘텐츠에 대한 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고하시기 바랍니다. !

관련 기사:

예제는 HTML5 슬라이딩 영역 선택 요소를 이해하는 데 도움이 됩니다. Slider 요소

hwSlider-Content 슬라이딩 전환 효과(1)

WeChat 애플릿 슬라이더 구성요소 상세 소개

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
7款实用响应式Bootstrap电商源码模板(快来下载)7款实用响应式Bootstrap电商源码模板(快来下载)Aug 31, 2021 pm 02:13 PM

好看又实用的Bootstrap电商源码模板可以提高建站效率,下面本文给大家分享7款实用响应式Bootstrap电商源码,均可免费下载,欢迎大家使用!更多电商源码模板,请关注php中文网电商源码​栏目!

如何在Java 9中使用JavaFX来构建响应式UI界面如何在Java 9中使用JavaFX来构建响应式UI界面Jul 30, 2023 pm 06:36 PM

如何在Java9中使用JavaFX来构建响应式UI界面引言:在计算机应用程序的开发过程中,用户界面(UI)是非常重要的一部分。一个好的UI能够提升用户体验,使应用程序更具吸引力。JavaFX是Java平台上的一个图形用户界面(GUI)框架,它提供了一套丰富的工具和API来快速构建富有交互性的UI界面。在Java9中,JavaFX已经成为了JavaSE的

如何使用HTML和CSS创建一个响应式轮播图布局如何使用HTML和CSS创建一个响应式轮播图布局Oct 20, 2023 pm 04:24 PM

如何使用HTML和CSS创建一个响应式轮播图布局在现代的网页设计中,轮播图是一个常见的元素。它能够吸引用户的注意力,展示多个内容或图片,并且能够自动切换。在本文中,我们将介绍如何使用HTML和CSS创建一个响应式的轮播图布局。首先,我们需要创建一个基本的HTML结构,并添加所需的CSS样式。以下是一个简单的HTML结构:<!DOCTYPEhtml&g

手把手带你了解VUE响应式原理手把手带你了解VUE响应式原理Aug 26, 2022 pm 08:41 PM

本篇文章我们来了解 Vue2.X 响应式原理,然后我们来实现一个 vue 响应式原理(写的内容简单)实现步骤和注释写的很清晰,大家有兴趣可以耐心观看,希望对大家有所帮助!

使用Webman进行响应式网站开发的秘诀使用Webman进行响应式网站开发的秘诀Aug 14, 2023 pm 12:27 PM

使用Webman进行响应式网站开发的秘诀在当今数字化时代,人们越来越依赖于移动设备来访问互联网。为了提供更好的用户体验和适配不同尺寸的屏幕,响应式网站开发已经成为了一个重要的趋势。而Webman作为一个功能强大的框架,为我们提供了许多工具和技术来实现响应式网站的开发。在这篇文章中,我们将分享一些使用Webman进行响应式网站开发的秘诀,包括如何设置媒体查询、

如何用Vue实现响应式UI设计?如何用Vue实现响应式UI设计?Jun 27, 2023 pm 02:35 PM

随着当今Web前端开发技术的快速发展,许多前端框架也随之迅速崛起。而Vue.js作为其中的一员,因其轻量、易上手、灵活、高效、响应式等特点,越来越被广大前端开发者所青睐。在Vue的帮助下,我们可以很方便地实现响应式UI设计,提升用户交互体验,下面我们来详细介绍一下。一、什么是响应式UI设计?响应式UI设计是一种页面设计方法,其主要目的是根据不同设备的屏幕大小

如何使用Vue和Element-UI实现移动端响应式设计如何使用Vue和Element-UI实现移动端响应式设计Jul 21, 2023 am 10:49 AM

如何使用Vue和Element-UI实现移动端响应式设计随着移动设备的普及,移动端响应式设计变得越来越重要。Vue和Element-UI是两个非常流行的前端开发工具,可以帮助我们快速实现移动端响应式设计。本文将带领大家学习如何使用Vue和Element-UI来开发移动端响应式设计,并提供代码示例。一、搭建项目环境在开始之前,我们需要先搭建一个使用Vue和El

详解Vue3响应式的两大利器:ref与reactive详解Vue3响应式的两大利器:ref与reactiveJan 09, 2023 pm 06:32 PM

相对于Vue2的defineProperty实现的数据响应式,Vue3对数据响应的处理分工更加明确,通过组合式api中ref与reactive两个暴露给开发者的函数对数据进行包装,从而实现了数据响应式

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는