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 相关文章推荐
TBCompressor js代码压缩
Jan 05 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
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
如何将数据从文本导入到mysql
2006/10/09 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
python列表操作实例
2015/01/14 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python如何建立全零数组
2020/07/19 Python
python lambda的使用详解
2021/02/26 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
院药学专业个人求职信
2013/09/21 职场文书
工程地质勘察专业大学生求职信
2013/10/13 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
总经理秘书工作职责
2013/12/26 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
高中生评语大全
2014/04/25 职场文书
医药销售自荐书
2014/05/29 职场文书
中班下学期个人总结
2015/02/12 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书