jq动画实现左右滑动
<!DOCTYPE html>
<html>
<head>
<title>jquery动画滑动</title>
<style type="text/css">
.list{
border: 1px solid #b4b4b4;
width: 450px;
position: relative;
height: 150px;
overflow: hidden;
}
.box{
position: absolute;
width: 100%;
font-size: 0;
white-space:nowrap;
}
.div{
padding: 10px;
width: 130px;
height: 130px;
display: inline-block;
}
.div img{
width: 100%;
height: 100%;
object-fit: cover;
}
.next,.pre{
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></script>
</head>
<body>
<div class="list">
<div class="box">
<div class="div">
<img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
</div>
<div class="div">
<img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
</div>
<div class="div">
<img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
</div>
<div class="div">
<img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
</div>
<div class="div">
<img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
</div>
</div>
</div>
<div>
<span class="pre">上一个</span>
<span class="next">下一个</span>
</div>
<script type="text/javascript">
var ord = 0;
function changeTo(ord){
$(".list .box").stop(true,false).animate({ "left" : -ord*150},1000);
}
$(".pre").click(function (ev) {
ord = ord > 0 ? --ord : $(".div").length -1;
changeTo(ord);
});
$(".next").click(function (ev) {
ord = ord < ($(".div").length-1)? ++ord : 0;
changeTo(ord);
});
</script>
</body>
</html>
jq动画实现左右滑动的更多相关文章
- jQ小图标上下滑动特效
嗯,又到了,夜静饥寒的时候,手指颤抖,回望去,屋内满是寂静,寥寥绰影,咳咳咳,想我程序员之路还没到终点...就...咳咳咳 好了日常神经结束,还要涂我的唇膏.还剩下,最后一章,js动画(四),明天放上 ...
- Android的Activity屏幕切换动画(一)-左右滑动切换
(国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/) Android的Activity屏幕切换动画(一)-左右滑动切换 在Android开发过程 ...
- (21)jq动画
jq动画的优点 优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画 动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...
- css动画和jq动画的简单区分
有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...
- jq动画设置图片抽奖(修改效果版)
效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...
- 自写Jq动画载入插件
在写网站的时候,有一些dom第一次进入屏幕时需要加一个动画进入效果,如下图 于是,自己就研究下,要是实现gif图中左图效果大致原理就是首先将dom放在他的左侧,并将他的透明度(opacity)设置为0 ...
- jq——动画
基本 1 show(可加时间)显示[在效果完成后可执行函数] 2 hide(可加时间)隐藏 3 toggle():切换效果 [在show和hide中切换] 有函数时 滑动动画 1 slideDown: ...
- jq动画插件,自制基于vue的圆形时钟
首先附上jq插件库,里面的东西太炫了,建议学前端的可以看看学习下:http://www.jq22.com/ 里面有个“超个性动画版本的个人简历”,通过屏幕上不断打印内容,改变相应样式来实现动画简历,我 ...
- Android Animation动画实战(一): 从布局动画引入ListView滑动时,每一Item项的显示动画
前言: 之前,我已经写了两篇博文,给大家介绍了Android的基础动画是如何实现的,如果还不清楚的,可以点击查看:Android Animation动画详解(一): 补间动画 及 Android An ...
随机推荐
- Allowed memory size of 134217728 bytes exhausted解决办法(php内存耗尽报错)【简记】
报错: PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 72 bytes) i ...
- SQLServer之创建Transact-SQL DDL触发器
DDL触发器原理 DDL 触发器用于响应各种数据定义语言 (DDL) 事件. 这些事件主要与以关键字 CREATE.ALTER.DROP.GRANT.DENY.REVOKE 或 UPDATE STAT ...
- Extjs 在Grid单元中格添加Tooltip提示
Grid 中的单元格添加Tooltip 的效果 Ext.QuickTips.init(); //必须要… columns: [ { text: 'Name', dataIndex: 'name' }, ...
- 面向对象_item项目
详细见老师博客:http://www.cnblogs.com/Eva-J/articles/7351812.html#_label9 __getitem__\__setitem__\__delitem ...
- c++11の简单线程管理
1.简单的例子 #include "stdafx.h" #include <iostream> #include <thread> void functio ...
- laravel学习笔记一
指定端口 数据迁移 php artisan migrate:install 任何路由 match get,post只选择其一 没有表名对应默认的posts表,如果表为post就不行 时区不对时 分页 ...
- Golang 入门系列(十一)Go语言实现webapi
之前,已经讲过很多Golang的东西,比如基础语法,mysql的使用,redis的使用等等,感兴趣的可以看看以前的文章,https://www.cnblogs.com/zhangweizhong/ca ...
- linux 下一些命令
1. 后台执行命令 nohup http://blog.csdn.net/liuyanfeier/article/details/62422742 2. 查看日志文件 格式:tailf logfil ...
- CentOS自定义快捷键,以终端为例
和Ubuntu不同的是,CentOS默认情况下没有Terminal的快捷键.因此,用户需要自定义. 具体操作: 一.打开设置,搜索keyboard 二.点击+号定义快捷键 名称随意填,查询终端程序所在 ...
- Unit 3.标签的分类和嵌套规则
一.标签分类 HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素. 常用的块状元素: <div> <p> <h1>~<h6> <ol ...