编程 Javascript

jquery实现简单的轮换出现效果实例

Posted in Javascript onJuly 23, 2015

本文实例讲述了jquery实现简单的轮换出现效果。分享给大家供大家参考。具体如下：

<!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>Untitled Document</title>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
 $("#btn1").toggle(function(){
  $("#div2").animate({left:"300px"},500);
  $("#div1").animate({left:"0px"},500);
  $("#div2").animate({left:"-300px"},10);
 },function(){
  $("#div1").animate({left:"300px"},500);
  $("#div2").animate({left:"0px"},500);
  $("#div1").animate({left:"-300px"},10);
 })
})
</script>
<style type="text/css">
#outer{
 position:relative;
 width:600px;
 height:200px;
 overflow:hidden;
 background-color:#999;
}
#div1{
 position:absolute;
 width:300px;
 height:200px;
 top:0px;
 left:-300px;
}
#div2{
 position:absolute;
 width:300px;
 height:200px;
 top:0px;
 left:0px;
}
</style>
</head>
<body>
<div id="outer">
<div id="div1">
<img src="img/范筱梵-1024x768.jpg" width="300" height="200" />
</div>
<div id="div2">
<img src="img/美女高清壁纸【第二期】 (2).jpg" width="300" height="200" />
</div>
</div>
<input type="button" value="开始" id="btn1"/>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

jquery实现简单的轮换出现效果实例

- Author -

李荣飞

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery()函数的三种语法介绍

Oct 09 Javascript

JavaScript中操作Mysql数据库实例

Apr 02 Javascript

jQuery实现带延迟的二级tab切换下拉列表效果

Sep 01 Javascript

jQuery Ajax 上传文件处理方式介绍(推荐)

Jun 30 Javascript

JS清除字符串中重复值的实现方法

Aug 03 Javascript

浅谈jquery设置和获得checkbox选中的问题

Aug 19 Javascript

微信小程序生命周期详解

Oct 12 Javascript

JS实现移动端判断上拉和下滑功能

Aug 07 Javascript

浅谈在Vue-cli里基于axios封装复用请求

Nov 06 Javascript

JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【凹多边形的分离轴检测算法】

Dec 13 Javascript

详解使用WebPack搭建React开发环境

Aug 06 Javascript

js函数柯里化的方法和作用实例分析

Apr 11 Javascript

jquery实现简单实用的打分程序实例

Jul 23 #Javascript

javascript实现框架高度随内容改变的方法

Jul 23 #Javascript

js正则表达式中exec用法实例

Jul 23 #Javascript

JavaScript实现获得所有兄弟节点的方法

Jul 23 #Javascript

使用jquery实现仿百度自动补全特效

Jul 23 #Javascript

代码分析jQuery四种静态方法使用

Jul 23 #Javascript

javascript实现状态栏文字首尾相接循环滚动的方法

Jul 22 #Javascript