
实现如上图功能,最好不用第三方插件,有的请指导,谢谢!
<!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>
$(".p1_img4").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(...
<!DOCTYPE ... charset=gb
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
② 创建三种不同碎片集合,分别对应从左到右、从上到下、大爆炸动画。在创建碎片集合时除了设置其高、宽、位置,还要设置每个碎片中的background-size和background-position。将三种不同碎片集合push进一个数组中,...
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css">...
随着手机的不断发展,移动端页面已经逐渐成长起来,但对于移动端的手势事件并不是十分完善,并没有左右滑动事件。不过可以通过已存在的事件实现移动端页面的左右...实现代码如下://左右滑动翻页 this.$vrTable.on('t
//左右滑动翻页 $("#wrapper").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e....
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,但是由于页面很大部分已经依赖了...
$('body').on('click', '.placeholder img', function(e) { //touchstart在你之前发生,不管些什么,都先执行下面的 }); $('body').on('touchstart', '#gallerySlider img', function(e) { ...
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>...title...
滑动到对应的内容,自动匹配相应的导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="...
前段时间万恶产品要求实现几张图片横向滚动播放,用户触摸可自由左右滑动,网上找了很久也没有找到,最后自己磕磕碰碰实现了效果,虽然有些情况下有BUG,但是应该还是可以满足部分需求了,希望有大佬愿意修改一下部分情况...
[b]JQuery,利用 animate 让DIV变化或左右移动[/b] [img]http://dl.iteye.com/upload/attachment/0076/2309/663f2701-0357-3ece-8dc2-47da511dd6a1.jpg[/img] [code="html"] ///////////////////...
style="overflow: hidden; height: 90px; width: 840px; margin:0 auto;"> style="width: 680px; border: 0px;">
代码块 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右箭头轮播</title> <link rel="stylesheet" href="css/index.css">...
怎么用js和jquery实现网页刷新时浏览器以一定的速度向下滚动,但是当手动滑动浏览器时,停止自动滚动?现在的情况是我手动滑动时,由于自动向下滚动事件还没有结束出现浏览器窗口抖动的问题。请高手帮帮忙。
jQuery jQuery能让开发者在文档中轻松找到关心的元素,并对这些元素进行操作: 添加内容,编写HTML属性和CSS属性、定义事件处理程序以及执行动画。它还拥有Ajax工具来发起HTTP请求,以及一些通用的工具函数来操作...
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路。...1、slide-to-unlock-handle 表示滑块,滑块的左边距在变大(因为它在向右移动嘛!) 2、...
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路。...1、slide-to-unlock-handle 表示滑块,滑块的左边距在变大(因为它在向右移动嘛!) 2、Slide...
我之前写过一个简易版的自动+手动轮播图:简易轮播图 但是这个轮播图在切换的时候是没有实现无缝滚动的,每张图片都是单张切换的,而不是滑动。现在用JQuery实现无缝连接的轮播图。 轮播图的原理如下: <!...
为什么80%的码农都做不了架构师?>>> ...
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图 by passerbyYSQ</title> <script src="js/jQuery1.4.2.js"></script> &...
wipeRight:function(){/*向右滑动*/}, wipeUp:function(){/*向上滑动*/}, wipeDown:function(){/*向下滑动*/}, wipe:function(){/*点击*/}, wipehold:function(){/*触摸保持*/}, wipeDrag:function(x,y){...
移动端html使用swiper.js实现页面内容与导航栏同滑动 ...先看一下效果图(不是动态图),向左滑动内容,内容与上方导航栏同时变。 首先需要引入swiper相关的js与css文件。可以在swiper中文网下载。 引入js与css文件 ...
jquery.cycle.js是jquery的一个插件,主要用来实现千奇百怪的图片切换效果——当然,不是图片也能切换,只是它经常被用来做图片切换而已。 没使用过jQuery.Cycle.js的,可以点这里(官网)去摸摸底,看看有没有被震...
5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9...