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

<!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. 查看linux系统的开机时间/重启历史记录

    查看linux系统的开机时间/重启历史记录1.who -b命令[root@rusky opt]# who -b ---查看最后一次(上次)系统启动的时间 system boot Dec 27 05:0 ...

  2. tomcat-maven-plugin 插件使用

    配置 在pom.xm 加入以下xml. <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId&g ...

  3. android第一天错误

    1.自己写的activity并在AndroidManifest.xml中注册 在模拟机上运行时出现 No Launcher activity found! The launch will only s ...

  4. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  5. php 汉字排序

    <?phpheader("content-type:text/html;charset=utf-8");$array=array('重庆市','上海市','安徽省','吉林省 ...

  6. jquery widget开发——核心框架

    框架代码: $.widget("myns.myplugin", { //默认参数 options: { }, //初始化,控件生命周期内只运行一次 _init: function ...

  7. 如何使用composer？

    /** *@测试环境:我笔记本 本地xampp集成环境 *@操作系统:Windows 7 **/   安装方法:官方有很详细的介绍,这里就不重复造轮子了. 官方链接:http://docs.phpco ...

  8. QT使用WOL实现远程一键开机（局域网）

    功能:让关机的电脑一键开机,需要目标电脑的主板支持,并且插上网线: 效果:相当于手动按了一下目标电脑的开关机按钮. 没啥技术含量,简单开说... 1.获取目标机MAC地址 QByteArray sMa ...

  9. Linux文件系统学习笔记-1

       在Linux中, 一切皆文件,不论是目录,设备,套接字等都可以看成文件,而且每一个文件对应一个inode号,这是一一对应的关系. [root@oracle ~]# ls -il 总用量 2624 ...

  10. Oracle EBS-SQL (MRP-7):检查MRP计划运行报错原因之超大数据查询2.sql

    /*逐一运行检查计划运行超大数据*/ ---------------------------------------------------- -- PO Requisitions select * ...