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 相关文章推荐
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
jquery实现倒计时效果
Dec 14 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
Bootstrap Table从零开始
Jun 30 Javascript
ES6新增的数组知识实例小结
May 23 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 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
Tensorflow简单验证码识别应用
2017/05/25 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
pymysql模块的操作实例
2019/12/17 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
python3 kubernetes api的使用示例
2021/01/12 Python
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
工程采购员岗位职责
2014/03/09 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
社区党员干部承诺书
2015/05/04 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
Javascript设计模式之原型模式详细
2021/10/05 Javascript
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
JavaScript实现优先级队列
2021/12/06 Javascript
java代码实现空间切割
2022/01/18 Java/Android