手机滑动选项卡代码(手机设置滑动显示)
admin 发布:2022-12-19 11:36 91
本篇文章给大家谈谈手机滑动选项卡代码,以及手机设置滑动显示对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
如何用FLASH做出手机上滑动解锁的模拟界面? 代码 as2.0要怎么写?
as2.0的代码:
onMouseDown
=
function
()
{
a
=
_xmouse;
};
onMouseUp
=
function
()
{
/*========一般手机都是向右滑动解锁,故用(_xmouse-a)20来判断,如需向左,则用(a-_xmouse)20来判断,其中20为你解锁需要滑动的距离,可自行修改==========*/
if
((_xmouse-a)20)
{
/*===此处为解锁代码===*/
}
};
我要要滑动菜单的代码
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""
html xmlns="" lang="zh-CN" xml:lang="zh-CN"
head
title选项卡/title
style type="text/css"
!--
* { margin:0; padding:0; font-size:12px; font-weight:normal; }
.jj { font-weight:bolder!important; }
.box { border-top-color:#c00!important; }
.pr { color:#060!important; }
#tab01 { position:relative; width:336px; height:88px; padding-top:15px; margin:50px; overflow:hidden; }
#tab01 h3 { position:relative; z-index:2; float:left; height:14px; padding:0 7px 0 8px; margin-left:-1px; border-left:solid 1px #ccc; border-right:solid 1px #fff; text-align:center; background:#fff; cursor:pointer; }
#tab01 h3.up { height:18px; padding:5px 7px 0 7px; margin:-6px 0 0 0; border:solid #ccc; border-width:1px 1px 0; color:#c00; }
#tab01 div { display:none; position:absolute; left:0; top:32px; z-index:1; width:324px; height:54px; padding:5px; border:solid 1px #ccc; color:#666; }
#tab01 div.up { display:block; }
#tab02 { position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; }
#tab02 h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; }
#tab02 h4.up { color:#c00; }
#tab02 ol { display:none; height:54px; padding:5px; color:#666; }
#tab02 ol.up { display:block; }
#tab03 { position:relative; width:100px; margin:50px; }
#tab03 h3 { position:relative; z-index:1; height:16px; padding-top:4px; margin-bottom:-1px; border:solid #ccc; border-width:1px 0 1px 1px; text-align:center; font-family:宋体; background:#eee; cursor:pointer; }
#tab03 h3.up { z-index:3; color:#c00; background:#fff; }
#tab03 div.tab { display:none; position:absolute; left:99px; top:0; z-index:2; width:300px; height:200px; padding:5px; border:solid 1px #ccc; color:#666; }
#tab03 div.tab.up { display:block; }
--
/style
/head
body
div id="tab01"
h3首页/h3
div class="jj"p嘿嘿,无视div原始class值。/p/div
h3 class="pr"测试/h3
divp继续无视h3原始class值。/p/div
h3无聊/h3
divph3没有值也可以~/p/div
h3 class="box"傻蛋/h3
divpdiv没有值一样可以~/p/div
/div
div id="tab02"
h4首页/h4
ol class="pr"li嘿嘿,无视容器原始class值。/li/ol
h4 class="box"测试/h4
olli继续无视h3原始class值。/li/ol
h4无聊/h4
ollih3没有值也可以~/li/ol
h4 class="bb"傻蛋/h4
ollidiv没有值一样可以~/li/ol
/div
div id="tab03"
h3首页/h3
div class="tab"p嘿嘿,无视h3原始class值。/p/div
h3测试/h3
div class="tab wushi"p继续无视div原始class值。/p/div
h3无聊/h3
div class="tab"ph3没有值也可以~/p/div
h3 class="box"傻蛋/h3
div class="tab tab123"pclass值相似一样也可以~/pdivp指定class后,即时再多一个div也行。/p/div/div
/div
script type="text/javascript"
!--
function Pid(id,tag){
if(!tag){
return document.getElementById(id);
}
else{
return document.getElementById(id).getElementsByTagName(tag);
}
}
function tab(id,hx,box,iClass,s,pr){
var hxs=Pid(id,hx);
var boxs=Pid(id,box);
if(!iClass){ // 如果不指定class,则:
boxsClass=boxs; // 直接使用box作为容器
}
else{ // 如果指定class,则:
var boxsClass = [];
for(i=0;iboxs.length;i++){
if(boxs[i].className.match(/\btab\b/)){// 判断容器的class匹配
boxsClass.push(boxs[i]);
}
}
}
if(!pr){ // 如果不指定预展开容器,则:
go_to(0); // 默认展开序列
yy();
}
else {
go_to(pr);
yy();
}
function yy(){
for(var i=0;ihxs.length;i++){
hxs[i].temp=i;
if(!s){// 如果不指定事件,则:
s="onmouseover"; // 使用默认事件
hxs[i][s]=function(){
go_to(this.temp);
}
}
else{
hxs[i][s]=function(){
go_to(this.temp);
}
}
}
}
function go_to(pr){
for(var i=0;ihxs.length;i++){
if(!hxs[i].tmpClass){
hxs[i].tmpClass=hxs[i].className+=" ";
boxsClass[i].tmpClass=boxsClass[i].className+=" ";
}
if(pr==i){
hxs[i].className+=" up"; // 展开状态:标题
boxsClass[i].className+=" up"; // 展开状态:容器
}
else {
hxs[i].className=hxs[i].tmpClass;
boxsClass[i].className=boxsClass[i].tmpClass;
}
}
}
}
tab("tab01","h3","div","","onclick",2); tab("tab02","h4","ol");tab("tab03","h3","div","tab");
//--
/script
/body
/html
手机或触摸屏点击切换图片,怎么修改代码,以实现滑动切换图片。
也就是说现在你已经写出点击切换的代码了,把这部分代码修改下,放到滑动事件里,或者用swiper
关于手机滑动选项卡代码和手机设置滑动显示的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-17百度手机浏览器,百度手机浏览器官网下载
- 05-16百度推广下载,百度推广客户端手机版下载
- 05-16360搜索首页,360搜索首页 手机版
- 05-16百度下载app下载安装到手机,百度下载app下载安装到手机ios
- 05-16百度手机助手官网下载,百度手机助手官网免费下载
- 05-16手机清理优化软件排名,2020手机清理软件排行
- 05-15手机百度seo怎么优化,百度app如何优化
- 05-14百度账号免费注册,手机注册百度账号 免费
- 05-14手机版百度一下,手机百度2019最新版下载安装
- 05-12手机百度一下百度,手机百度一下没反应呢,咋回事
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接