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

<!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. Android应用程序组件Content Provider应用实例

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6950440 文简要介绍了Android应用程序 ...

  2. ORACLE物理存储结构

    1.查看数据库实例基本信息: SQL> SELECT DBID,NAME,CREATED,LOG_MODE,OPEN_MODE,FORCE_LOGGING,CURRENT_SCN,FLASHBA ...

  3. Bootstrap的datepicker控件

    为input 控件的text 添加datepicker()方法后,原本的控件change事件无法正常触发.原因是项目中同时使用了用了jquery ui,碰巧它里面也有一个datepicker,名字一模 ...

  4. Median of Two Sorted Arrays(Java)

    求2个数组的中位数 方法很多 但是时间复杂度各异 1利用数组copy方法先融合两个数组,然后排序,找出中位数 import java.lang.reflect.Array; import java.u ...

  5. 003 assert简述

  6. Tomcat 改BUG之 localhost:8080 404

    经过研究,发现造成该问题的原因可能是: 1.默认的80端口被占用: 2.服务-->apache tomcat未开启: 3.有资料称,是因为设备64位或32位,和软件不匹配: 4.(也有资料说是j ...

  7. qt界面不显示的原因

    用qt designer弄了一个qq.ui 新建一个空项目,把qq.ui加入,新建一个qq类,qq.h如下 #ifndef QQ#define QQ #include <QMainWindow& ...

  8. 安装TDM-GCC

    TDM-GCC是一组免费的编译器套件,有32位和64位两种版本.其中64位版既可以编译生成64位的可执行文件,又可以编译生成32位的可执行文件.从TDM-GCC的官网可以下载到相应的安装包,安装完成后 ...

  9. C++标准程序读书笔记-第三章错误和异常处理

    1.命名空间(namespace)std C++标准程序库中的所有标示符都被定义于一个名为std的namespace 2.标准异常类别 (1)语言本身或标准程序库所抛出的所有异常,都派生自基类exce ...

  10. 变形课hd1181（DFS）

    变形课 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total Submis ...