多图展示滑动过渡效果- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 多图展示滑动过渡效果

Javascript: js返回当前网页的url; 简明json介绍; JavaScript在IE中“意外地调用了方法或属性访问”; JS获得鼠标位置（兼容多浏览器ie,firefox）修正版; JavaScript 基础问答四; 支持多浏览器(IE、Firefox、Opera)剪切板复制函数; js 解决“options为空或不是对象”; 走出JavaScript初学困境—js初学; JavaScript入门教程(6) Window窗口对象; JavaScript 快捷键设置实现代码; Extjs Ajax 乱码问题解决方案; JavaScript 实现模态对话框源代码大全; [原创]js 日期加红代码适用于各种cms; 论坛里点击别人帖子下面的回复，回复标题变成“回复 24# 的帖子”; [原创]javascript 改变字体大小方法集合; javascript 单行文字向上跑马灯滚动显示; 一个简单的javascript类定义例子; javascript 类定义的4种方法; javascript类继承机制的原理分析; firefox(火狐)和ie浏览器禁止右键和禁止复制的代码

No. « ‹ 183 184 185 186 › »

技术文章搜索

关键字

Javascript 中的多图展示滑动过渡效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 113 ::

收藏到网摘: n/a

实现表格中行点击时的渐扩效果！弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。

点击运行可以看到效果:

<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><img id="thumb0" src="ss_sml_pk0.jpg" width="106" height="106" alt="" /><script type="text/javascript" language="javascript">document.getElementById("thumb0").style.visibility = "hidden";</script></dd> <dd><img id="thumb1" src="ss_sml_pk1.jpg" width="106" height="106" alt="" /><script type="text/javascript" language="javascript">document.getElementById("thumb1").style.visibility = "hidden";</script></dd> <dd><img id="thumb2" src="ss_sml_pk2.jpg" width="106" height="106" alt="" /><script type="text/javascript" language="javascript">document.getElementById("thumb2").style.visibility = "hidden";</script></dd> <dd class="last"><img id="thumb3" src="ss_sml_pk3.jpg" width="106" height="106" alt="" /><script type="text/javascript" language="javascript">document.getElementById("thumb3").style.visibility = "hidden";</script></dd> </dl> </div> </body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

实现表格中行点击时的渐扩效果！弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。

Javascript 中的 多图展示滑动过渡效果

评论 (0) All

Javascript 中的多图展示滑动过渡效果