JQuery实现简单的图片滑动切换特效


Posted in Javascript onNovember 22, 2015

JQuery实现简单的图片滑动切换特效

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>t图片的滑动</title>
  <meta charset="utf-8" />
  <style type="text/css" >
    *{
      margin:0;
      padding:0;

    }
    #main{
      width:1089px;
      height:360px;
      margin:100px;
      background:url(../image/7.png);
    }
    ul li{
      list-style:none ;
      width:100px;
      height:360px;
      float:left;
    }
    a{
      color:#ffffff;
      text-decoration:none;
    }
    .txt{
      width:100px;
      height:360px;
      float:left;
      background:rgb(182, 255, 0);
    }
    p{
      font-family :"Arial.black",Gadugi.sans-serif ;
      font-size:18x;
      position:relative ;
      width:18px;
      font-weight:bold ;
      margin-top :120px;
      margin-left:48px;
    }
    .li1 {
      background: url( ../image/43.png);
    }
    .li2{background: url( ../image/42.png);}
    .li3{background: url( ../image/39.png);}
    .li4{background: url( ../image/47.png);}
  </style>
  
</head>
<body>
  <div id="main">
    <ul>
      <li class=" li1"><a href=" #"><div class=" txt"><p>风景1</p></div></a></li>
      <li class=" li2"><a href=" #"><div class=" txt"><p>风景2</p></div></a></li>
      <li class=" li3"><a href=" #"><div class=" txt"><p>风景3</p></div></a></li>
      <li class=" li4"><a href=" #"><div class=" txt"><p>风景4</p></div></a></li>
    </ul>
  </div>
  <script type="text/javascript" src="../Jqurey/jquery.min.js"></script>
  <script >
    $('ul li').hover(function(){
      $(this).stop(true).animate({ width: '789px' }, 500).siblings().stop(true).animate({width:'100'},500);
    })
  </script>
</body>
</html>

JQuery实现简单的图片滑动切换特效

jQuery图片从下往上滚动效果是一款jquery animate方法制作的图片从下往上滚动效果。

<!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>jQuery实现图片从下往上滑动切换效果</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.box .box1').mouseover(function(){
		$(this).stop().animate({"top":"-514px"}, 200); 
	})
	$('.box .box1').mouseout(function(){
		$(this).stop().animate({"top":"0"}, 200); 
	})
})
</script>

</head>
<body>

<div id="in_ct">
<!----------in_ct开始---------->
	<div class="in_ct">	
 	<!----------in_ct1 开始---------->
   <div class="in_ct1">
   	<ul class="box">
     <li>
      <div class="box1">
       <div class="toll_img"><img src="images/in_img1.jpg" width="272" height="514"/></div>
       <div class="toll_info"><a href="" target="_blank"><img src="images/in_img1_ho.jpg" height="514" width="272" /></a></div>
      </div>
     </li>
     <li>
      <div class="box1">
       <div class="toll_img"><img src="images/in_img2.jpg" width="272" height="514"/></div>
       <div class="toll_info"><a href="" target="_blank"><img src="images/in_img2_ho.jpg" height="514" width="272" /></a></div>
      </div>
     </li>
     <li>
     	<div class="box1">      
       <div class="toll_img"><img src="images/in_img3.jpg" width="272" height="514"/></div>
       <div class="toll_info"><a href="" target="_blank"><img src="images/in_img3_ho.jpg" height="514" width="272" /></a></div>
      </div>
     </li>
     <li>
     	<div class="box1">
       <div class="toll_img"><img src="images/in_img4.jpg" width="272" height="514"/></div>
       <div class="toll_info"><a href="" target="_blank"><img src="images/in_img4_ho.jpg" height="514" width="272" /></a></div>
      </div>
     </li>
    </ul> 
   </div>
  <!----------in_ct1 结束---------->
	</div>
<!----------in_ct结束---------->
</div>
</body>
</html>

上演示图

JQuery实现简单的图片滑动切换特效

Javascript 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
理解javascript中DOM事件
Dec 25 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
js实现简单计算器
Nov 22 #Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 #Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 #Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 #Javascript
分享经典的JavaScript开发技巧
Nov 21 #Javascript
jQuery实现分隔条左右拖动功能
Nov 21 #Javascript
超详细的javascript数组方法汇总
Nov 21 #Javascript
You might like
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
javascript每日必学之循环
2016/02/19 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
js new Date()实例测试
2019/10/31 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python生成器的使用方法
2013/11/21 Python
python+opencv实现动态物体识别
2018/01/09 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
酒店保洁主管岗位职责
2013/11/28 职场文书
群教班子对照检查材料
2014/08/26 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
初中家长评语和期望
2014/12/26 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
起诉状范本
2015/05/20 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android