HTML小部件中的横向滚动 [英] Side Scrolling Inside HTML Widget
本文介绍了HTML小部件中的横向滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我正在为iPhone做一个天气部件，并想知道如何能够滚动到另一个页面本身。我应该包括什么，以便能够滚动到正确的？我如何使它，所以我可以侧滚吗？我已经尝试加倍宽度，但没有发生什么...请尽可能详细:)谢谢！
; html>
< title> Forecast< / title>
< script type =text / javascriptsrc =js / jquery.js>< / script>
< script type =text / javascriptsrc =js / drag.js>< / script>
< link href =css / main.css =stylesheettype =text / css/>
< / head>
< body>
< meta name =viewportcontent =width = 320，height = 583，initial-scale = 1，maximum-scale = 1，user-scalable = no，minimum-scale = 1.0 ，maximum-scale = 1.0，user-scalable = no/>
< span id =timestyle =position：absolute;
width：320px;
height：200px;
left：-209
text-align：center;
z-index：+4;
top：22.5px;
font-family：HelveticaNeue-UltraLight;
color：white;
font-size：41px;
font-weight：100;>
< / span>
< span id =datesstyle =position：absolute;
top：27px;
width：320px;
height：60px;
left：-17px;
text-align：right;
font-family：HelveticaNeue-Light;
font-weight：100;
font-size：17px;
color：white;>
< / span>
< span id =dattesstyle =
position：absolute;
top：47px;
width：320px;
left： 17px;
height：60px;
text-align：right;
font-family：HelveticaNeue-Light;
font-weight：100;
font-size： 17px;
color：white;
>
< / span>
< / body>
< / html>
解决方案
我在电脑浏览器和手机太。
演示： http ：//mediakuu.fi/mobile_demo/
将此添加到您的html标题以防止用户调整您的网站大小：
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1，minimum-scale = user-scalable = no>
为了使事情顺利而轻松：
- 使用此插件（hammer.js） http：//eightmedia.github .io / hammer.js / 以获取用户手势。
- 使用此插件（jquery.transit）
完整来源：
<！DOCTYPE html&
< html>
< head>
< title> MOBILE SCROLL DEMO< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1，minimum-scale = 1，user-scalable = no> ;
< style type =text / css>
body {
margin：0px;
padding：0px;
overflow：hidden;
}
#wrapper {
position：absolute;
left：0px;
top：0px;
}
.section {
position：absolute;
top：0px;
}
＃section1 {
background：＃226633;
}
＃section2 {
background：＃992211;
}
＃section3 {
background：＃773344;
}
＃section4 {
background：＃993344;
}
< / style>
< script src =js / jquery.js>< / script>
< script src =js / jquery.hammer.min.js>< / script>
< script src =js / jquery.transit.min.js>< / script>
< script>
$（document）.ready（function（）{
var
ww = 0，
wh = 0，
current_x = 0，
current_section = 0，
new_section = 0，
$ wrapper = $（'＃wrapper'）;
resizeElements（）{
//获取窗口尺寸
ww = $（window）.width（）;
wh = $（window）.height b
//调整节的大小以匹配窗口大小
$（。section）。css（{
width：ww +'px'，
height：wh +'px '
}）;
$（。section）。each（function（ind）{
$（this）.css（{
'left' ：（ind * ww）+'px'
}）;
}）;
}
//检查窗口大小设备方向）。
$（window）.bind（'resize orientationchange'，function（）{
resizeElements（）;
}）;
//一旦文档加载就调整元素大小
resizeElements（）;
//使用plugin.js获取触摸手势
$ wrapper.hammer（）。on（dragright dragleft dragend，function（ev）{
switch（ev.type）{
casedragleft：
casedragright：
//用户水平拖动，计算当前x从节索引
current_x = 0 - （ww * current_section）;
//使用transit插件移动CSS3动画的包装
$ wrapper.transition（{
x：current_x + parseInt ev.gesture.deltaX）
}，0，'linear'）;
break;
casedragend：
//用户释放手指。检查是否拖动
//超过屏幕宽度的30％或如果用户快速滑动..
// deltaX可以是> 0或< 0所以使用abs获得积极value
if（（Math.abs（ev.gesture.deltaX）/ ww）> 0.3 || ev.gesture.velocityX> 1.5）{
//滚动到下一个或上一个部分
new_section =（ev.gesture.deltaX> 0？current_section - 1：current_section + 1）;
//如果滚动节索引..滚动回老..
if（new_section< 0 || new_section> $（'。section'）。length-1）
new_section = current_section;
} else {
//不滚动那么多...动画回到旧节
new_section = current_section;
}
//计算节x位置
current_x = 0 - （ww * new_section）;
//动画包装到新位置..动画长度400毫秒
//lineareasing ..
$ wrapper.transition（{
x：current_x
}，400，'linear'，function（）{
//将动画设置为当前动画
//完成
current_section = new_section;
}）;
break;
}
}）;
}）;
< / script>
< / head>
< body>
< div id =wrapper>
< div class =sectionid =section1>
< p> section1< / p>
< / div>
< div class =sectionid =section2>
< p> section2< / p>
< / div>
< div class =sectionid =section3>
< p> section3< / p>
< / div>
< div class =sectionid =section4>
< p> section4< / p>
< / div>
< / div>
< / body>
< / html>
So I am making a weather widget for the iPhone and was wondering how to be able to be able to 'scroll' to another page per se. What should I include in order to be able to scroll to the right? How do I make it so I'll be able to scroll sideways? I've already tried doubling the width but nothing happened... Please be as detailed as possible :) Thank you!
<html>
<title>Forecast</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<meta name="viewport" content="width=320, height=583, initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<span id="time" style="position:absolute;
width: 320px;
height: 200px;
left: -209
text-align: center;
z-index: +4;
top: 22.5px;
font-family: HelveticaNeue-UltraLight;
color:white;
font-size: 41px;
font-weight: 100;">
</span>
<span id="dates" style="position: absolute;
top: 27px;
width: 320px;
height: 60px;
left: -17px;
text-align:right;
font-family:HelveticaNeue-Light;
font-weight:100;
font-size: 17px;
color: white;">
</span>
<span id="dattes" style="
position: absolute;
top: 47px;
width: 320px;
left: -17px;
height: 60px;
text-align:right;
font-family:HelveticaNeue-Light;
font-weight:100;
font-size: 17px;
color: white;
">
</span>
</body>
</html>
解决方案
I made little demo that works in computer browser and mobile too..
DEMO: http://mediakuu.fi/mobile_demo/
Add this to your html header to prevent user resizing your site:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
To make things work smooth and easy:
- Use this plugin (hammer.js) http://eightmedia.github.io/hammer.js/ to get user gestures.
- Use this plugin (jquery.transit) http://ricostacruz.com/jquery.transit/ to create smooth movement
Full source:
<!DOCTYPE html>
<html>
<head>
<title>MOBILE SCROLL DEMO</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#wrapper {
position: absolute;
left: 0px;
top: 0px;
}
.section {
position: absolute;
top: 0px;
}
#section1 {
background: #226633;
}
#section2 {
background: #992211;
}
#section3 {
background: #773344;
}
#section4 {
background: #993344;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.hammer.min.js"></script>
<script src="js/jquery.transit.min.js"></script>
<script>
$(document).ready(function() {
var
ww = 0,
wh = 0,
current_x = 0,
current_section = 0,
new_section = 0,
$wrapper = $('#wrapper');
function resizeElements() {
// Get window dimensions
ww = $(window).width();
wh = $(window).height();
// Resize sections to match window size
$(".section").css({
width : ww + 'px',
height : wh + 'px'
});
$(".section").each(function(ind) {
$(this).css({
'left': (ind * ww) + 'px'
});
});
}
// Check for window resize (user changing device orientation)..
$(window).bind('resize orientationchange', function() {
resizeElements();
});
// Resize elements once document loaded
resizeElements();
// Use plugin called hammer.js to get touch gestures
$wrapper.hammer().on("dragright dragleft dragend", function(ev) {
switch(ev.type) {
case "dragleft":
case "dragright":
//User is dragging horizontally, calculate current x from section index
current_x = 0 - (ww * current_section);
// Use transit plugin to move wrapper with CSS3 animation
$wrapper.transition({
x : current_x + parseInt(ev.gesture.deltaX)
}, 0, 'linear');
break;
case "dragend":
// User released finger. Check if dragged
// over 30% of screenwidth or if user made quick swipe..
// deltaX can be > 0 or < 0 so use abs to get positive value
if ((Math.abs(ev.gesture.deltaX) / ww) > 0.3 || ev.gesture.velocityX > 1.5) {
// Scroll to next or previous section
new_section = (ev.gesture.deltaX > 0 ? current_section - 1 : current_section + 1);
// If scrolling over section index.. scroll back to old..
if (new_section < 0 || new_section > $('.section').length-1)
new_section = current_section;
} else {
// Not scrolled that much.. animate back to old section
new_section = current_section;
}
// Calculate section x position
current_x = 0 - (ww * new_section);
// Animate wrapper to new position.. animation length 400 millisecods
// with "linear" easing..
$wrapper.transition({
x : current_x
}, 400, 'linear', function() {
// Set new section as current when animation
// completes
current_section = new_section;
});
break;
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="section" id="section1">
<p>section1</p>
</div>
<div class="section" id="section2">
<p>section2</p>
</div>
<div class="section" id="section3">
<p>section3</p>
</div>
<div class="section" id="section4">
<p>section4</p>
</div>
</div>
</body>
</html>
这篇关于HTML小部件中的横向滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
