这几天学了点以前不知道的东西,特地放上来和大家分享一下.现在网页上面JS广告滚动条用的是越来越多了.方便漂亮是其特点,我们可以体会到JavaScript给我们带来的很多意想不到的特效.当然JS作用的还远不止这一点.兴奋之余也在思考用CSS来实现图片轮换效果,不过CSS还不能实现过渡效果,所以仅做研究吧.
看了书也搜索了资料大概思路是这样的:
1.模拟一个放映机,
2.镜头相当于一个大小固定的盒子
3.镜头后面(也就是胶片)相当于你想起换的图片
4.我们可以使用a标签锚链接的点击来实现胶片(图片)的切换
你可以先看看右面这个原理图:
PS:如果你对锚点比较生疏,可以去这里看看:http://www.blueidea.com/tech/web/2008/5883.asp
下面给出我的完整代码:(当然你可以自己写的哦)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS图片切换</title>
<style type="text/css">
*{ margin:0; padding:0;}
dl#menu{ position:relative; width:320px; height:240px; border:5px dashed #f00; overflow:hidden;}
#menu dt{ position:absolute; right:5px; bottom:3px;}
#menu dd{width:320px; height:240px; overflow:hidden; }
#menu dt a{ float:left; display:block; padding:1px 4px; border:1px solid #ccc; margin-left:2px; text-decoration:none; background:#666; color:#309; font-size:12px;}
#menu dt a:hover{ color:#FF0;}
</style>
</head><body>
<dl id="menu">
<dt><a href="#img1">1</a><a href="#img2">2</a><a href="#img3">3</a><a href="#img4">4</a></dt>
<dd>
<img src="1.jpg" id="img1"/>
<img src="2.jpg" id="img2"/>
<img src="3.jpg" id="img3"/>
<img src="4.jpg" id="img4"/>
</dd>
</dl>
</body>
</html>
这个我感觉还是要用js好，CSS做样式，js做行为
喜欢 js 但不精通！！！！
不错，很不错，学习了
加上滤镜不就有过渡效果了么？
其实这个例子只可以做学习用,真正要实现的话还是须要JS反配合的^!^
没错，js可以令过渡效果更精彩
是得好好研究js了哈!