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

<!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上大量tcp端口处于TIME_WAIT的问题

    今天发现网站突然无法访问,登陆webserver已经无法连接mysql,转战mysql一看,发现竟然有三千多个TIME_WAIT连接,擦,被SYN攻击了?百度&&google,发现通过 ...

  2. Js触发ASP.NET Validation控件的验证, 同时获取前台验证结果(不包括CustomValidator)

    function CallValidate(group) { if (typeof (Page_ClientValidate) == "function") { Page_Bloc ...

  3. android——ObjectAnimator动画(一)

    直接贴上集中用法 package com.example.test; import com.example.test.views.CircleView; import android.animatio ...

  4. MVC之MVCSQO方法查询、排序、分页、投影

  5. sql server保留小数解决方法

    在数据库中,我们有时会用到小数,怎样在数据库中转化小数呢,下面是一些常用的方法. 1.使用Round(字段名/数字,小数保留位数)方法,如下所示: select Round(3.333,2) 结果如下 ...

  6. (转)C#创建datatable

    Asp.net DataTable添加列和行的方法 方法一: DataTable tblDatas = new DataTable("Datas"); DataColumn dc ...

  7. 为什么所有浏览器的userAgent都带Mozilla

    参看下面链接:<为什么所有的浏览器的userAgent都带Mozilla>

  8. MySQL server has gone away报错

    1.最近做插入数据库,然后一直报一个错.mysql server has gone away.(如下图) 查了好多资料,终于解决了.. 1.可能是连接超时..进入php.ini,修改wait_time ...

  9. 【Android类型SDK测试（一）】认识Android类型的 SDK

    (一)SDK是个什么东东 接触软件相关行业的同学都应该知道,SDK(即 Software Development Kit),软件开发包.其作用就是为开发某些软件提供一些便利的东西,包括工具 集合,文档 ...

  10. Git 分支管理详解

    大纲: 1.前言 2.创建分支 3.切换分支 4.合并分支(快速合并) 5.删除分支 6.分支合并冲突 7.合并分支(普通合并) 8.分支管理策略 9.团队多人开发协作 10.总结 注,测试机 Cen ...