`
akakori
  • 浏览: 12886 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

js写的一个简单的百叶窗效果

 
阅读更多

复制代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>百叶窗效果</title>
 6 <style>
 7     ul{margin:0; padding:0; text-align:left; width:400px; list-style:none; border:1px solid black;}
 8     ul li{ width:200px; height:50px; background:#0CF;margin:2px 0;}
 9 </style>
10 </head>
11 
12 <body>
13 <ul>
14     <li></li>
15     <li></li>
16     <li></li>
17     <li></li>
18     <li></li>
19     <li></li>
20 </ul>
21 <input id="btn1" type="button" value="start" />
22 </body>
23 </html>
复制代码

下面是js代码

复制代码
 1 <script>
 2     window.onload = function(){
 3         var btn = document.getElementById("btn1");
 4         var aLi = document.getElementsByTagName("li");
 5         var timer = null;
 6         var iNum = 0;
 7         btn.onclick = function(){
 8             setTimeout(function(){
 9                 timer = setInterval(function(){
10                     if(iNum == aLi.length){
11                         clearInterval(timer);
12                         return false;
13                     }
14                     startMove(aLi[iNum]);
15                     iNum++;
16                 },440);
17             },100);
18         }
19         
20         function startMove(obj){
21             var _timer = null;
22             var intance = 0;
23             _timer = setInterval(function(){
24                 
25                 if(intance == 200)
26                 {
27                     clearInterval(_timer);    
28                 }
29                 obj.style.marginLeft = intance+"px";
30                 intance += 10;
31                 },20);
32         }
33     }
34 </script>
分享到:
评论

相关推荐

    炫酷百叶窗效果

    4. **js**:这个文件夹内的JavaScript文件负责处理百叶窗效果的逻辑。例如,定义自动切换的定时器,处理点击事件以手动切换图片,以及管理当前显示的图片状态等。 在实际开发中,我们可能还需要考虑响应式设计,...

    js图片百叶窗效果

    【JavaScript图片百叶窗效果详解】 在Web开发中,动态效果常常能提升用户体验,而“图片百叶窗”效果就是这样一种吸引人的视觉呈现方式。本文将深入探讨如何使用纯JavaScript和CSS3实现这一效果,同时结合jQuery库...

    仿百叶窗效果代码DEMO

    【仿百叶窗效果代码DEMO】是一种编程技术的实现,它主要应用于视觉效果的创建,尤其是用户界面...通过理解和掌握以上知识点,开发者可以构建出一个流畅且引人入胜的仿百叶窗效果代码DEMO,提供给用户独特的视觉体验。

    图片效果-百叶窗效果

    总的来说,百叶窗效果是一个结合了技术与艺术的图像处理技巧,通过巧妙运用可以极大地丰富视觉表现,为作品增添层次和动感。无论是专业设计师还是业余爱好者,都可以通过学习和实践掌握这一技能,为自己的创意作品...

    js全屏自适应百叶窗切换效果.zip

    Anime.js是一个轻量级、高性能的动画库,支持多种动画类型,包括CSS属性、SVG、DOM属性和JavaScript对象。它的强大之处在于灵活性和易用性,开发者可以方便地创建复杂的动画序列,而无需深入理解底层的动画机制。 ...

    js 移动,划动,百叶窗,切换效果

    CSS3的`transition`和`animation`属性,配合JavaScript可以实现动态的百叶窗效果。 4. **切换效果(Transition Effects)** 切换效果是指元素在两种状态之间转换时的动画。比如在网页中,点击按钮后,一个新的内容...

    js实现百叶窗式幻灯片切换效果

    总结,JS实现的百叶窗式幻灯片切换效果结合了JavaScript编程、DOM操作、CSS动画等多种技术,是前端开发中的一个实用技巧。通过深入理解这些知识点并实践,开发者可以创造出更多创新的交互效果,提升网站的用户体验。

    js全屏自适应百叶窗切换效果代码.zip

    在JavaScript的世界里,实现动态和引人入胜的网页效果是一项常见的挑战,而"js全屏自适应百叶窗切换效果代码"就是一种创新的解决方案,它利用了anime.js这个强大的动画库来创建一个全屏的百叶窗式轮播图效果。...

    纯js百叶窗效果轮播图插件

    通过以上分析,我们可以看出,"纯js百叶窗效果轮播图插件"是一个结合了前端动画技术、DOM操作、事件处理、兼容性策略和用户体验设计的综合性项目,对于提升网站的互动性和视觉吸引力有着显著作用。尽管没有提供具体...

    css轮播图片百叶窗切换

    在本篇文章中,我们将深入探讨如何使用CSS3实现这种百叶窗效果。 **一、CSS3关键概念** 1. **选择器与层叠策略**:CSS3引入了更强大的选择器,如类选择器、ID选择器、伪类等,用于更精确地定位和操作元素。同时,...

    js水平垂直百叶窗切换

    百叶窗效果通常指的是在页面上,内容像百叶窗一样逐行或逐列展开或关闭,从而形成一种平滑、有节奏的过渡效果。这种效果可以通过纯CSS或者JavaScript来实现,但JavaScript提供了更大的灵活性和控制力。 在...

    flex 百叶窗效果

    Flex百叶窗效果是一种在网页设计中常见的动态视觉效果,主要利用CSS3的Flexbox布局模型来实现。这种效果通常用于展示一组元素,如图片或卡片,通过改变它们的顺序和透明度,模拟出百叶窗打开或关闭的动画。在本文中...

    三格百叶窗效果jQuery焦点图代码

    【三格百叶窗效果jQuery焦点图代码】是一种利用JavaScript库jQuery实现的动态展示图片的交互效果。在网页设计中,焦点图通常用于展示多张重要或相关的图片,并且允许用户通过滑动或点击来切换图片,提升用户体验。...

    javascript实现的网页页面打开时的百叶窗效果

    javascript实现的网页页面打开时的百叶窗效果

    百叶窗特效展示

    在压缩包中的"**w3cfuns百叶窗效果JQ**"文件中,很可能是包含了一个使用jQuery实现的百叶窗特效示例代码。这个文件可能包括HTML文件(用于结构和内容)、CSS文件(用于样式和布局)以及JavaScript文件(用于动画逻辑...

    图像百叶窗效果的源代码资源

    在计算机图形学领域,"图像百叶窗效果"是一种视觉过渡技术,通常用于动画或动态显示图像时,给人一种窗口百叶窗慢慢打开的效果。这种效果能够增加视觉吸引力,使图像的展示更加生动有趣。在本资源中,我们将深入探讨...

    CSS3图片百叶窗切换动画代码特效

    百叶窗效果的核心在于CSS3的`@keyframes`规则,它允许我们定义一个动画的过程,从开始到结束的每一帧状态。在这个案例中,可能有如下的关键帧定义: ```css @keyframes blind-switch { 0% { transform: rotateX(90...

    百叶窗效果的jQuery幻灯片插件

    总的来说,这个“百叶窗效果的jQuery幻灯片插件”是一个利用现代Web技术实现的创新互动组件,它为网页设计师和开发者提供了一种吸引用户注意力并提升用户体验的方式。通过学习和应用这个插件,可以提升开发者的技能...

    jQuery百叶窗效果插件blindify.zip

    jQuery百叶窗效果插件Blindify是一款专为网页设计师和开发者打造的高效工具,它提供了独特的视觉体验,使得在图像列表之间的切换如同百叶窗般动态、吸引人。这款插件利用JavaScript库jQuery的强大功能,实现了优雅的...

    jquery实现类似百叶窗拍摄 快门对开摄影拍摄效果.

    7. **响应式设计**:为了适应不同屏幕尺寸和设备,确保百叶窗效果在手机、平板和桌面端都能正常工作,我们需要进行响应式布局调整。使用媒体查询(`@media`)来改变图片的大小和位置。 通过以上步骤,我们可以利用...

Global site tag (gtag.js) - Google Analytics