javascript制作百叶窗
来源:互联网 发布:kali linux dns设置 编辑:程序博客网 时间:2024/03/29 05:07
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>div{border: 1px black solid;width: 400px;height: 400px;overflow: hidden;}img{width: 400px;height: 400px;position: relative;}td{width: 30px;text-align: center;background-color: antiquewhite;}tr{position: absolute;top: 360px;left: 60px;}.cs2{background-color: antiquewhite;opacity: 0.5;}.cs1{border: 1px yellow solid;}</style></head><body><div id="img" onmousemove="press()" onmouseout="continues()"><img src="img/0f0dcaacd5ddc288.jpg" /><img src="img/205f6fb8ba70846a.jpg" /><img src="img/2234ddd994a210d8.jpg" /><img src="img/3adbafb7c9e61e1a.jpg" /><img src="img/884f44ae49cac8ea.jpg" /><img src="img/b8f7b9a461029a95.jpg" /><img src="img/cedf07521a58a923.jpg" /><img src="img/f2f2d6fd1ff7c772.jpg" /></div><table cellpadding="0px" cellspacing="10px" ><tr><td class="cs2" id="td0" onclick="show(0)">1</td><td class="cs1" id="td1" onclick="show(1)">2</td><td class="cs1" id="td2" onclick="show(2)">3</td><td class="cs1" id="td3" onclick="show(3)">4</td><td class="cs1" id="td4" onclick="show(4)">5</td><td class="cs1" id="td5" onclick="show(5)">6</td><td class="cs1" id="td6" onclick="show(6)">7</td><td class="cs1" id="td7" onclick="show(7)">8</td></tr></table></body><script>var index = 0;/*滚动一张图片*/function show(type){index = type;/*获取div对象,一次切换一张图片*/var onePicter = document.getElementById("img");//alert(onePicter)/*由于图片大小不一的原因*/onePicter.scrollTop = 406 * index ;/*同步数字控件的样式*/for(var i = 0; i <= 7; i++){eval("td"+i).className ="cs1";}eval("td"+index).className="cs2";}/*自动滚动*/function autoMove(){index++;if(index > 7)index = 0;show(index);}/*定时自动滚动*/var set = window.setInterval(autoMove,1000);/*暂停*/function press(){window.clearInterval(set);}/*继续*/function continues(){set = window.setInterval(autoMove,1000);}</script></html>
阅读全文
0 0
- javascript制作百叶窗
- 百叶窗
- 用JavaScript实现页面百叶窗效果
- javascript实现七屏百叶窗效果
- 采用gdiplus 制作图像特效----图像特效(扫描、马赛克、百叶窗。。。)
- silverlight百叶窗
- 百叶窗特效
- 实现百叶窗效果图
- asp百叶窗实现
- flex 百叶窗效果
- flex百叶窗效果
- felx百叶窗效果
- 页面产生百叶窗脚本
- 窗体百叶窗效果
- J2ME实现百叶窗效果
- 百叶窗式面板组
- jQuery滤镜百叶窗幻灯片
- WPF Clip实现百叶窗
- RatingBar的基本使用和自定义样式
- c++作业六
- 基于华为产品的高校云数据中心建设规划设计方案
- 实训周
- 数据库锁机制 很详细的教程,易懂
- javascript制作百叶窗
- 一些Android笔试题
- 提升效率的一些小工具推荐
- c++第五次作业
- Codeforces 622C Not Equal on a Segment (并查集思想)
- 冒泡排序-BubbleSort
- 解决Cython在Window下Python2.7中:Unable to find vcvarsall.bat的问题
- SDUT-离散题目13
- HDU1506