繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
典型特效
按钮特效
页面背景
鼠标特效
时间日期
状态特效
图象特效
cookie
下拉菜单
链接特效
导航菜单
页面导航：
首页
→
网络编程
→
JavaScript
→
网页特效
→
图象特效
→ 正文内容
多图展示滑动过渡效果
发布：dxy 字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<base href='http://demo.rexsong.com/200508/image_glide/'> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>ß | Fyrebase™</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <style type="text/css" media="screen">@import url("base.css");</style> <script type="text/javascript" language="javascript"> var thumbCount = 4; </script> <script type="text/javascript" language="javascript" src="base.js"></script> </head> <body> <div id="fbMaster"> <dl id="pNav"> <dt><img src="images/logo_fyrebase.gif" width="190" height="58" alt="Fyrebase.com Logo" /></dt> <dd><a class="active" title="">Paparazzi Kings</a></dd> <dd><a href="index.html?pid=aadree" title="">Aadree</a></dd> <dd><a href="index.html?pid=c9" title="">Cloud 9</a></dd> <dd><a href="index.html?pid=va" title="">Vin Australis</a></dd> <dd><a href="index.html?pid=dkd" title="">David K Difference</a></dd> </dl> <dl id="content"> <dt> <div> <span id="zoom"><img id="zoom0" src="ss_lrg_pk0.jpg" width="514" height="432" alt="" /><img id="zoom1" src="ss_lrg_pk1.jpg" width="514" height="432" alt="" /><img id="zoom2" src="ss_lrg_pk2.jpg" width="514" height="432" alt="" /><img id="zoom3" src="ss_lrg_pk3.jpg" width="514" height="432" alt="" /></span> </div> <script type="text/javascript" language="javascript"> document.getElementById('zoom').style.left = -514 + 'px'; document.getElementById("zoom1").style.visibility = "hidden"; document.getElementById("zoom2").style.visibility = "hidden"; document.getElementById("zoom3").style.visibility = "hidden"; </script> </dt> <dd><a title=""><img id="thumb0" src="ss_sml_pk0.jpg" width="106" height="106" alt="" /></a><script type="text/javascript" language="javascript">document.getElementById("thumb0").style.visibility = "hidden";</script></dd> <dd><a title=""><img id="thumb1" src="ss_sml_pk1.jpg" width="106" height="106" alt="" /></a><script type="text/javascript" language="javascript">document.getElementById("thumb1").style.visibility = "hidden";</script></dd> <dd><a title=""><img id="thumb2" src="ss_sml_pk2.jpg" width="106" height="106" alt="" /></a><script type="text/javascript" language="javascript">document.getElementById("thumb2").style.visibility = "hidden";</script></dd> <dd class="last"><a title=""><img id="thumb3" src="ss_sml_pk3.jpg" width="106" height="106" alt="" /></a><script type="text/javascript" language="javascript">document.getElementById("thumb3").style.visibility = "hidden";</script></dd> </dl> </div> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
多图展示滑动过渡效果
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
多图幻灯Wipe擦洗效果
下一篇文章：
动感超强的JS图片轮换特效
·在百度中搜索关于“
多图展示滑动过渡效果
”相关内容
·在谷歌中搜索关于“
多图展示滑动过渡效果
”相关内容
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
非常不错的javascript 图片慢慢下层效果
又一个小巧的图片预加载类
DHTML Slide Show script图片轮换
自适应图片大小的弹出窗口
弹出自适应图片大小的窗口弹出窗口根据图
推荐自用 Javascript 缩图函数 (onDOMLoa
用js 让图片在 div或dl里 居中，底部对齐
鼠标移动到一张图片时变为另一张图片
比较方便的onMouseWheel缩放图片效果
一段非常简单的让图片自动切换js代码
最 近 更 新
ＪＳ＋ＦＬＡＳＨ幻灯片播放图片脚本，整
又一个小巧的图片预加载类
用js 让图片在 div或dl里 居中，底部对齐
img的onload的另类用法
纯js无flash仿搜狐女人频道FLASH图片切换
jb51站长推荐的用js实现的多浏览器支持的
一段非常简单的让图片自动切换js代码
鼠标图片振动代码
用javascript制作放大镜放大图片
用new Image()预先加载图片真的有用吗？
热 点 排 行
真正的连续滚动图片
推荐一个不错的图片浏览效果
ＪＳ＋ＦＬＡＳＨ幻灯片播放图片
纯js无flash仿搜狐女人频道FLASH
左右图片循环滚动停顿一下后继续
多图展示点击切换效果模拟的flas
奇妙的Javascript图片放大镜
图片向上滚动
图片从右至左滚动JS
JS实现全景图效果360度旋转
文章评论
共有 位脚本之家网友发表了评论我来说两句