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 相关文章推荐
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
原生js实现轮播图特效
May 04 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
Codeigniter注册登录代码示例
2014/06/12 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
用js遍历 table的脚本
2008/07/23 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python logging模块的使用总结
2019/07/09 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
python 实现简易的记事本
2020/11/30 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
《守株待兔》教学反思
2014/03/01 职场文书
认购协议书范本
2014/04/22 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
债务纠纷代理词
2015/05/25 职场文书
欠条样本
2015/07/03 职场文书
教师节班会主持词
2015/07/06 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
详解JVM系列之内存模型
2021/06/10 Javascript
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python