jq小demo—图片翻页展示效果 animate()动画
<!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>
jq小demo—图片翻页展示效果 animate()动画的更多相关文章
- jq demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 3D版翻页公告效果
代码地址如下:http://www.demodashi.com/demo/12830.html 前言: 在逛小程序蘑菇街的时候,看到一个2D版滚动的翻页公告效果.其实看到这个效果的时候,一点都不觉得稀 ...
- jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
- 创意HTML5文字特效 类似翻页的效果
原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...
- jquery 实现智能炫酷的翻页相册效果
jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离1. [代码]jquery ...
- Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录
经过一个星期的折腾,最终做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这仅仅是一个单独聊天表情的输入,以及聊天的效果实现.由于我没有写server,所以没有两方聊天的效果. ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- 微信小程序实现标签页滑块效果
微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...
- CSS3——制作图片翻页的小动画
觉得还挺有意思的嘻嘻~ 这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug: 这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法: 在.pic, .info{...} ...
随机推荐
- Winform常用开发模式第一篇
Winform常用开发模式第一篇 上一篇博客最后我提到“异步编程模型”(APM),之后本来打算整理一下这方面的材料然后总结一下写篇文章与诸位分享,后来在整理的过程中不断的延伸不断地扩展,发现完全偏离了 ...
- a5站长论坛和s8站长论坛-网上兼职做任务赚钱的两大网站
1.什么是做任务赚钱? 简而言之,就是你做别人不在行而你在行的技术 ,如 图片美化 网站建设 网站修改 网站推广等网络业务. 2.任务赚钱有什么特点? 完全免费,你付出的是技术和时间,完全免费,不过 ...
- iOS开发： 关于Certificate, Identifier & Profile
简介 苹果的iOS系统是封闭的系统.苹果的设计是保证每一个软件有确定的开发者/厂商(保证不被第三方进行未授权修改),只能在指定的设备上运行.为达到这些目标,苹果设计了一系列的机制. Certifica ...
- 结构-行为-样式-angularJs 指令解决IE下无PlaceHolder的问题
最近项目开发的时候遇到一个头疼的问题,在测试IE兼容性的时候,发现placeholder在IE下无效.查网上说也是有各种解决方案,但是都不是我想要的,于是决定自己写一个.思路:placeHolder是 ...
- Spring实战——XML和JavaConfig的混合配置
前言 看了园龄已经两年多了,再不能写完内容直接点击发布,留下一片密密麻麻的文字让别人看的头昏脑涨.所以现在每次写完主要内容后,还需要对于格式稍稍调整下.那么有没有什么编辑模式能够在你写完文章后基本也把 ...
- js getByClass函数封装
function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; v ...
- 初步使用nodejs（一）
初步使用nodejs(一) 首先打开 https://nodejs.org/,点击INSTALL下载安装 安装完成后 打开CMD 输入node –v 验证是否正常 至此,NODEJS安装完成. 下载W ...
- MyEclipse 代码提示设置
打开 Eclipse -> Window -> Perferences -> Java -> Editor -> Content Assist,在右边最下面一栏找到 au ...
- get与post请求
1.post请求 如果表单以Post方式提交过来的,接收时必须以Requert.Form来接收,并且表单元素必须有name属性,而Form指定的键的名称就是name属性的值 <form meth ...
- 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...