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 相关文章推荐
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
php实现求相对时间函数
2015/06/15 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
Javascript 类型转换方法
2010/10/24 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
年终自我鉴定
2013/10/09 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
小学副班长竞选稿
2015/11/21 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers