JQuery实现简单的图片滑动切换特效
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 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插件Slider Revolution实现响应动画滑动图片切换效果
这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件. <script src="js/jque
-
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n
-
jquery animate图片模向滑动示例代码
这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity"). 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就会从当前的值渐变到指定的值.如果使用的是"hide"."show"或"toggle"这样的字符串值,则会为该属性调用默认
-
jQuery点击后一组图片左右滑动的实现代码
复制代码 代码如下: $(function () { var page = 1;//初始化page变量 var i = 2;//每版放两组图片 var $pictureShow = $(".pictures4"); var downwidth = $pictureShow.width();//获取框架内容的宽度,既每次移动的大小 var len = $(".picturescontent4").find('ul').length;//找到一共有几组图片 var pa
-
jquery实现滑动图片自己测试的例子
最近正在回顾之前的一些基础知识,用jquery写了一个图片滑动的插件,虽然还是有些问题存在,用法很简单,只要在对目标元素绑定slideW()函数即可,该函数最多支持两个输入,分别是图片变化之后的宽度,以及动画的速度,如果不输入,则采用默认的宽度以及默认的速度. 下面是我自己测试的例子: 复制代码 代码如下: //html代码 <div class = "content"> <ul class = "list"> <li class =
-
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.从这篇文章开始到接下来的几篇文章我们将向大家分享40多种非常有用,又有创意的jQuery图片滑动插件,及其演示和下载地址.你可以按你网页风格找到合适的jQuery图片滑动插件,然后点击演示链接查看具体效果,然后下载此jQuery滑动插件.希望你能在这40个jQuery
-
jQuery实现图片滑动效果
思路:当鼠标进入元素时,触发hover中的第一个函数,离开时触发hover中的第二个函数. 如图所示: 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ width: 1000px; m
-
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最优秀的Javascript框架之一.以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.在这是jQuery滑动切换插件系列的第二篇,我们将向大家分享40多种非常有用,又有创意的jQ
-
jQuery实现图片与文字描述左右滑动自动切换的方法
本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法.分享给大家供大家参考.具体如下: 这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效.一边飞出一边变淡的效果非常漂亮,带小按钮. 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
-
JQuery实现简单的图片滑动切换特效
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
-
jQuery实现菜单式图片滑动切换
jQuery菜单式图片滑动切换是一款天猫官方网站的鼠标滑过图片切换导航菜单特效. 复制代码 代码如下: $(function(){ // floorCon-slide $(".floorCon-slide .floorConSlideImgNav li span").css({opacity:0.95}) $(".floorCon-slide .floorConSlideImgNav li.hover").find("span&qu
-
wap手机图片滑动切换特效无css3元素js脚本编写
手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,
-
js实现非常简单的焦点图切换特效实例
本文实例讲述了js实现非常简单的焦点图切换特效的方法.分享给大家供大家参考.具体分析如下: 这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
-
jQuery右侧选项卡焦点图片轮播特效代码分享
本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码.分享给大家供大家参考.具体如下: jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击. 运行效果图: ----------------------查看效果-源码下载---------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下 <!DOCTYPE html PUBLIC "-
-
jQuery实现的图文高亮滚动切换特效实例
本文实例讲述了jQuery实现的图文高亮滚动切换特效.分享给大家供大家参考.具体如下: 这里介绍jQuery图文高亮滚动切换特效,jQuery鼠标滑过图文开关灯切换特效,背景变暗,子内容向上滑动显示出来,鼠标的操作感极强,希望大家喜欢本效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery图文高亮滚动切换</title> <s
-
非常漂亮的JS+CSS图片幻灯切换特效
非常漂亮的JS+CSS图片幻灯切换特效,用在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,视觉冲击效果很爽,而且代码也不多,调试调用都方便,建议关注一下哦! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
-
jquery实现两个图片渐变切换效果的方法
本文实例讲述了jquery实现两个图片渐变切换效果的方法.分享给大家供大家参考.具体如下: 这段代码演示了jquery如何实现两个图片渐变切换的效果,为id=kitten的div设置一个背景图片,通过jquery对div进行淡入淡出实现两个图片的渐变切换 html代码 <div id="kitten"> <img src="/images/kitten.jpg" alt="Kitten" /> </div> j
-
Android Flutter实现图片滑动切换效果
目录 前言 SlideTransition 介绍 示例效果实现 总结 前言 我们开始来介绍转换类的动画组件,实际上这类转换动画组件也可以自己通过 AnimatedBuilder 或 AnimatedWidget 完成, Flutter 为了简化开发,提供了不少转换动画组件,这类组件通常命名为 xxTransition.本篇要介绍的就是 SlideTransition,顾名思义,就知道是滑动转换动画.我们本篇来实现两张小姐姐图片的滑动切换,效果如下图所示. SlideTransition 介绍 S
-
jquery编写Tab选项卡滚动导航切换特效
本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下 效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=