html如何实现点击按钮跳转页面

html如何实现点击按钮跳转页面,第1张

1、首先,我们新建一个带有button按钮的页面,在Dreamweaver中打开这个页面。

2、button按钮不能直接添加herf属性,我们可以通过button的onClick事件来实现页面的跳转

3、可以直接在onclick事件上添加动作实现页面跳转,也可以让onClick触发函数实现页面跳转,如下图所示。

4、还可以写一个click函数,来触发页面跳转。这就需要我们获取到这个button,可以给button一个Id了,如下图所示。

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

使用格式:

<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


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

原文地址: http://outofmemory.cn/zaji/7055472.html

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

发表评论

登录后才能评论

评论列表(0条)

保存