html仿苹果桌面导航js css,JS+CSS仿苹果手机(Iphone)的滑动效果的焦点图
TABLE {
FONT-SIZE: 12px
}
.dis {
DISPLAY: block
}
.undis {
DISPLAY: none
}
#hot {
FILTER: progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=1.0); WIDTH: 240px; HEIGHT: 447px
}
#hot IMG {
WIDTH: 240px; HEIGHT: 447px
}
#info {
Z-INDEX: 50; MARGIN: -100px auto 0px; WIDTH: 240px; POSITION: absolute; HEIGHT: 132px
}
#info TABLE {
COLOR: #fff
}
#bot {
Z-INDEX: 100; MARGIN: 0px 9px; WIDTH: 240px; POSITION: absolute
}
.tit {
FILTER: Glow(color=#ffffff,strength=3); FONT: 20px/36px 黑体; COLOR: #000
}
.tx {
TEXT-INDENT: 1em; LINE-HEIGHT: 20px
}
A.lcblock {
COLOR: #000; TEXT-DECORATION: none
}
A.lcblock:hover {
COLOR: #fff; TEXT-DECORATION: none
}
#bot TD {
CURSOR: pointer
}
#bot TD.s {
BACKGROUND: url(http://www.webdm.cn/images/20101014/ar.gif) no-repeat center 50%
}
function getid(obj)//取对应id的元素
{
return document.getElementById(obj);
}
function getNames(obj, name, tij) {
var plist = obj.getElementsByTagName(tij);
var rlist = new Array();
for (i = 0; i < plist.length; i++) {
if (plist[i].getAttribute("name") == name) {
rlist[rlist.length] = plist[i];
}
}
return rlist;
}
function fiterplay(obj, num, t, name, c1, c2) {
var fitlist = getNames(obj, name, t);
for (i = 0; i < fitlist.length; i++) {
if (i == num) {
fitlist[i].className = c1;
}
else {
fitlist[i].className = c2;
}
}
}
function play(obj, num) {
var hot = getid("hot");
var pic = getid("hotimg");
var info = getid("info");
var bot = getid("bot");
try {
with (hot) {
filters[0].Apply();
fiterplay(pic, num, "div", "f", "dis", "undis");
fiterplay(info, num, "div", "f", "dis", "undis");
fiterplay(bot, num, "td", "f", "s", "");
filters[0].play();
}
}
catch (e) {
}
}
var n = 0;
function clearAuto() { clearInterval(autoStart); };
function setAuto() { autoStart = setInterval("auto(n)", 4800) }
function auto() {
var x = getNames(getid("bot"), "f", "td");
n++;
if (n > (x.length - 1)) { n = 0; }
play(x[n], n);
}
function format() {
var x = getNames(getid("bot"), "f", "td");
for (i = 0; i < x.length; i++) {
x[i].num = i;
x[i].onclick = function() { play(this, this.num); }
}
setAuto()
}
|
|||||||||
|
border=0>
border=0>
href="http://www.webdm.cn/"
target=_blank>男人与手机的共同点
class=tx>和手机一样,男人想成功也有几个必备要素。如果你有早晚会成功,如果没有,即使看似风光也不过是个运气好的傻小子。 |
border=0>
border=0>
href="http://www.webdm.cn/"
target=_blank>LG KU990推新色版本
全新包装的LG KU990
Viewty拥有白色、银色、红色、粉色、紫色等多种款式的配色方案。 |
background=http://www.webdm.cn/images/20101014/num.gif border=0>
name="f">
format();
网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码! |
html仿苹果桌面导航js css,JS+CSS仿苹果手机(Iphone)的滑动效果的焦点图相关推荐
- html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布,模仿苹果官网导航块的半透明效果。...
需求提要 我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
- 仿苹果的导航,有点凹陷的感觉
仿苹果的导航 也许很多人会用到吧. 网址:http://www.kriesi.at/wp-content/ ... l/kwicks_final.html 点击下载! 转载于:https://www. ...
- php仿苹果,关于8个超炫酷仿苹果应用的HTML5动画的图文详解
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
- iPhone 计算机 桌面,仿苹果电脑桌面软件 仿苹果桌面软件
有什么好用的windows10仿苹果的桌面导航软件 windows还是无法象真正的苹果系统那样漂亮的,如果你装了mac的虚拟机,就知道苹果系统是如何的好了. 怎么说呢,你装了后发现,那才叫享受,接着, ...
- Flutter 气泡背景效果 仿苹果桌面运动的气泡
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
- wpf仿苹果桌面图标动画效果
开局一张图后面全靠编. 源码下载地址:https://download.csdn.net/download/musx01230/10912990
- iphone桌面滑动效果html5,使用CSS Shapes实现滚动环绕iPhone X刘海效果
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 例如下面这个交互视频效果:http://t.cn/Rp01GKc ...
- 精仿苹果x开机android,800元高仿iPhone X以假乱真!更可怕的是奸商套路
原标题:800元高仿iPhone X以假乱真!更可怕的是奸商套路 每一代iPhone产品都不乏仿冒者,而iPhone X这样的高(zhuang)贵(bi)巅峰之作,同样少不了被模仿.抄袭,而从目前的情 ...
- 用js实现分享到随页面滚动而滑动效果
页面向上向下滚动,分享到的模块随着滑动. 要点: var scrtop =document.documentElement.scrollTop||document.body.scrollTop; va ...
- Css实现刘海,使用CSS Shapes实现滚动环绕iPhone X刘海效果
一.iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质,就是有个明显的刘海. 然后,也出现了一些酷酷的交互. 就是页面滚动的时候,列表会自动绕着iPhone X的刘海排列. ...
最新文章
- 零基础自学python教程-零基础人员可以学习python吗?|Python培训基础教程
- Android代码实现新建文件夹,并将文件保存到新建的文件夹中
- java语言主要因为具备了,Java语言的魅力
- ARM汇编编程基础之一 —— 寄存器
- 啥?分布式啥?啥事务?
- 随笔编号-04 AngularJS 相关小问题解决方案合集
- AI学习笔记(十八)NLP常见场景之情感分析
- python编程入门与案例详解-Python零基础必看的入门书藉:Python编程从入门到实践...
- 教你如何测试U盘读写速度?
- 发那科机器人xyz的方向_最全 | 发那科工业机器人示教器详细介绍
- 【git】小甲鱼Git教程《极客Python之Git实用教程》笔记二
- GO语言开源项目TOP 100
- 聚米移动广告平台——广告主不可错过的投放选择
- Python语言程序设计基础_实验1 Python程序设计基础_答案_通识教育必修课程_上海师范大学
- 企业内部信息安全管理——(一)风险识别和管控
- 活动倒计时的一些想法
- Mysql的下载、安装
- 【ironic】ironic介绍与原理
- cad 计算机图库,cad模型图库(cad图库怎么用)
- linux mint安装金山快盘