html5怎么实现页面左右滑动(下图区域),可以左右滑动但不需要换页

html5怎么实现页面左右滑动(下图区域),可以左右滑动但不需要换页,第1张

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页面,向右滑动切换的方法同理。

刚弄错了

应该是这样

<frameset name="frameTop" rows="80,*" framespacing="0" border="0" frameborder="0">

<frame name="banner" scrolling="no" noresize target="contents" src="title.jsp">

<frameset cols="180,*">

<frame name="contents" id="contents" target="main" src="menu.jsp" scrolling="auto" noresize>

<frame name="main" src="student/select/curriculumSchedule.jsp" scrolling="auto" noresize target="_self">

</frameset>

定义右边的name为 main 然后再左边指定 target="main"

使用格式:

<meta http-equiv="Page-Enter" content="RevealTrans(duration=5,Transitionv=11)">

duration=时间

Transitionv=方式

说明:duration为页面切换的时间长度,3.000表示3秒钟,一般可以直接输入3便可;transition为切换效果,从1-23共22种不同的切换效果,其中23为随机效果。

效果  Content  Transitionv

盒状收缩 RevealTrans 0 

盒状展开  RevealTrans 1

圆形收缩  RevealTrans 2 

圆形展开 RevealTrans 3

向上擦除 RevealTrans 4

向下擦除 RevealTrans 5

向左擦除 RevealTrans 6

向右擦除 RevealTrans 7

垂直百页窗 RevealTrans 8

水平百页窗 RevealTrans 9

横向棋盘式 RevealTrans 10

纵向棋盘式 RevealTrans 11

溶解 RevealTrans 12

左右向中部收缩 RevealTrans 13

中部向左右展开 RevealTrans 14

上下向中部收缩 RevealTrans 15

中部向上下展开 RevealTrans 16

阶梯状向左下展开 RevealTrans 17

阶梯状向左上展开 RevealTrans 18

阶梯状向右下展开 RevealTrans 19

阶梯状向右上展开 RevealTrans 20

随机水平线 RevealTrans 21

随机垂直线 RevealTrans 22

随机 RevealTrans 23


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/8366218.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存