简短几句jquery代码的实现一个图片向上滚动切换,基于jQuery的左右滚动实现代码web前端

By admin in web前端 on 2019年8月6日

animate()参数介绍:
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 “margin:30px”)。字符串值无法创建动画(比如
“background-color:red”)。
PS:但是如果你引用了最新jquery
ui框架的话backgroudColor,color之类的属性也可以实现渐变了。
PS:使用 “+=” 或 “-=” 来创建相对动画(relative animations)。
首先依然要引用jquery框架,你懂得。
再来看看代码:

两个div。
一个div为固定宽度 。在次div中内嵌一个div ,这个为数据列。

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>无标题文档</title>
</head>
<body>
<div style=”border:5px #666 solid; width:500px; height:350px;
overflow:hidden;”>
<div id=”box”>
<div style=”width:500px; height:350px;
background-color:#0F0;”>One</div>
<div style=”width:500px; height:350px;
background-color:#00F;”>Two</div>
<div style=”width:500px; height:350px;
background-color:#696;”>Three</div>
</div>
</div>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
var Top=-350;//定义一个向上移动的距离,这个数值和你图片或DIV的高度相等
var Time=500;//定义一个速度
function move(){
$(“#box”).animate({“margin-top”:Top},Time);//animate方法,只能对数值型的值进行渐变
Top+=-350;//运行一次增加一个图片的高度
if(Top==-1050)//判断当总高度大于你DIV或者图片总高度
{
Top=0;//把距离设置回0
Time=400;//加快移动速度
}
else
{
Time=500;//否则减慢速度
}
}
setInterval(move,3000);//3秒执行一次move()
})
</script>
</body>
</html>

<div class=”box”>
<div class=”box-li”>
<ul>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<ul>
</div>
<div>
<span id=”next”>向右移动</span>
<span id=”pre”>向左移动</span>
web前端,样式表
.box{
float: left;
height: 93px;
width: 560px;
left:0px;
white-space:nowrap;
overflow:hidden;
position:relative /* 不加次属性在ie7中无法隐藏内容*/
}
.box-li{
float: left;
height: 90px;
left:0px;
position:relative;
white-space:nowrap;
clear: both;
}
.box-li ul{
width:100000px; /* 不加次数据IE中数据会自动换行*/
white-space:nowrap;
}
.box-li li{
margin-left:0px;
margin-right:0px;
float: left;
text-align:center;
width: 92px;
}
$(function () {
var $cur = 1; //初始化显示的版面
var $i= 6; //每版显示数
var $len = $(‘.box-li>ul>li’).length; //计算列表总长度(个数)
var $pagecount = Math.ceil($len / $i); //计算展示版面数量
var $showbox = $(‘.box’);
var $w = $(‘.box’).width(); //取得展示区外围宽度
var $pre = $(‘#pre’);
var $next = $(‘#next’);
//向前滚动
$pre.click(function () {
if (!$showbox.is(‘:animated’)) { //判断展示区是否动画
if ($cur == 1) { //在第一个版面时,再向前滚动无动作 }
else {
$showbox.animate({
left: ‘+=’ + $w
}, 600); //改变left值,切换显示版面
$cur–; //版面累减
}
}
});
//向后滚动
$next.click(function () {
if (!$showbox.is(‘:animated’)) { //判断展示区是否动画
if ($cur == $pagecount) { //在最后一个版面时,再向后滚动无动作 }
else {
$showbox.animate({
left: ‘-=’ + $w
}, 600); //改变left值,切换显示版面
$cur++; //版面数累加
}
}
});
});

js部分也可以这样,实现一个回滚效果:

您可能感兴趣的文章:

  • 基于jQuery的可以控制左右滚动及自动滚动效果的代码
  • 基于jquery可配置循环左右滚动例子
  • 基于Jquery实现的一个图片滚动切换
  • Jquery图片滚动与幻灯片的实例代码
  • jQuery
    bxCarousel实现图片滚动切换效果示例代码
  • jQuery图片滚动图片的效果(另类实现)
  • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
  • jQuery实现公告文字左右滚动的实例代码
  • jquery实现图片滚动效果的简单实例
  • 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
  • JQuery
    图片滚动轮播示例代码
  • 一个jquery实现的不错的多行文字图片滚动效果
  • jquery图片滚动放大代码分享(1)
  • jQuery合作伙伴左右滚动特效

复制代码 代码如下:

$(document).ready(function(){
var Top=-350;
var Time=500;
var more=-50;
function move(){
$(“#box”).animate({“margin-top”:Top+more},Time);
$(“#box”).animate({“margin-top”:Top},300);
Top+=-350;
if(Top==-1050)
{
Top=0;
more=50;
Time=400;
}
else
{
Time=500;
more=-50;
}
}
setInterval(move,3000);
})

您可能感兴趣的文章:

  • jQuery实现Tab菜单滚动切换的方法
  • jQuery图片轮播滚动切换代码分享
  • jQuery实现滚动切换的tab选项卡效果代码
  • jQuery实现的图文高亮滚动切换特效实例
  • jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
  • jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
  • jQuery
    bxCarousel实现图片滚动切换效果示例代码
  • 基于Jquery实现的一个图片滚动切换
  • jquery
    圆形旋转图片滚动切换效果
  • 基于jQuery实现滚动切换效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有