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实现菜单式图片滑动切换,包括了jQuery实现菜单式图片滑动切换的使用技巧和注意事项,需要的朋友参考一下 jQuery菜单式图片滑动切换是一款天猫官方网站的鼠标滑过图片切换导航菜单特效。 演示图: 以上就是本文的全部内容了,希望大家能够喜欢。
本文向大家介绍简单实现JavaScript图片切换效果,包括了简单实现JavaScript图片切换效果的使用技巧和注意事项,需要的朋友参考一下 JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval()函数
本文向大家介绍JS实现图片切换特效,包括了JS实现图片切换特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现图片切换的具体代码,供大家参考,具体内容如下 知识点: 1.window.onload网页全部加载完后再执行 2.获取元素 设置属性 3.临界情况判断 运行效果: 点击上一张下一章切换图片 代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐
本文向大家介绍Jquery实现动态切换图片的方法,包括了Jquery实现动态切换图片的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Jquery实现动态切换图片的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的jQuery程序设计有所帮助。
本文向大家介绍jquery+css实现动感的图片切换效果,包括了jquery+css实现动感的图片切换效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery+css实现动感的图片切换效果代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 基本思路:定义一个数组存放需要展示的图片,接着当单击图片时删除zoomIn类,添加fadeOutRight类,实现实图右
本文向大家介绍jQuery插件Slider Revolution实现响应动画滑动图片切换效果,包括了jQuery插件Slider Revolution实现响应动画滑动图片切换效果的使用技巧和注意事项,需要的朋友参考一下 这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页;它内置幻灯、视频播放计时器,它拥有各种模式:自定义,自动响应,全屏;它有多种动