首页 技术 正文
技术 2022年11月7日
0 收藏 866 点赞 739 浏览 1100 个字

在开发一个网站的过程中各种翻页效果数不胜数,在这里我将介绍一下简单的一种方法就是使用css3的旋转即可实现这种常见的效果;

显示效果如下:

首先是页面的布局,不用那么复杂;

a标签的href属性,一般指向一个URL地址,也可以调用javascript,如href=”javascript:xxx();”,但是文档中推荐这样写<a href=”http://www.111cn.net/zhongxing/U880/ javascript:void(0)” onclick=”xxx();”>xx</a>,但是这种方法在复杂环境下有时会产生器奇怪的问题,尽量不要使用javescript:协议作为href属性,这样不仅会导致不必要的触发window.onbeforeunload事件。在IE里面更会使gif动画图片停止播放。

链接的onclick事件被先执行,其次是herf属性下的动作,如果不想执行href属性下的动作执行,onclick需要返回,一般写为:onclick=”xxx();return false;”.

a标签的href属性和onclick事件的优先级级别:

(1)顺序:ie 6 : href 先触发 onclick 后触发 ,其他浏览器 先触发onlick 后触发 href

(2)href=”javascript: xxx()” 不能传入this作为参数 ,onclick可以,例如:<a href=”javascript:alert(‘href event’);” onclick=”clickevent(this);”>

(3)优先触发的方法如果返回 false 导致后一个事件不被触发,例如:<a href=”javascript:alert(‘href event’);” onclick=”clickevent(this); return false;”>

(4)<a href=”#”> 会导致页面定位到书签位置

(5)由于 1和 4 的原因 ,在ie6 下 同时有 <a href=”#” 和 onclick的时候 由于页面先因为href重新载入了一次,导致 onclick事件被浏览器丢弃

总结:

(1)在不需要传入this作为参数的方法时,推荐只使用href=”JavaScript: “

(2)如果需要使用this参数,推荐使用<a href=”javascript:void(0);” onclick=”doSomthing(this)” > 

在这里不需要传入this 作为方法的参数,所以我使用的是:javascript:next(),而图片进行切换的js则如下所示;

在图片进行翻转的时候,我们需要进行一下判断,如果不加判断则会使carIndex超过或者低于图片的个数;

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,997
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,511
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,356
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,139
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,770
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,848