自动适应设备的宽度,滑动会切换大图,底部导航跟随切换。点击底部导航切换大图。使用的jquery_mobile插件,引入1.4.5的插件,CSS表和jquery库即可,除了ID,CLASS命名可能会和你项目重复,改成单独即可,其他应该没有重复的,因为本脚本使用计时器写的,加入了方法判定,在执行一个方法的时候,锁定其他方法禁止执行,不会冲突,使用计时器来控制动画,可能不尽如人意,准备重构一下改成Jquery的animate()方法来执行动画效果。近期重构好在上传使用内置方法不用计时器的版本吧。
ul,li,a,body,div{ margin:0px; list-style:none; } #nav li{ width:18%; border:1px solid blue; height:50px; line-height:50px; list-style:none; text-align:center; float:left; } .top_jt{ width:100px; height:50px; border:1px solid green; text-align:center; line-height:50px; position: fixed; top:800px; left:230px; z-index:1000; box-shadow: 1px 1px 10px #666; } .dingyi{ position: fixed; top:0px; z-index:1000; box-shadow: 1px 1px 10px #666; } .p_ul_li{float:left;width:20%;height:20px;border:1px solid black;text-align:center;margin:2%;} .p_ul{width:100%;padding:0px;} .back{background-color:red;color:white;} AAAAAAAAA BBBBBBBBB CCCCCCCCC DDDDDDDDD
- A
- B
- C
- D
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。



