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

<!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. margin四个属性的顺序

    margin-top ,margin-right ,margin-bottom ,margin-left .方向为 上右下左,顺时针方向, 值可以是: 百分比(基于父对象总高度或宽度的百分比) 长度值 ...

  2. Repository,UnitOfWork,DbContext(1)

    一.前言 终于到EF了,实在不好意思,最近有点忙,本篇离上一篇发布已经一个多星期了,工作中的小迭代告一段落,终于有点时间来继续我们的架构设计了,在这里先对大家表示歉意. 其实这段时间我并不是把这个系列 ...

  3. autoresizing代码实现

    主要解决父子控件之间的布局关系: /*     Flexible 灵活的,自由的          typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) ...

  4. C#调用WebService实例和开发(转)

    1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求, ...

  5. 【.NetRemoting-2】2015.09.17

    [Remoting架构] [1]是.NetFramework的一个重要组成 [2]框架的两个重要特性 [A]基本实现[B]可扩展/可定制 [各个组成部分] [1][客户端,客户端应用程序域] [组成] ...

  6. 设定MS SQL Server 2008定期自动备份

    1.说明 SQL Server2008 本身具有定期自动备份功能,我们只需要通过简单的配置就可以实现非常简单高效的自动备份功能. 2.打开SQL Server代理服务 要实现自动备份功能,首先要保证S ...

  7. ng事件中为变量的参数

    之前学习Angular时碰到过这种问题,绑定事件中传参为变量的问题. 举个例子吧,比如有这么一段代码: <button type='button' ng-click="showMsg( ...

  8. BottomSheetBehavior 之 java.lang.IllegalArgumentException: The view is not associated with BottomSheetBehavior

    AndroidRuntime: FATAL EXCEPTION: main Process: me.chunsheng.uberdriver, PID: 13674 java.lang.Runtime ...

  9. 转：说说JSON和JSONP

    前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...

  10. js循环遍历

    //获取多个用户id 一般用在复选框 cust_id = 1,2,3,4; var str = cust_id.split(",");          for (var key ...