这篇文章主要介绍了射流研究…实现非常简单的焦点图切换特效,是一个非常简单的射流研究…焦点图切换效果,涉及Java语言(一种计算机语言,尤用于创建网站)描述语言操作鼠标事件与图片的相关技巧,需要的朋友可以参考下
本文实例讲述了射流研究…实现非常简单的焦点图切换特效的方法。分享给大家供大家参考。具体分析如下:
这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考
!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN '
http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。' org/1999/XHTML '
头
meta http-equiv=' Content-Type ' Content=' text/html;charset=gb2312' /
标题无标题文档/标题
style type='text/css '
* {边距:0;填充:0;}
ul,李{列表式:无;}。mid { margin:0 auto;}。区域{
宽度:240像素高度:270像素
溢出:隐藏;背景:# 999;
边距-顶部:150像素;位置:相对;
}
#pic_list {
位置:相对;
}
#pic_list li {
位置:绝对;可见性:隐藏;
}
#pic_list li.show {
可见性:可见;
}
#pic_list li img {
垂直对齐:居中;
}。按钮{
宽度:240像素高度:20px
行高:20px背景:# ccc
位置:绝对;底部:0px
}
#按钮{
浮动:对;
}
#按钮李{
浮动:左;宽度:20px高度:20px
文本对齐:居中;保证金:0 3px
字体系列:“Arial”;字体大小:12px
颜色:# fff背景:# 000;
}
#按钮李. current {
背景:# f00光标:指针;
}
/风格
/头
身体
div class='区域中部'
div id='imgbox' class='bbbb '
ul id='pic_list' class='aaaa '
李'显示id='一'
img src=' images/1317279971 _ 77011100。jpg ' width=' 240 '/
/李
李id='二'
img src=' images/1317279972 _ 01691900。jpg ' width=' 240 '/
/李
李id='三'
img src=' images/1317279973 _ 69082200。jpg ' width=' 240 '/
/李
李id='四'
img src=' images/1317281054 _ 38572100。jpg ' width=' 240 '/
/李
李id='五'
img src=' images/1317281056 _ 61630800。jpg ' width=' 240 '/
/李
/ul
/div
div class='button' class='dddd '
ul id='button' class='cccc '
Li class=' current ' id=' but _ one ' 1/Li
李id=' but _ two ' 2/李
李id=' but _ three ' 3/李
李id=' but _ four ' 4/李
李id=' but _ five ' 5/李
/ul
/div
/div
脚本类型='文本/javascript '
(函数(){
var imgbox=document。getelementbyid(' imgbox ');
var pic _ list=document。getelementbyid(' pic _ list ');
var pics=pic _ list。getelementsbytagname(' Li ');
var button=文档。getelementbyid(“button”).getElementsByTagName(' Li ');
var p;
定义变量启动;
函数自动播放(start){ for(I=start;ibutton.lengthi ){
//设置起始值为开始参数。
(函数(){
var p=I;
//为p赋值一。我等于0,1,2,3,4;
按钮[我].onmouseover=function change(){
//按钮[0],按钮[1],按钮[2],按钮[3],按钮[4]
//onmouseover可以触发函数;
for(j=0;JT这个。父节点。子节点。长度;j ){
//以这(当前触发事件的元素)为起点,的父节点的所有子节点
//的长度值为最高值,开始遍历。
this.parentNode.childNodes[j].类名=" ";
//以这(当前触发事件的元素)为起点
//的父节点的所有子节点的类名为空。危险慎用。
}
这个。class name=" current
//这个。即当前触发onmouseover的元素的类名为'当前;
for(m=0;mpics.lengthm ){
//以图片长度为最高值进行遍历。遍历图片。
图片[m]的缩写.类名=" ";
//清空所有生产信息控制系统数组中所有元素的类名;
if (m==p){
//当m=p(p==I)所以m=i时,触发下列函数
图片[m]的缩写.展示
//图片的第m个元素的类名值为展示;m在这里等于我;
}
}
}
})();
}
}
自动播放(0);
})();
/脚本
/body
/html
希望本文所述对大家的Java语言(一种计算机语言,尤用于创建网站)描述语言程序设计有所帮助。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。