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 相关文章推荐
js获取提交的字符串的字节数
Feb 09 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
原生js实现日期联动
Jan 12 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
react实现换肤功能的示例代码
Aug 14 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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php header示例代码(推荐)
2010/09/08 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
理解javascript回调函数
2014/12/28 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
django删除表重建的实现方法
2019/08/28 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
千元咖啡店的创业计划书范文
2013/12/29 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
《胡杨》教学反思
2014/02/16 职场文书
企业人事任命书
2014/06/05 职场文书
服务口号大全
2014/06/11 职场文书
公司年终奖分配方案
2014/06/16 职场文书
幼儿园标语大全
2014/06/19 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
2016新年晚会开场白
2015/12/03 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
总结python多进程multiprocessing的相关知识
2021/06/29 Python