点击按钮开始整体右移，移动至蓝色区域全部显示出来停止。

<!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>无标题文档</title>

<style type="text/css">

*

{

    margin:0px;

    padding:0px;

}

#wai

{

    width:0px;

    height:600px;

}

</style>

</head>

<body>

<input id="anniu1" type="image" value="开始" src="12Nc43961Z-15Y04.png" style=" width:40px; height:40px;position:absolute;left:190px; top:300px; margin-left:0px; display:block" onclick="right()" />--按钮1

<input id="anniu2" type="image" value="开始" src="Kuaiwan.ico" style=" width:40px; height:40px;position:absolute;right:190px; top:300px; margin-right:0px; display:none" onclick="left()" />--按钮2

<div style="width:100%; height:600px; overflow:hidden">--限制图片大小，超出部分隐藏

    <div style="width:3200px; height:600px;">

        <div id="d1" style="width:1349px; height:600px; background-color:#309; float:left; margin-left:-1149px;">--蓝色图片

        </div>

        <div id="d2" style="width:1349px; height:600px; background-color:#F03; float:left;">--红色图片

        </div>

    </div>

</div>

</body>

<script type="text/javascript">

function right()//向右滑动

{

    if(parseInt(d1.style.marginLeft)<=-)//蓝色图片左边距小于-200，始终给红色留下200px显示

    {

        var a=parseInt(d1.style.marginLeft)+;

        d1.style.marginLeft=a+"px";

        var aa=parseInt(anniu1.style.marginLeft)+;

        anniu1.style.marginLeft=aa+"px";

        window.setTimeout("right()",);//每隔3毫秒蓝色图片和按钮1的边距各加5像素

    }

    else//if(parseInt(anniu1.style.marginLeft)>=949)

    {   

        anniu1.style.display="none";//图片和按钮1到头隐藏，显示按钮2，按钮1边距归零

        anniu2.style.marginRight="0px";

        anniu2.style.display="block";

    }

}

function left()//向左滑动

{

    if(parseInt(d1.style.marginLeft)>-)//图片和按钮2向左每隔3毫秒增加5px滑动，到左边距为-1149px时停止滑动

    {

        var b=parseInt(d1.style.marginLeft)-;

        d1.style.marginLeft=b+"px";

        var bb=parseInt(anniu2.style.marginRight)+;

        anniu2.style.marginRight=bb+"px";

        window.setTimeout("left()",);

    }

    else//if(parseInt(d1.style.marginLeft)<=-1149)滑动到头时，按钮1显示，按钮2隐藏，按钮2左边距归零

    {

        //alert("2");

        anniu2.style.display="none";

        anniu1.style.marginLeft="0px";

        anniu1.style.display="block";

    }

}

</script>

</html>

JAVASCRIPT——图片滑动效果的更多相关文章

  1. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  2. 《JavaScript 实战》：JavaScript 图片滑动切换效果

    看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...

  3. Qt浅谈之二十六图片滑动效果

    一.简介 博客中发现有作者写的仿360的代码,觉得其中图片滑动的效果很有意思,特提取其中的代码.并加上类似mac的画面移动的动画效果. 二.详解 1.代码一:界面滑动(QWidget) (1)slid ...

  4. 原生 JavaScript 图片裁剪效果

    图片裁剪程序效果如下,可鼠标操作.   拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CS ...

  5. 超实用的JavaScript代码段 Item5 --图片滑动效果实现

    先上图 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <me ...

  6. 简单的图片滑动效果插件 jQuery.iocnSlider.js

    近几日在制作一个客户引导页面,其中有一个图片展示而且带滑动的效果.好久没练手了,索性自己写一个插件吧. 依据设计原型,需要满足两套分辨率下图片不同的尺寸,所以在css中使用了media query的相 ...

  7. 033 Android App启动的闪屏效果+新手向导(多个图片滑动效果)+ViewPager使用

    1.目标效果 App启动时,出现闪屏效果(利用动画实现). App新手使用时,会出现新手向导效果. 2.XML页面布局 (1)闪屏页面 <?xml version="1.0" ...

  8. slides 带手势的图片滑动效果（用于移动终端）

    slidesjs 是基于jQuery开发的一款功能强大,是简单的幻灯片插件,但是需要要应用于移动终端的话,还需要考虑手势滑动时候图片切换功能. 此次,我就在slidesjs基础上扩展了两个swipe属 ...

  9. android viewflipper的使用 实现图片滑动效果

    package com.homer.viewflipper; import android.app.Activity; import android.os.Bundle; import android ...

随机推荐

  1. 看漫画，学 Redux

    Flux 架构已然让人觉得有些迷惑,而比 Flux 更让人摸不着头脑的是 Flux 与 Redux 的区别.Redux 是一个基于 Flux 思想的新架构方式,本文将探讨它们的区别. 如果你还没有看过 ...

  2. 从头开始——重装ubuntu

    一.装系统 环境:计算机原本装的系统是windows7+ubuntu 14.04,后来ubuntu的启动项被我手贱破坏了,进不了ubuntu,只能重新安装. 启动盘:使用UltraISO软碟通制作U ...

  3. 自定义视图控制器切换（iOS）

    在iOS开发过程中,通常我们会使用UINavigationController,UITabbarController等苹果提供的视图控制器来切换我们的视图.在iOS5之前,如果要自定义容器视图控制器很 ...

  4. 图解MapReduceMapReduce整体流程图

    1.图解MapReduceMapReduce整体流程图 并行读取文本中的内容,然后进行MapReduce操作 Map过程:并行读取三行,对读取的单词进行map操作,每个词都以<key,value ...

  5. 【Java基础】static关键字相关

    static关键字特点: 随着类的加载而加载. 优先于对象存在. 被所有对象共享 可以直接被类名调用. 使用注意: 静态方法只能访问静态成员. 但非静态成员可以访问静态成员. 静态方法中不能使用thi ...

  6. IOS创建单例的两种方法

    1.0  苹果官方写法:  static AccountManager *DefaultManager = nil; + (AccountManager *)defaultManager { if ( ...

  7. tostring的用法

    ToString()可空参数单独使用,同时可以加一个格式化参数,具体方式如下: . 取中文日期显示_年月 currentTime.ToString("y"); 格式:2007年1月 ...

  8. V - stl 的 优先队列 Ⅱ

    Description Because of the wrong status of the bicycle, Sempr begin to walk east to west every morni ...

  9. webservice跨服务器上传附件

    最近一个项目,用到文件上传功能,本来简单地使用upload控件直接post到服务器保存,简单实现了.后来考虑到分布是部署,静态附件.图片等内容要单独服务器(命名为B服务器,一台,192.168.103 ...

  10. git基础命令

     git pull 更新git status 查看文件状态git add .添加所有git commit -a -m "xxxx" 提交git push 推送至服务器git dif ...