js 页面特效,js元素获得焦点

js 页面特效,js元素获得焦点,纯JS焦点图特效实例(可一个页面多用)

下面小编就为大家带来一篇纯射流研究…焦点图特效实例(可一个页面多用)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

实例如下:

!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=utf-8' /

titleJS网页特效-无特效图片焦点图特效(可一个页面多用)/标题

style type='text/css '

* {填充:0;边距:0;字体大小:12px}

ul,李{列表式:无;}。索引焦点{ border:1px solid # CCC;填充:2px宽度:419像素身高:185像素边距:0自动;}。索引焦点聚焦框{宽度:419 px身高:185像素位置:相对;边距:0自动;位置:相对}。索引焦点。聚焦盒bigPic { width:419 px;身高:185像素溢出:隐藏;位置:相对}。索引焦点。聚焦盒bigPic李{宽度:419 px身高:185px}。索引焦点。聚焦盒bigPic img { width:419 px;身高:185px}。索引焦点。聚焦盒btn {高度:16px位置:绝对;右:8px底部:4pxz指数:11}。索引焦点。聚焦盒. BTN ul Li { width:15px;高度:15px行高:15px右边距:2px显示:块;背景:# fff浮动:左;文本对齐:居中;光标:指针}。索引焦点。聚焦盒btn .sel { width:15px;高度:15px背景:# B90101颜色:#fff}。索引焦点。聚焦盒picText _ BG { width:100%;高度:26px位置:绝对;左:0;底部:0;背景:# 000;滤镜:阿尔法(不透明度=50);/* IE */-moz-不透明度:0.5;/*MOZ,FF */不透明度:0.5;/*CSS3,FF1.5*/}。索引焦点。聚焦盒picText { width:100%;高度:26px行高:26px文本对齐:左对齐;字体粗细:粗体;边距:0自动;位置:绝对;左:0;底部:0;溢出:隐藏;z指数:10;}。索引焦点。聚焦盒picText a { padding-left:10px;颜色:# fff}

/风格

style type='text/css '

* {填充:0;边距:0;字体大小:12px}

ul,李{列表式:无;}。索引焦点{ border:1px solid # CCC;填充:2px宽度:419像素身高:185像素边距:0自动;}。索引焦点聚焦框{宽度:419 px身高:185像素位置:相对;边距:0自动;位置:相对}。索引焦点。聚焦盒bigPic { width:419 px;身高:185像素溢出:隐藏;位置:相对}。索引焦点。聚焦盒bigPic李{宽度:419 px身高:185px}。索引焦点。聚焦盒bigPic img { width:419 px;身高:185px}。索引焦点。聚焦盒btn {高度:16px位置:绝对;右:8px底部:4pxz指数:11}。索引焦点。聚焦盒. BTN ul Li { width:15px;高度:15px行高:15px右边距:2px显示:块;背景:# fff浮动:左;文本对齐:居中;光标:指针}。索引焦点。聚焦盒btn .sel { width:15px;高度:15px背景:# B90101颜色:#fff}。索引焦点。聚焦盒picText _ BG { width:100%;高度:26px位置:绝对;左:0;底部:0;背景:# 000;滤镜:阿尔法(不透明度=50);/* IE */-moz-不透明度:0.5;/*MOZ,FF */不透明度:0.5;/*CSS3,FF1.5*/}。索引焦点。聚焦盒picText { width:100%;高度:26px行高:26px文本对齐:左对齐;字体粗细:粗体;边距:0自动;位置:绝对;左:0;底部:0;溢出:隐藏;z指数:10;}。索引焦点。聚焦盒picText a { padding-left:10px;颜色:# fff}

/风格

脚本语言='javascript '

函数mainfun(mainObj,t){

函数getID(id){返回文档。getelementbyid(id)}

函数getTag(tag,obj){return (typeof obj=='object '?getID(obj)).getElementsByTagName(标记);}

函数alph(obj,n){ if(document。所有){ obj。风格。filter=' alpha(opacity=' n ')';}}

var cut=0;

var timer=

var num=getTag('li ',getTag('div ',getID(mainObj))[0]).长度;

var getpic=getTag('li ',getTag('div ',getID(main obj))[0]);

var getbtn=getTag('li ',getTag('div ',getID(main obj))[1]);

var gettext=getTag('li ',getTag('div ',getID(main obj))[2]);

for(I=0;inumI){获取pic[I]。风格。display=' nonegettext[I]。风格。display=' nonegetbtn[i].onclick=(函数{

返回函数(){ getbtn[i].sel ';changePic(一);} })(I);}

获取pic[cut]。风格。display=' block

getbtn[cut].sel ';

gettext[剪切]。风格。display=' block

getID(mainObj).onmouseover=function(){ clear interval(定时器);}

getID(mainObj).onmouseout=function(){ timer=setInterval(autoPlay,t);}

功能改变(ocut){

for(I=0;inumI){ cut=ocut;

获取pic[I]。风格。display=' none

getbtn[i].className=' '

gettext[I]。风格。display=' none

}

获取pic[cut]。风格。display=' block

getbtn[cut].sel ';

gettext[剪切]。风格。display=' block '

}

函数自动播放(){

//alert(剪切);

if(cut=num-1){cut=0}else{cut }

changePic(切);

}

timer=setInterval(autoPlay,t);

}

函数changeMenu(){

函数getID(id){返回文档。getelementbyid(id)}

函数getTag(tag,obj){return (typeof obj=='object '?getID(obj)).getElementsByTagName(标记);}

var sel=0;var menu=getID(' menu ');var getBtn=getTag('h2 ',菜单);var getUl=getTag('ul ',菜单);var num=getTag('h2 ',菜单)。长度;for(I=0;inumi ){

getUl[I]。风格。display=' none

getBtn[i].onclick=(函数{

返回函数(){

点击菜单(一);

}

})(一);

}

getUl[sel]。风格。display=' block

功能点击菜单(选择){

for(I=0;inumi ){

getUl[I]。风格。display=' none

}

getUl[sel]。风格。display=' block

}

}

/脚本

/头

body style=' background:URL(images/body BG。jpg)重复# 333;'

h1 style=' height:100px;行高:100像素字体大小:30px字体系列:'微软雅黑;颜色:# FFF;文本对齐:居中;背景:URL(图片/正文BG 3。jpg)重复-x左下角;'字体粗细:正常'无特效图片焦点图特效(可一个页面多用)/h1

div style=' background:# FFF;填充:50px '

!-效果开始-

div class='indexFocus '

div id='移动图片1 ' class='聚焦框'

div class='bigPic' id='oPic '

保险商实验所

lia href=' # ' img src=' images/ink _ 120615 _ 10。jpg ' alt='我们www.jb51.net' //a/li

lia href=' # ' img src=' images/ink _ 120615 _ 11。jpg ' alt='我们www.jb51.net' //a/li

lia href=' # ' img src=' images/ink _ 120615 _ 12。jpg ' alt='我们www.jb51.net' //a/li

lia href=' # ' img src=' images/ink _ 120615 _ 10。jpg ' alt='我们www.jb51.net' //a/li

lia href=' # ' img src=' images/ink _ 120615 _ 11。jpg ' alt='我们www.jb51.net' //a/li

/ul

/div

div class='btn' id='oBtn '

保险商实验所

li1/李

li2/李

李/李

li4/李

li5/李

/ul

/div

div class='picText' id='oText '

lia href=' https://www。jb51。net ' target=' _ blank ' web应用/a/李

lia href=' https://www。jb51。net ' target=' _ blank '它云动态/a/李

lia href=' https://www。jb51。net ' target=' _ blank ' html学习/a/李

lia href=' https://www。jb51。net ' target=' _ blank '图文特效集锦/a/李

lia href=' https://www。jb51。net ' target=' _ blank '文章特效集锦/a/李

/div

div class='picText_bg'/div

/div

/div

脚本类型=' text/JavaScript '主要乐趣('移动图片1 ',2000)/脚本

div style=' height:30px;'/div

div class='indexFocus '

div id='移动图片2 ' class='聚焦框'

div class='bigPic' id='oPic '

保险商实验所

lia href=' # ' img src=' images/ink _ 120615 _ 12。jpg ' alt='我们www.jb51.net' //a/li

lia href=' # ' img src=' images/ink _ 120615 _ 10。jpg ' alt='我们www.jb51.net' //a/li

lia href=' # ' img src=' images/ink _ 120615 _ 11。jpg ' alt='我们www.jb51.net' //a/li

/ul

/div

div class='btn' id='oBtn '

保险商实验所

li1/李

li2/李

李/李

/ul

/div

div class='picText' id='oText '

lia href=https://www。jb51。net ' target=' _ blank ' html学习/a/李

lia href=' https://www。jb51。net ' target=' _ blank '图文特效集锦/a/李

lia href=' https://www。jb51。net ' target=' _ blank '文章特效集锦/a/李

/div

div class='picText_bg'/div

/div

/div

脚本类型=' text/JavaScript '主要乐趣(' movepic 2 ',3000)/脚本

!-结束-

/div

div style=' height:200 px;颜色:# FFF;填充顶部:25px行高:28px文本对齐:居中;字体系列:'微软雅黑;'背景:url(images/bodyBg2.jpg)重复加在以-u结尾的法语词源的名词之后构成复数左上角'

p style=' font-size:16px;'我们www。jb51。FFF ' href=' https://www .jb51。net ' target=' _ blank ' www .jb51。净额/应付账款

/div

/body

/html

以上纯JS焦点图特效的例子(一页多用)是边肖分享的全部内容。希望给大家一个参考,多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: