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 相关文章推荐
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
JavaScript组合模式---引入案例分析
May 23 Javascript
原生JS实现多条件筛选
Aug 19 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
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
php 禁止页面缓存输出
2009/01/07 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
angularjs基础教程
2014/12/25 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
跟老齐学Python之??碌某?? target=
2014/09/12 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
详解python UDP 编程
2020/08/24 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
实习教师自我鉴定
2013/09/27 职场文书
酒店应聘自荐信
2013/11/09 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
中式结婚主持词
2014/03/14 职场文书
分层教学实施方案
2014/03/19 职场文书
张丽莉观后感
2015/06/16 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
Mysql文件存储图文详解
2021/06/01 MySQL
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL