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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 基于jquery实现图片广告轮换效果代码

    基于jquery实现图片广告轮换效果代码

    效果图:实现代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

  • Jquery 实现图片轮换

    网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦.一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单.不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok. 反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件.一个网站要不了几个这种效果,先实现了再说吧.最后的效果还是很高大上的. 页面+JS代码 复制代码 代码如下: <script

  • JQuery分屏指示器图片轮换效果实例

    本文实例讲述了JQuery分屏指示器图片轮换效果实现方法.分享给大家供大家参考.具体分析如下: 在Web App大行其道的今天,分屏指示器用得非常广泛,从Android.到腾讯的Web OS等等.分屏指示器给人很好的用户体验,下面就实现一个分屏指示器,用于实现图片的简单轮换效果,仅抛砖引玉- 代码如下: <script type="text/javascript"> var curr = 0, next = 0, count = 0; $(document).ready(f

  • jquery 轮换显示 第一小个例子

    jquery 轮换显示 第一小个例子

    效果如下图所示:虽然是看了示例之后自己在写的 (就当是给自己一个鼓励吧 加油!) jquery 复制代码 代码如下: $(document).ready(function(){ var h3=$(".accordion h3"); $(".accordion h3:eq(0)").addClass("active");//1.首先获取第一个H3标签添加class: $(".accordion p:gt(0)").hide();

  • 基于jquery的热点内容轮换效果

    基于jquery的热点内容轮换效果

    效果图:核心代码: 复制代码 代码如下: <div class="blockB" collection="Y" > <h2><span>王牌栏目 Regular features</span></h2> <div id="regular_features" class="pp"> <div class="tabs"> <

  • JQUERY简单按钮轮换选中效果实现方法

    本文实例讲述了JQUERY简单按钮轮换选中效果实现方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>按钮轮换点击效果</title> <script type="text/javascript" src=

  • jquery 图片轮换效果

    jquery 图片轮换效果

    效果图:代码中存在的错误欢迎大家指正 复制代码 代码如下: /** * @author leepood * @title 图片自动轮换效果 * @version v2.0 * @E-Mail leepood@gmail.com * @notice:要显示图片的数目可以在setting里调整,但需要在imagesArray中加入相应图片的参数 */ function changeImages() { var setting={ 'width':'330px', 'height':'200px',

  • Jquery的Tabs内容轮换效果实现代码,几行搞定

    复制代码 代码如下: <!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>      <title>Jque

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

    本文实例讲述了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"> <h

  • jquery实现简单的拖拽效果实例兼容所有主流浏览器

    jquery实现简单的拖拽效果实例兼容所有主流浏览器

    最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数. jquery代码:fun.js 复制代码 代码如下: jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop = 0; return $(this).bind("mousemove",function(e){ if(_IsMove==1){ $(this).off

  • jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)

    jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)

    相对于上一篇,优化了拖拽的效果. js代码:fun.js 复制代码 代码如下: _MoveObj = null;//全部变量,用来表示当前div z_index = 0;//z方向 jQuery.fn.myDrag=function(){ _IsMove = 0; //是否移动 1.移动 _MouseLeft = 0; //div left坐标 _MouseTop = 0; //div top坐标 $(document).bind("mousemove",function(e){ if

  • jQuery实现简单的DIV拖动效果

    本文实例讲述了jQuery实现简单的DIV拖动效果.分享给大家供大家参考,具体如下: 创建一个HTML文件,复制以下代码进去,修改jquery文件(没有的到网上去下一个,我使用的是jquery-1.8.2),即可以运行了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • jQuery实现简单下拉导航效果

    jQuery实现简单下拉导航效果

    本文实例讲述了jQuery实现简单下拉导航效果.分享给大家供大家参考.具体如下: 这里粗略做一款基于jquery的下拉导航菜单效果,我觉得挺不错,虽然没有怎么美化,但是代码易懂,另外修补的空间也比较大,相信对学习CSS以及jquery的朋友有不小的帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-xl-down-show-nav-codes/ 具体代码如下: <!DOCTYPE HTML> <html> <

  • 基于jQuery实现简单的折叠菜单效果

    基于jQuery实现简单的折叠菜单效果

    本文实例讲述了JQuery实现简单的折叠菜单效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: Html代码如下: <div class="box"> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a>

  • jquery实现简单每周轮换的日历

    本文实例为大家分享了jquery实现简单每周轮换日历的具体代码,供大家参考,具体内容如下 先放出一张示例图 在进入页面时自动获取本地时间并激活(示例为2020年9月8日),再点击左按钮时倒退一周,右按钮前进一周.鼠标点击其中li标签时激活并在上方日期显示. 一个很简单的小日历,主要是项目中经常会使用到就单独拿出来写个demo.具体思路是,获取当前本地日期并推断出周一和周日进而获得本周全部的日期,真正存放的是一个长度为7的时间戳数组,只是显示的是日期,因为我认为利用时间戳做大部分处理比较直接简单.

  • jQuery实现简单轮播图效果

    本文实例为大家分享了jQuery实现简单轮播图效果的具体代码,供大家参考,具体内容如下 介绍:这里是我使用了计时器的方式实现图片每隔几秒切换然后添加了两个按钮用于上一张和下一张的切换 1.导入jQuery文件 <script src="jquery-3.5.1.js"></script> 2.设置图片的样式 <style> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 300px; b

  • Jquery实现简单的轮播效果(代码管用)

    废话不多说了,直接给大家贴jquery代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> <script

随机推荐