巧用CSS滤镜制作绚丽图片播放效果

中华圣国放光辉

中华圣国放光辉

2016-02-19 23:11

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的巧用CSS滤镜制作绚丽图片播放效果,过去的都会过去,迎接崭新的开始,释放更美好的自己。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)    CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次,我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。

  实现思路:使用revealTrans滤镜制作出超弦图片播放的效果,并每张图片有各自的链接地址。

  制作方法:

  1、在head中插入JS代码:

SCRIPT language=JavaScript1.2
function reapply(){
setTimeout("slideit()",800)
return true
}
window.onerror=reapply
/SCRIPT
SCRIPT language=JavaScript1.1
!--
//preload images
var image1=new Image()
image1.src=图片地址"
var image2=new Image()
image2.src=图片地址"
var image3=new Image()
image3.src=图片地址"
var image4=new Image()
image4.src=图片地址"
var image5=new Image()
image5.src=图片地址"
var image6=new Image()
image6.src=图片地址"
var image7=new Image()
image7.src=图片地址"
var image8=new Image()
image8.src=图片地址"
var image9=new Image()
image9.src=图片地址"
//--
/SCRIPT
  其中:images/图片地址为显示图片的路径,可按实际情况修改。

  2、在body中插入代码:onload=slideit()

  3、在页面中插入图片。

     
并在图片img中插入:style="FILTER: revealTrans(Duration=2, Transition=23)",并命名为:name=slide
  完整代码:img src=连接地址"images/图片地址" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide

  4、给图片加超链接:a href="JavaScript:slidelink()"

  5、加入代码:
SCRIPT
!--
////change number of images below 
var number_of_images=9
//change speed below (in seconds)
var speed=3
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.item(0).Apply()
document.images.slide.src=eval("image"+step+".src")
if (document.all)
slide.filters.item(0).Play()
whichimage=step
if (stepnumber_of_images)
step++
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000+3000)
else
setTimeout("slideit()",speed*1000)
}
function slidelink(){
if (whichimage==1)
top.location.href=图片地址"/index.HTML"
if (whichimage==2)
top.location.href=图片地址"/news.HTML" 
if (whichimage==3)
top.location.href=图片地址"/game.HTML" 
if (whichimage==4)
top.location.href=图片地址"/music.HTML" 
if (whichimage==5)
top.location.href=图片地址"/sport.HTML" 
if (whichimage==6)
top.location.href=图片地址"/radio.HTML" 
if (whichimage==7)
top.location.href=图片地址"/travel.HTML" 
if (whichimage==8)
top.location.href=图片地址"/card.JSP" 
else if (whichimage==9)
top.location.href=图片地址"/study.HTML" 
}
/SCRIPT
  其中:各链接地址相对应head中插入的JS代码中的图片。

  注意,页面地址必须与图片张数相对应。
展开更多 50%)
分享

猜你喜欢

巧用CSS滤镜制作绚丽图片播放效果

Web开发
巧用CSS滤镜制作绚丽图片播放效果

巧用滤镜制作绚丽图案

PS PS基础 ps平面设计教程 ps去水印教程
巧用滤镜制作绚丽图案

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

巧用滤镜制作绚丽的节日烟花

PS PS基础 ps平面设计教程 ps去水印教程
巧用滤镜制作绚丽的节日烟花

图片CSS滤镜-发光效果

Web开发
图片CSS滤镜-发光效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

巧用滤镜制作布帘效果

电脑网络
巧用滤镜制作布帘效果

photoshop滤镜制作绚丽光芒效果

PS
photoshop滤镜制作绚丽光芒效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Firefox和IE通用的三则网站重构实用技巧

Firefox和IE通用的三则网站重构实用技巧

Windows 7系统右键快捷问题

Windows 7系统右键快捷问题
下拉加载更多内容 ↓