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程序设计有所帮助。

Javascript 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
关于JS模块化的知识点分享
Oct 16 Javascript
js实现页面图片消除效果
Mar 24 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
You might like
PHP 源代码压缩小工具
2009/12/22 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
Javascript之文件操作
2007/03/07 Javascript
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python实现图像外边界跟踪操作
2020/07/13 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
我未来的职业规划范文
2014/01/11 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
爱牙日活动总结
2014/08/29 职场文书
工作会议简报
2015/07/20 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
LeetCode189轮转数组python示例
2022/08/05 Python