实现如上图功能，最好不用第三方插件，有的请指导，谢谢！
-
等级
本版专家分：0结帖率 100% -
实现如上图功能，最好不用第三方插件，有的请指导，谢谢！展开阅读全文
-
等级
本版专家分：0
-
大神呢！！大神呢！！
-
版主等级
本版专家分：2勋章
-
- 签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
-
- 脉脉勋章 绑定脉脉第三方账户获得
-
- GitHub 绑定GitHub第三方账户获取
-
- 领英 绑定领英第三方账户获取
-
-
JqueryMobile里都有这个事件的
-
等级
本版专家分：0
-
求示例看看
-
等级
本版专家分：2
-
自己用jquery来实现 你复选框个数是固定的吗? 显示个数是固定的吗? 若是的话 自己弄也很简单的
主要就是给checkbox加 隐藏的样式
-
等级
本版专家分：3709勋章
-
- 蓝花 2014年1月 Web 开发大版内专家分月排行榜第三
-
-
<!DOCTYPE>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<style>
label{
width: 50px;
height: 25px;
float: left;
}
</style>
</head>
<body>
<span style="float: left" onclick="if(i>0)i--;jump()"><<</span>
<div id="content" style="float: left;overflow: hidden;width: 400px;height: 25px">
<div id="checks" style="width: 550px;margin-left: 0px">
<label><input type="checkbox" />1</label>
<label><input type="checkbox" />2</label>
<label><input type="checkbox" />3</label>
<label><input type="checkbox" />4</label>
<label><input type="checkbox" />5</label>
<label><input type="checkbox" />6</label>
<label><input type="checkbox" />7</label>
<label><input type="checkbox" />8</label>
<label><input type="checkbox" />9</label>
<label><input type="checkbox" />10</label>
<label><input type="checkbox" />11</label>
</div>
</div>
<span style="float: left" onclick="if(i<max)i++;jump()">>></span>
</body>
<script>
var i = 0;
max = 3;
function jump(){
$("#checks").animate({
marginLeft:-50*i+"px"
},500);
}
</script>
</html>
拿去改改吧
- jQuery -- touch事件之滑动判断（左右上下方向）
$(".p1_img4").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(...
- jQuery从左向右展开DIV（动画效果）
<!DOCTYPE ... charset=gb
- 一个很好玩的jquery例子：小方块先逐渐显示，后向右滑动，再向左滑回，最后向上隐藏
The jquery Test --> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } di
- jQuery——自定义插件练习（从左向右、从上向下、大爆炸动画）
② 创建三种不同碎片集合，分别对应从左到右、从上到下、大爆炸动画。在创建碎片集合时除了设置其高、宽、位置，还要设置每个碎片中的background-size和background-position。将三种不同碎片集合push进一个数组中，...
- jq_从右向右的滑入滑出效果
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css">...
- jQuery手机实现左右滑动事件
随着手机的不断发展，移动端页面已经逐渐成长起来，但对于移动端的手势事件并不是十分完善，并没有左右滑动事件。不过可以通过已存在的事件实现移动端页面的左右...实现代码如下：//左右滑动翻页 this.$vrTable.on('t
- JavaScript+jQuery手机端左右滑动事件
//左右滑动翻页 $("#wrapper").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e....
- jquery实现左右点击滑动
jquery实现左右点击滑动 前端养成记：最近做的老项目，涉及到的一个简单的小功能，但是我这样的前端菜鸟还是费了一些功夫的，所以这里记录一下，以免日后忘记。 一、首先看下效果吧 这个是效果图，这个地方只能...
- Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
- 移动端图片左右滑动效果
在移动端的网站或者APP中，图片左右滑动很常见，用户的体验也非常不错。我只要使用JQuery来实现此效果。话不多说，直接上代码。1.html，css部分 html部分： <li ><img src="image/change_img/3.jpeg" > <li >...
- 手机端图片左右滑动效果实现
起初我想尝试用jQuery Mobile的swipeleft和swiperight,可以实现手势左右滑动的效果，但是jQuery Mobile对页面的其它部分影响很大，所以不得不放弃使用。接着我又尝试用zepto.js，但是由于页面很大部分已经依赖了...
- jquery 判断手势滑动方向（上下左右）
$('body').on('click', '.placeholder img', function(e) { //touchstart在你之前发生，不管些什么，都先执行下面的 }); $('body').on('touchstart', '#gallerySlider img', function(e) { ...
- js内容块超出左右滑动控制
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>...title...
- jQuery实现点击左侧固定导航栏，页面滑动展示相应页面内容相对应
滑动到对应的内容，自动匹配相应的导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
- jquery 鼠标移动 div内容上下或左右滚动
代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="...
- JQuery实现移动端广告横向自动滚动效果
前段时间万恶产品要求实现几张图片横向滚动播放,用户触摸可自由左右滑动,网上找了很久也没有找到,最后自己磕磕碰碰实现了效果,虽然有些情况下有BUG,但是应该还是可以满足部分需求了,希望有大佬愿意修改一下部分情况...
- JQuery 使用animate让DIV变化或左右移动
[b]JQuery，利用 animate 让DIV变化或左右移动[/b] [img]http://dl.iteye.com/upload/attachment/0076/2309/663f2701-0357-3ece-8dc2-47da511dd6a1.jpg[/img] [code="html"] ///////////////////...
- html 实现图片从左向右不停的滑动(这个只能滑动再次)
style="overflow: hidden; height: 90px; width: 840px; margin:0 auto;"> style="width: 680px; border: 0px;">
- Jquery实现左右箭头切换轮播的效果
代码块 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右箭头轮播</title> <link rel="stylesheet" href="css/index.css">...
- js和jquery实现浏览器滚动事件自动滚动和手动滚动的冲突怎么解决？
怎么用js和jquery实现网页刷新时浏览器以一定的速度向下滚动，但是当手动滑动浏览器时，停止自动滚动？现在的情况是我手动滑动时，由于自动向下滚动事件还没有结束出现浏览器窗口抖动的问题。请高手帮帮忙。
- jQuery
jQuery jQuery能让开发者在文档中轻松找到关心的元素，并对这些元素进行操作： 添加内容，编写HTML属性和CSS属性、定义事件处理程序以及执行动画。它还拥有Ajax工具来发起HTTP请求，以及一些通用的工具函数来操作...
- Python中Selenium模拟JQuery滑动解锁实例
滑动解锁一直做UI自动化的难点之一，我补一篇滑动解锁的例子，希望能给初做Web UI自动化测试的同学一些思路。...1、slide-to-unlock-handle 表示滑块，滑块的左边距在变大（因为它在向右移动嘛！） 2、...
- Selenium模拟JQuery滑动解锁
滑动解锁一直做UI自动化的难点之一，我补一篇滑动解锁的例子，希望能给初做Web UI自动化测试的同学一些思路。...1、slide-to-unlock-handle 表示滑块，滑块的左边距在变大（因为它在向右移动嘛！） 2、Slide...
- 用JS+JQuery实现无缝连接的轮播图：自动轮播，手动轮播
我之前写过一个简易版的自动+手动轮播图：简易轮播图 但是这个轮播图在切换的时候是没有实现无缝滚动的，每张图片都是单张切换的，而不是滑动。现在用JQuery实现无缝连接的轮播图。 轮播图的原理如下： <!...
- jQuery刻度尺滚动滑块插件
为什么80%的码农都做不了架构师？>>> ...
- 【初试 jQuery】分析轮播图的实现原理，手写轮播图，代码细节分析
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图 by passerbyYSQ</title> <script src="js/jQuery1.4.2.js"></script> &...
- 移动端 div滑动，滚动条拖动
wipeRight:function(){/*向右滑动*/}, wipeUp:function(){/*向上滑动*/}, wipeDown:function(){/*向下滑动*/}, wipe:function(){/*点击*/}, wipehold:function(){/*触摸保持*/}, wipeDrag:function(x,y){...
- 移动端html使用swiper.js实现页面内容与导航栏同滑动
移动端html使用swiper.js实现页面内容与导航栏同滑动 ...先看一下效果图(不是动态图)，向左滑动内容，内容与上方导航栏同时变。 首先需要引入swiper相关的js与css文件。可以在swiper中文网下载。 引入js与css文件 ...
- jquery图片切换插件jquery.cycle.js参数详解
jquery.cycle.js是jquery的一个插件，主要用来实现千奇百怪的图片切换效果——当然，不是图片也能切换，只是它经常被用来做图片切换而已。 没使用过jQuery.Cycle.js的，可以点这里（官网）去摸摸底，看看有没有被震...
- JQuery+CSS&CSS;+DIV实例大全(各种前端超级实用组件)
5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9...