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 相关文章推荐
jquery DOM操作 基于命令改变页面
May 06 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 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
You might like
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
JS前端笔试题分析
2016/12/19 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
vue全局使用axios的方法实例详解
2018/11/22 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
[00:14]护身甲盾
2019/03/06 DOTA
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
商务英语专业求职信
2014/06/26 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
小区环境卫生倡议书
2015/04/29 职场文书