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 相关文章推荐
没有document.getElementByName方法
Aug 19 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
用php过滤危险html代码的函数
2008/07/22 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
js 匿名调用实现代码
2009/06/19 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
Angular的$http与$location
2016/12/26 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
解读! Python在人工智能中的作用
2017/11/14 Python
python实现简单成绩录入系统
2019/09/19 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
企业安全生产承诺书
2014/05/22 职场文书
环保公益策划方案
2014/08/15 职场文书
2015年招聘工作总结
2014/12/12 职场文书
中学校园广播稿
2015/08/18 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
Python数据分析之绘图和可视化详解
2021/06/02 Python