html5左右滑动效果代码(css实现滑动效果)
admin 发布:2022-12-19 19:48 113
今天给各位分享html5左右滑动效果代码的知识,其中也会对css实现滑动效果进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、html5怎么实现页面左右滑动(下图区域),可以左右滑动但不需要换页
- 2、html5 canvas 代码 求最简单的动画效果 一个圆在左边移动到右边
- 3、HTML5 滑动条js代码怎么写?
- 4、html5页面左右滑动是怎么实现的?
- 5、html5上下滑动“翻页”实现,是真正的翻页
html5怎么实现页面左右滑动(下图区域),可以左右滑动但不需要换页
1、创建两个html文件,一个test一个test2。
2、打开test页面,在里面创建一个div,并给其添加onmousedown与move方法。
3、打开后我们发现是一个棕绿的页面。
4、定义两个变量,startx为鼠标按下的坐标,endx为鼠标移动的坐标。
5、实现鼠标点击执行的down方法,在里面通过clientX获得鼠标按下坐标,并赋值给startx。
6、接着在实现鼠标移动的move方法,获得鼠标移动的坐标,并通过startx与endx相减判断是否向左边滑动大于30的距离,是的话就切换到test2页面。
7、现在我们打开test页面,向左滑动会提示切换页面(这个可以去除),确定后就切换到了test2页面,向右滑动切换的方法同理。
html5 canvas 代码 求最简单的动画效果 一个圆在左边移动到右边
代码如下:
!DOCTYPE html
html
body
canvas id="myCanvas" width="700" height="550" style="border:1px solid #d3d3d3;"
Your browser does not support the HTML5 canvas tag.
/canvas
script
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = 0;
var ss = setInterval(function(){
ctx.clearRect(0,0,700,550);
//ctx.translate(x,0);
ctx.beginPath();
ctx.arc(x,200,50,0,Math.PI*2,true);
ctx.stroke();
//ctx.fillRect(x,10,100,50);
if (x 700 ) {
clearInterval(ss);
}
x += 20;
},100);
/script
/body
/html
试试看,只是简单一个demo,效果图如下:
HTML5 滑动条js代码怎么写?
强大的HTML5提供了一种新的标签progress,只需要通过该标签+简单的js,即可以实现进度条滚动的效果。
代码如下:
HTML
1
progress max="100" value="0" id="pg"/progress
这个标签意义很明确,并且属性只有以上两个,max表示需要完成的任务量,value是目前完成的任务量。
js
12345
var pg=document.getElementById('pg'); setInterval(function(e){ if(pg.value!=100) pg.value++; else pg.value=0;},100);
以上的实现方式不仅更加的语义化,同时也极大的简化了我们的代码,并且灵活性更高,所以熟练使用HTML5是非常有必要的!
不过HTML5标签的浏览器兼容性也是我们需要考虑的一个问题,所以如果网页需求的兼容性比较高的话,特别是对低版本IE有兼容需求的话,那么HTML5的标签就不太适用了。以下为progress的浏览器支持情况。
html5页面左右滑动是怎么实现的?
左右滑动是由触摸事件定义的,触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候触发。下面具体说明:
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时,鼠标指针的水平坐标)、clientY(返回当事件触发时,鼠标指针的垂直坐标)、screenX(当某个事件被触发时,鼠标指针的水平坐标)和screenY(返回当某个事件被触发时,鼠标指针的垂直坐标)。除了常见的DOM属性,触摸事件还包含下面三个用于跟踪触摸的属性。
touches:表示当前跟踪的触摸操作的touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性如下。
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触目的DOM节点目标。
举个例子-JavaScript代码:
function load (){
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "brTouch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "brTouch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}
}
}
window.addEventListener('load',load, false);
HTML代码:
div id="inp"/div
上面的小例子当touchstart事件触发的时候,会将触摸的位置更新到div标签中。当touchmove事件触发的时候,会默认行为的滚动
(触摸移动的默认行为是滚动页面),然后触摸操作的变化信息更新到div标签中。而touchend事件会输出有关触摸操作的最终信息。注意,在
touchend事件触发的时候,touches集合中就没有任何Touch对象了,因为不存在活动的触摸操作。
这些事件会在文档的所有元素上面触发,因而可以分别操作页面的不同部分。在触摸屏幕上的元素,这些事件(包括鼠标事件)发生的顺序如下:
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend
html5上下滑动“翻页”实现,是真正的翻页
HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下:
1、html5页面代码
!DOCTYPE html
htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleHTML5手机页面触屏滑动上下翻页特效/title
meta charset="utf-8"
meta name="apple-touch-fullscreen" content="YES"
meta name="format-detection" content="telephone=no"
meta name="apple-mobile-web-app-capable" content="yes"
meta name="apple-mobile-web-app-status-bar-style" content="black"
meta http-equiv="Expires" content="-1"
meta http-equiv="pragram" content="no-cache"
link rel="stylesheet" type="text/css" href="./hamer_files/main.css"
link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css"
script type="text/javascript" src="./hamer_files/offline.js"/script
meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"
/head
body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;"
section class="u-alert"
img style="display:none;" src="./hamer_files/loading_large.gif"
div class="alert-loading z-move"
div class="cycleWrap" span class="cycle cycle-1"/span
span class="cycle cycle-2"/spanspan class="cycle cycle-3"/spanspan class="cycle cycle-4"/span
/div
div class="lineWrap" span class="line line-1"/spanspan class="line line-2"/spanspan class="line line-3"/span
/div
/div
/section
section class="u-arrow"
p class="css_sprite01"/p
/section
section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;"
div class="translate-back" style="height: 918px;"
div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;"
div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
/div
/section
section class="u-pageLoading"
img src="./hamer_files/load.gif" alt="loading"
/section
script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"/script
script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"/script
script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"/script
/body/html
2、css代码:
@charset "utf-8";
.ad_foot li { margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;}
.ad_foot li a {display:block;}
.ad_foot li .l {width:75px; height:75px; float:left; overflow:hidden;}
.ad_foot li .l img {width:75px; width:75px;}
.ad_foot li .r {width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;}
.ad_foot li .r p {color:#999; font-size:1.2em; }
.ad_foot li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
.lazy-img, .lazy-finish{background-color:#f0eded;}
.page-list{font-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;}
.ad_foot{padding:15px 15px 0 15px;}
/*声音播放按钮*/
#song_img {width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;}
/*底部推荐*/
.ad_list{margin-top:2em;}.ad_list li {width:46%; background:none; padding:0; float:left;margin-bottom: 1em;}
.ad_list li.r {float:right;}.ad_list li a img {width:100%; height:auto;}
.ad_foot h3 {width:100%; height:48px; line-height:48px; background:#F9F5EC;}
.ad_foot h3 a {display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;}
.ad_foot h3 a.active {color:#FFF; background:#FF9240;}
.magazine_1 li {
width:100%;
margin-bottom: 1em;
font-size: 1.8em;
padding: 15px;
background: #FFF;}
.magazine_1 li a {display:block;}
.magazine_1 li .l {width: 75px;
height: 75px;
float: left;
overflow: hidden;}
.magazine_1 li .l img {width:75px; height:75px;}
.magazine_1 li .r {width: 78%;
float: left;
margin-left: 30px;
color: #666;
overflow: hidden;}
.magazine_1 li .r p {
color: #999;
font-size: 1.2em;
.magazine_1 li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
3、运行效果如下:
html5左右滑动效果代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于css实现滑动效果、html5左右滑动效果代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:xml解析代码(xml解析源码)
- 下一篇:图片弹窗代码(图片弹窗代码怎么弄)
相关推荐
- 05-15网络营销推广微信hyhyk1效果好,微信网络营销怎么做
- 05-15在百度上打广告找谁,百度上打广告有效果吗
- 05-14网站怎么设计,网站怎么设计怎么实现的
- 05-13现在什么app引流效果好,现在什么app引流效果好呢
- 05-09网页代码,网页代码快捷键
- 05-09百度seo查询工具,百度seo效果怎么样
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
- 05-06个人主页图片代码(个人主页图片代码怎么弄)[20240506更新]
- 05-06提取微信名片代码(微信名片信息提取)[20240506更新]
- 05-06php后台权限管理代码(php管理员权限)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接