div简单水平移动效果

  将img放置在div中,通过移动div达到移动img的效果,下面是水平移动。

  html文件:

<div style="float:left; width:1000px">
    <div style="position:absolute; left:10px; float:left; width:250px" id="fIdiv">
        <img id="firstImg" src="images/sjz1.JPG" />
    </div>
    <div style="position:absolute; left:220px; float:left; width:250px" id="sIdiv">
        <img id="secondImg" src="images/sjz2.jpg" />
    </div>
</div>

  js文件:

var i=10;
function transferImages(){
    var first = document.getElementById("fIdiv");
    var second = document.getElementById("sIdiv");
    first.style.position=‘absolute‘;
    second.style.position=‘absolute‘;

    var timer = setInterval(
        function(){
            if(first.style.left==‘440px‘)
                clearInterval(timer);
        i = i+10;
        first.style.left = i+‘px‘;
        second.style.left = (i+209)+‘px‘;
        },60);
}

  js文件中timer是setInterval()返回值,用于作为clearInterval()的参数,来结束循环调用,setInterval()中的function()是循环的语句。

  div的left值在正常赋值是:

<div style="position:absolute; left:10px"></div>

  因此在重新赋值的时候加上‘px‘单位。

时间: 2024-10-16 09:34:18

div简单水平移动效果的相关文章

js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~

如何实现两个div等高效果

如何实现两个div等高效果:在网页实际应用中,可能需要动态的实现两个div的等高效果,当然不仅限于div,例如一个网页分为左右两栏,一栏的高度可能需要根据内容自适应,也就是说高度不是固定的,而另一栏需要和它保持高度一致,那么就需要动态的设置高度.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse

HTML与CSS简单页面效果实例

本篇博客实现一个HTML与CSS简单页面效果实例 index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" rel="stylesheet" type="t

iOS开发——实用技术OC篇&amp;简单抽屉效果的实现

简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一些功夫了,我们这里知识简单的介绍怎么去实现,不过一般我们开发都是找别人做好的,也没必要烂肺时间,除非你真的是大牛或者闲的蛋疼. 其实关于抽屉效果就是界面有三个View,其实一个主View其他两个分别是左边和右边的View,我们分别为他们添加手势,实现左右滑动显示对应的View. 一:所以,首先我们需

table 和 div 简单布局

table 简单布局 <!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=&qu

自定义实现ExpandableListView收缩的简单动画效果

以下是 ExpandableListView 收缩的简单动画效果 1 /* 2 * Copyright (C) 2014 Gary Guo 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the L

js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser

CSS如何实现div的透明效果

CSS如何实现div的透明效果:在通常情况下设置div的透明度可以使用以下代码: filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; 以上代码可以将div设置为半透明,但是遗憾的是,IE6浏览器并不支持opacity属性. 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12681 更多内容可以参阅:http://www.softwhy.com/divcss/

JavaScript简单计算器效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单计算器效果</title> </head> <body> <form name="myForm"> 数字1:<input type="text" name="nu