当前位置:首页 > 日记 > 正文

js聚焦旋转木马效果的完美实现(a)

js聚焦旋转木马效果的完美实现(a)
最简单的旋转木马形式,通过JS控件中的PIC变换的显示属性,并通过调整图片左边缘。

结果如下:
实现代码:
* {
保证金:0;
填充:0;
列表样式:无;
文字装饰:无;
}
包{。
宽度:490px;
身高:170px;
保证金:100px汽车;
边境:1px solid # 000000;
职位:相对;
溢出:隐藏;
}
# PIC {
宽度:2450px;
身高:170px;
}
# PIC李{
浮点数:左;
}
#列表{
位置:绝对;
底部:10px;
左:150px;
}
#列表里{
浮点数:左;
宽度:15px;
身高:15px;
背景:# FFF;
保证金:0 10px;
边框半径:50%;
光标:指针;
}
在{ #列表。
背景:# e27a00;
}
沪指{。
上图:30px;
左:0;
}
下一个{。
上图:30px;
权利:0;
}
。昨日,一{。
位置:绝对;
字体大小:80px;
字体粗细:粗体;
颜色:# FFF;
WebKit的转型:在所有0.35s缓解
}
下一步:悬停,
沪指:悬停{。
背景:# CCC;
背景:RGBA(204, 204, 204,0.4);
}
显示{。
显示块;
}
隐藏{。
显示:无;
}
窗口。指针函数(){
var pic = document.getelementbyid('pic)。GetElementsByTagName(李的);
var list = document.getelementbyid('list)。GetElementsByTagName(李的);
变量prev = document.getelementbyid('prev);
VaR下= document.getelementbyid(下);
var指数= 0;
var定时器= null;

汽车();
对于(var i = 0;i < list.length;i++){
列表{我}索引= i;
表{我}。onmouseover =函数(){
ClearInterval(定时器);
更改(这个索引);
}
表{我}。onmouseout=函数(){
汽车();
}
PIC {我}。onmouseover =函数(){
ClearInterval(定时器);
}
PIC {我}。onmouseout=函数(){
汽车();
}
}
上期onclick =函数(){
ClearInterval(定时器);
指数;
如果(索引< = 0){
指数= list.length-1;
}
变化(指数);
}
其次,onclick =函数(){
ClearInterval(定时器);
索引+;
如果(索引>列表=长度){
指数= 0;
}
变化(指数);
}
昨日,移动鼠标=函数(){
ClearInterval(定时器);
}
上期onmouseout=函数(){
汽车();
}
其次,onmouseover =函数(){
ClearInterval(定时器);
}
二。onmouseout=函数(){
汽车();
}

功能的改变(curindex){
对于(var i = 0;i < list.length;i++){
表{我} classname = ;
PIC {我}。类名=隐藏;
}
表{ curindex }。类名= ;
PIC { curindex }。类名=显示;
指数= curindex;
}
函数自动(){
定时器= setInterval(){()函数(
索引+;
如果(索引>列表=长度){
指数= 0
}
变化(指数);
},2000);
}
}


>

以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。

相关文章

PS图象处理软件的东方神秘的面具的

PS图象处理软件的东方神秘的面具的

图象,面具,处理软件,神秘,电脑软件,最终结果如下: 你好,我想说,在我们开始学习PS,因为本教程比较长的东西,我要解释一下,我们期望从这个教程,它如何不同于其他的课程,我理解教程。首先,最重要的是,我想说,这是不是一个适合初学者的教程,我想说的是,人在…

WebStorm所遇到的问题的总结

WebStorm所遇到的问题的总结

电脑软件,WebStorm,WebStorm所遇到的问题的总结 我用了一点最近,WebStorm 像安卓工作室一样,它也是理念的IDE。当我想起我自己或月食时,我的同事们很早就习惯了,我记得六七年前就在那里。 记录你自己的问题 谢谢你帮助你的后端合作伙伴。 …

mysql语句注释简介

mysql语句注释简介

语句,注释,简介,电脑软件,mysql,MySQL支持三种注释方式: 1。从# 'characters从线的一端。 从2个。序列到终点。请注意-(双破折号)注释体例要求至少一个空格字符后二破折号(如空格,制表符,换行符等)。 从3。在序列的后面,序列是不一定在同一行的,所…

关于调侃和搞笑QQ签名

关于调侃和搞笑QQ签名

搞笑,电脑软件,QQ,在你的QQ空间签名中,你的空间里有讽刺和讽刺的句子吗 关于QQ签名的搞笑选择: 1)我不是在看着一个无知的过路人打你的心。 2)没有你,我的心情看谁看,我的签名为谁和改变。 3)最可悲的是你的眉毛皱了,我没有理由抱紧你。 4)时间…

PS层制作仿玉效果教程

PS层制作仿玉效果教程

教程,效果,电脑软件,PS,今天,它带来了简单的文本效果。仿玉纹理的文字效果不使用任何材质。通过分层方式达到预期效果,通过智能对象层实现模拟效果。 PSD文件下载请点击 设计素描 uff1a 主要过程: 新的文件,我用1500x1000像素的大小,你是自由…

AI如何画一个可爱的卡通小牛的头

AI如何画一个可爱的卡通小牛的头

小牛,画一,卡通,可爱,电脑软件,AI只是画了卡通小牛的脑袋。 软件名称:Adobe Illustrator CS6(AI CS6)简化绿色中文版(32位+ 64位)软件大小:205mb更新时间:2014-05-11 1。在Ai软件中,新建了一个新的800×800文档,选择一个椭圆工具来绘制一个椭圆图,…

如何画一本书的图标

如何画一本书的图标

图标,本书,画一,电脑软件,AI只是画一本书的图标。 软件名称:Adobe Illustrator(AI)CS5安装精简优化版(免注册版)软件大小:97.7mb更新时间:2014-05-16 1。在AI软件中,新建了一个新的800×800文档,选择了圆角矩形工具,绘制了两个圆形角度图,如图所示。…

PS图象处理软件的曲线函数的详细说

PS图象处理软件的曲线函数的详细说

函数,曲线,详细说明,图象,处理软件,该曲线是PS图象处理软件最独特的工具。今天,我们介绍使用曲线函数的方法和技巧。 曲线不是一个过滤器,它根据原始图像对图像作一些调整,不像产生不良影响的滤镜。 曲线并不是那么难以捉摸。只要你掌握了一…

如何ppt2013变化背景模板ppt2013教

如何ppt2013变化背景模板ppt2013教

教程,模板,背景,电脑软件,当然,许多操作系统安装在已建成的三个办公软件,通常安装的版本是ppt2003,推出了ppt2013版本,相比2003的功能必须更强大,它也需要一般的适应时间,下面小编就马上告诉ppt2013改变背景模板的方法。 通过ppt2013改变背景模…

为什么王望不能看聊天记录

为什么王望不能看聊天记录

王望,能看,聊天记录,电脑软件,问:我使用Ali Wangwang买家版聊天工具。现在我看不到卖家的聊天记录了。打开聊天记录窗口时,我总是将它显示为一个空白框。 答:首先,打开王望的参数设置,Windows在聊天消息记录集RARR;检查是否选择了救我;信息记录到…

MySQL5.7安装配置方法教程

MySQL5.7安装配置方法教程

安装配置,教程,方法,电脑软件,This tutorial for you to share the mysql5.7 installation configuration method for your reference, the details are as follows 相关说明mysql-installer-community-5.7.9.1版本: mysql-installer-web-…

WPS演示如何隐藏幻灯片WPS隐藏幻灯

WPS演示如何隐藏幻灯片WPS隐藏幻灯

教程,幻灯片,演示,电脑软件,WPS,使用WPS幻灯片隐藏功能,您可以隐藏一个页面幻灯片,不能被观众看到。具体操作是什么让我们告诉你如何用WPS隐藏幻灯片。 WPS演示隐藏幻灯片的方式。 在一般视图;幻灯片视图;选择需要隐藏的幻灯片;然后单击鼠标按…