jq demo—图片翻页展示效果 animate()动画

最新推荐文章于 2022-02-28 12:30:17 发布
最新推荐文章于 2022-02-28 12:30:17 发布
阅读量599 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xwnlh/p/6260009.html
版权

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<style type="text/css">
html,h2,h4,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
.v_show{
	border:1px solid #aaa;
	margin:0 auto;
	width:520px;
}
.v_caption{
	height:30px;
	line-height:30px;
	border-bottom:1px solid #dfdfdf;
	overflow:hidden;
	position:relative;
}
.v_caption h2{
	float:left;
	font-size:16px;
}
.v_caption em{
	position:absolute;
	right:0;
	top:0;
}
.highlight_tip{
	float:left;
}
.highlight_tip span{
	background:#ddd;
	display:inline-block;
	width:8px;
	height:8px;
	margin-right:2px;
	border-radius:4px;
	text-indent:-99px;
	overflow:hidden;
	cursor:pointer;
}
.highlight_tip .current{
	background:#fc0;
}
.change_btn span{
	cursor:pointer;
}
.v_content{
	height:210px;width:100%;
	overflow:hidden;
}
.v_content_list{
	position:relative;  //关键，否则js的left属性会无效
}
.v_content_list ul{
    display:flex;
    width: 100%;
}
.v_content_list li{
    flex:initial;  //元素要在一行显示
    min-width:120px;
	margin:10px 10px 10px 0;
}
.v_content_list img{
	width:120px;
	height:150px;
}
</style>

<body>
<div class="v_show">
	<div class="v_caption">
		<h2>卡通动漫</h2>
		<div class="highlight_tip">
			<span class="current">1</span><span>2</span><span>3</span><span>4</span>
		</div>
		<div class="change_btn">
			<span class="prev">上一页</span>
			<span class="next">下一页</span>
		</div>
		<em>更多视频 >> </em>
	</div>
	<div class="v_content">
		<div class="v_content_list">
			<ul>
			<li>
				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />
				<h4>二次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />
				<h4>二次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />
				<h4>二次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />
				<h4>二次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />
				<h4>二次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
		</ul>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">	
$(function(){
	var page=1;
	var i=4;
	$("span.next").click(function(){
		$this=$(this);
		var $parent=$this.parents("div.v_show");
		var $v_show=$parent.find("div.v_content_list"); //视频展示区域
		var $v_content=$parent.find("div.v_content");   //视频展示区域外围div
		var v_width= $v_content.width();
		var len=$v_show.find("li").length;
		var page_count=Math.ceil(len/i);  //向上取整
		if(!$v_show.is(":animated")){ //是否处于动画状态
			//是否已经是最后一个版面，是直接跳到第一版
			if(page==page_count){
				$v_show.animate({left:'0px'},"slow");
				page=1;
			}else{
				$v_show.animate({left:'-='+v_width},"slow");
				page++;
			}
			$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
		}
	});
	$("span.prev").click(function(){
		$this=$(this);
		var $parent=$this.parents("div.v_show");
		var $v_show=$parent.find("div.v_content_list"); //视频展示区域
		var $v_content=$parent.find("div.v_content");   //视频展示区域外围div
		var v_width= $v_content.width();
		var len=$v_show.find("li").length;
		var page_count=Math.ceil(len/i);  //向上取整
		if(!$v_show.is(":animated")){ //是否处于动画状态
			if(page==1){
				$v_show.animate({left:'-='+v_width*(page_count-1)},"slow");
				page=page_count;
			}else{
				$v_show.animate({left:'+='+v_width},"slow");
				page--;
			}
			$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
		}
	});
})
</script>

</body>
</html>

　　

转载于:https://www.cnblogs.com/xwnlh/p/6260009.html

weixin_34112900
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用animate.css实现翻转特显
HD2killers的博客
06-04 1188
.houverlxx是父元素 其他两个元素是子元素,使用定位 $(function(){ $(".houverlxx").hover(function(){ // floor-goods-item消失 floor-goods-item2 显示 $(this).children('.floor-goods...
Flutter Animation 3D仿真书本翻页动画效果
weixin_43619292的博客
08-08 1976
Flutter Animation 3D仿真书本翻页动画效果
jquery图片翻页
super的博客
06-22 1679
一个简单的图片翻页效果，代码只需替换image数组即可使用.思路：使用img标签展示图片，在图片下方提供上一页和下一页按钮，点击时候触发时间，使用$('#id').attr('src',image url)实现图片翻页，整体效果如下图，效果一般，后台系统使用对美没要求。&lt;html&gt; &lt;meta http-equiv="Content-Type" content="text/htm...
CSS3新特性之一学习笔记-----animation及其实现的翻页效果
qq_39205157的博客
05-24 1960
CSS3新特性之一-----animation及其实现的翻页效果 animation的初步认识 频繁的使用setTimeout和setInterval来之后，在设置动画效果的时候，竟然一时半会忘了css3存在的这个属性，废话不多说，进入正文 复习一下 1.属性介绍 平常我们也经常使用css来实现一下简单的动画，比如按钮，文本框等悬停或者点击时出现阴影，animation也能型似的设置动画，甚至提供了更多的选择，他有如下属性： 名 简介 animatin-name 绑定到选择器的关键帧的名称，
jquery实现简单的图片翻转效果
sunflower_li的博客
03-16 8014
鼠标经过图片图片翻转显示图片背后的文字（对于其中引用的jquery文件、图片，需要用自己的）         Title             *{margin: 0;padding: 0;}         div{width: 284px;height: 430px;margin: 30px auto;border: 1px solid #ccc;}      
jquery animate 动画效果使用说明
12-08
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”...
js实现类似jquery里animate动画效果的方法
10-24
在JavaScript中，jQuery库提供了强大的`animate()`方法，使得开发者能够轻松创建平滑的动画效果。但是，如果我们不使用jQuery，而是直接用原生JavaScript，如何实现类似的效果呢？本篇将详细介绍如何通过JavaScript...
基于css3 animate制作绚丽的动画效果
09-24
Animate.css是一个预定义的动画集合，支持各种炫酷的视觉效果，如翻转、滑动、旋转等，并且具有良好的跨浏览器兼容性。本文将深入探讨如何利用CSS3的Animate.css库来制作绚丽的动画效果。 首先，要使用Animate.css...
jQuery的animate函数实现图文切换动画效果
10-24
在本例中，我们将探讨如何使用animate()来实现图文切换的动画效果，这在许多网页设计中是非常常见的应用场景。 首先，让我们了解一下animate()函数的基本语法： ```javascript $(selector).animate(properties, ...
jquery做的动画演示(jQuery+Animate+Demo)
java爱好者专栏
09-22 376
login $(document).ready(function(){ //控制注册框动画 $(".regfont").click(function(){//点击注册按钮时关闭或者打开注册框 $("#regbox").slideToggle("slow");//如果隐藏就显示，反之... return false; }); //关闭注册框动画 ...
使用animation翻页动画效果
03-11
使用animation类动画效果构建手机页面的翻页效果！
书页翻页效果(HTML5)
06-02
书页翻页效果(HTML5)
vue+animation实现翻页动画
12-28
本文实例为大家分享了vue+animation实现翻页动画展示的具体代码，供大家参考，具体内容如下 前端在做数据展示的时候，可能提留页面时间较长，导致数据不能及时更新，你可以定时更新，也可以做一个假数据 给用户视觉上的体验，接下来就是第二种，假数据，它用了C3 animation 实现了一个翻页动画。 第一种是单独运动 {{item.num}}</a
jquery实例超炫animate动画效果
01-05
jquery实例超炫animate动画效果 demo是原版，效果还是相当炫丽 后面自制了两个
jq实现鼠标滚动的时候上下翻页，动画在翻页的时候才会执行
ccj1990528的专栏
03-21 6853
以前一直想自己写几篇属于自己博客，但是由于工作原因以及一些生活的上的因素，导致一直都没能如愿，今天加班，正好事儿还没过来，真好留了时间给我写一篇博客。         在上一家公司的时候，主要从事的是移动端的开发，由于基于移动端有了相对来说很成熟的翻页框架，所以基本上很少会自己写一些翻页的效果，以及翻页的动画效果，之前的公司的模式更像是外包模式，很忙，也基本没有时间去自己研究那些框架的搭建和基层
jquery控制css3动画 列表,10款jQuery/CSS3动画应用 超实用
weixin_42314399的博客
08-04 382
本文作者html5tricks，转载请注明出处这次我们要带来10款最新的jQuery/CSS3动画应用，这里有不少1、jQuery/CSS3书本翻页动画特效 多功能选项支持这是一款基于jQuery和CSS3的书本翻页动画特效，该书本翻页插件的外观非常华丽喜庆，非常适合产品活动或者育儿网站使用。我们可以点击左右翻页按钮进行翻页，也可以使用鼠标拖拽页脚来实现翻页动画。这是个jQuery插件，因此兼容性...
前端提高篇(九十九)：jQuery自定义动画：animate / stop
安之ccy的博客
04-04 791
1.animate() animate()可以接受4个参数，分别是动画对象及效果、动画执行时间、easing（过渡速率）、动画执行完成后的要执行的函数 .box { height: 100px; width: 100px; background-color: pink; position: absolute; left: 50px; } <div class="box"></div> 1.1 animate(动画对象及效果) 从left:
jQuery仿真翻书炫酷翻页动画插件
ICode联盟
02-28 377
下载地址booklet的一款jQuery仿真杂志翻页动画插件，看起来很炫酷的翻书效果。 dd:
利用animation和transform实现翻页效果
buttonChan的博客
04-30 3115
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最近要展示菜谱的步骤，想到采用翻页的动画效果来在各个步骤之间切换，以下是我的实现过程： 由于涉及到动画效果，肯定得采用CSS3动画来实现，CSS3提供了2种方式来在元素上应用动画： 1. animation和@keyframes 2. transition 其中第1种是直接实现动画的，允许定义动画的每一帧；第2种是利用...
animate 实现缓动动画效果
最新发布
06-09
要实现缓动动画效果，可以使用 jQuery 的 `animate()` 方法。`animate()` 方法可以让元素从一个 CSS 属性值平滑地过渡到另一个 CSS 属性值，从而实现动画效果。具体步骤如下： 1. 引入 jQuery 库。 2. 使用 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值