13518219792
原生的Jquery dataTable没有这个功能的支持哦，只能自己用js和css限定，非常复杂
创新互联建站长期为成百上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为杏花岭企业提供专业的成都做网站、网站设计，杏花岭网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
如果一定要实现这种效果，建议使用easyui，调用简单方面，而且一个参数即可支持【锁定列的横向滚动】功能。
实例以及源代码：
;tree.html#datagrid
第一个example就是你需要的【锁定列的横向滚动】哦
jquery在scroll()事件里面，我想判断当前滚动条横向还纵向；
我开始用全局变量记录scrollTop的值来判断的，如果前后值没有变就是横向滚动了，
但是页面里有多个滚动条，就要多个全局变量来控制，该怎么判断呢？
scroll jquery 区分横向纵向滚动条
解决方法：
each一次设置选择器选中对象的scrollLeft/scrollTop就行了，然后绑定scroll事件，触发的时候获取scrollLeft/scrollTop和初始化的scrollLeft/scrollTop对比判断是横向还是纵向，同时更新对象存储的scrollLeft/scrollTop
style
.c{height:120px;width:120px;overflow:auto;border:solid 1px black;margin-bottom:5px;}
/style
div class="c"111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111/div
div class="c"111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111/div
div class="c"111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111/div
div class="c"111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111br1111111111111111111/div
script src="/js/jquery.js"/script
script
$('div').each(function(){$(this).data('slt',{sl:this.scrollLeft,st:this.scrollTop});}).scroll(function(){
var sl=this.scrollLeft,st=this.scrollTop,d=$(this).data('slt');
if(sl!=d.sl)alert('横向滚动');
if(st!=d.st)alert('纵向滚动');
$(this).data('slt',{sl:sl,st:st});///
})
/script
最近流行的 sogo云输入法， QQ云输入法，都用到了bookmarklet技术。
这篇文章主要介绍了jQuery中even选择器的定义和用法,较为详细的分析了event选择器的语法结构与具体用法,并以一个设置偶数行为蓝色字体的例子总结了其用法与功能特点,需要的朋友可以参考下
晚上有插件可以实现"jquery tab"，但有点复杂了，我想写个最简单的，来实现"jquery tab"。而事实上确实很简练
这篇文章主要介绍了JQuery样式操作、click事件以及索引值-选项卡应用,结合实例形式分析了jQuery动态修改css样式、事件响应以及选项卡相关操作技巧,需要的朋友可以参考下
jQuery在遵循W3C规范的情况下，对事件的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断
主要是为了往后的项目中方便实现这类型的功能，在之前做问卷调查那个应用中，就用到这个来显示结果，但当时开发时并不用是插件的，一大堆代码，看也烦，用起来很麻烦
jquery动态添加option选项，还有动态删除的方法，大家参考使用吧
qTip2是一个灰常强大且精致的jQuery提示信息插件，是qTip的第2版，也是一个全新的版本，提供了丰富的功能及漂亮的外观，非常易于使用
ul绑定mousewheel鼠标滚动事件(火狐用DOMMouseScroll)
取消默认动作，event.preventDefault()（IE：window.event.returnValue=false），这样滚轮滚动后就不会滚动页面了。
根据滚轮滚动的方向对ul内容进行控制，获取滚轮方向用event.wheelDelta，大于0为向上滚，小于0向下滚(火狐event.detail，方向刚好相反，大于0向下)，再更改ul的scrollLeft值即可以模拟滚轮滚动效果了。
你好，修改成了每页显示6张图片。 然后向右滚动的按钮事件改成点一次滚动一张图片的距离。
向左滚动的你按照我那样修改一下就可以了。。
html charset="utf-8"
style type="text/css"
* { margin:0; padding:0;}
body { font-size:12px;}
.box {height:66px; float:left; width:660px; overflow: hidden; position:relative; }
.box li { display:block; float:left; margin-left:5px; margin-right:5px; width:100px; height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center; cursor:pointer;}
.box li:hover { color:#999; }
.box li.active { background-position:-174px 0; color:#555;cursor:default;}
a.prev, a.next {background:url() no-repeat 0 0; display:block;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
a.next { background-image:url()}
.scroll_list{ width:10000em; position:absolute; }
/style
!-- 引入jQuery --
script src="" type="text/javascript"/script
script type="text/javascript"
$(function(){
var page= 1;
var i = 6;//每版四个图片
var click_time = 0; //用来控制page++
//向右滚动
$(".next").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的视频图片个数
var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数
var move_width = v_width/i; //移动距离不是一个box的宽度了，一个box里显示4个li，一次移动一个li，所以移动距离除以4
click_time ++; //点击一次click_time++
if(!v_show.is(":animated")){
if(page == page_count){
v_show.animate({left:'0px'},"slow");
page =1;
}else{
v_show.animate({left:'-='+move_width},"slow"); //移动距离进行了修改
if(click_time == i){ //当click_time等于每页次数的时候 进行page++
page++;
click_time = 0;
}
}
}
});
//向左滚动
$(".prev").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
var v_width = v_cont.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--;
}
}
});
});
/script
/head
body
!-- 例子 --
div class="scroll" style="margin:0 auto;width:770px;"
!-- "prev page" link --
a class="prev" href="#"/a
div class="box"
div class="scroll_list"
ul
li1/li li2/li li3/li li4/li
li5/li li6/li li7/li li8/li
li9/li li10/li li11/li li12/li
li13/li li14/li li15/li li16/li
/ul
/div
/div
!-- "next page" link --
a class="next" href="#"/a
/div
/body
/html
!DOCTYPE HTML
html
head
meta charset=UTF-8 /
titleNothing/title
style type="text/css"
/style
script
var create = function (x, y, text)
{
var marquee = document.createElement ('marquee');
marquee.style.position = 'absolute';
marquee.style.left = x + 'px';
marquee.style.top = y + 'px';
marquee.innerText = text;
document.body.appendChild (marquee);
}
window.onload = function ()
{
create (100, 100, "Look boddy, U got work harder and put yourself to the JavaScript, once U learn the heart of the JavaScript, I can guarantee U win.");
}
/script
/head
body
/body
/html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
""
html xmlns="" xml:lang="en"
head
meta http-equiv="content-type" content="text/html; charset=utf-8" /
titleImage Gallery/title
script type="text/javascript" src="jquery.min.js"/script
script
// JavaScript Document
$(document).ready(function(e) {
/***不需要自动滚动，去掉即可***/
time = window.setInterval(function(){
$('.og_next').click();
},5000);
/***不需要自动滚动，去掉即可***/
linum = $('.mainlist li').length;//图片数量
w = linum * 250;//ul宽度
$('.piclist').css('width', w + 'px');//ul宽度
$('.swaplist').html($('.mainlist').html());//复制内容
$('.og_next').click(function(){
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length4){//多于4张图片
ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
if(ml=0 mlw*-1){//默认图片显示时
$('.swaplist').css({left: '1000px'});//交换图片放在显示区域右侧
$('.mainlist').animate({left: ml - 1000 + 'px'},'slow');//默认图片滚动
if(ml==(w-1000)*-1){//默认图片最后一屏时
$('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
}
}else{//交换图片显示时
$('.mainlist').css({left: '1000px'})//默认图片放在显示区域右
$('.swaplist').animate({left: sl - 1000 + 'px'},'slow');//交换图片滚动
if(sl==(w-1000)*-1){//交换图片最后一屏时
$('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
}
}
}
})
$('.og_prev').click(function(){
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length4){
ml = parseInt($('.mainlist').css('left'));
sl = parseInt($('.swaplist').css('left'));
if(ml=0 mlw*-1){
$('.swaplist').css({left: w * -1 + 'px'});
$('.mainlist').animate({left: ml + 1000 + 'px'},'slow');
if(ml==0){
$('.swaplist').animate({left: (w - 1000) * -1 + 'px'},'slow');
}
}else{
$('.mainlist').css({left: (w - 1000) * -1 + 'px'});
$('.swaplist').animate({left: sl + 1000 + 'px'},'slow');
if(sl==0){
$('.mainlist').animate({left: '0px'},'slow');
}
}
}
})
});
$(document).ready(function(){
$('.og_prev,.og_next').hover(function(){
$(this).fadeTo('fast',1);
},function(){
$(this).fadeTo('fast',0.7);
})
})
/script
style
body,ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
img{ border:none;}
a{ color:#6cf;}
a:hover{ color:#84B263;}
.box{ width:980px; margin:0 auto; position:relative; overflow:hidden; _height:100%;}
.picbox{ width:980px; height:115px; overflow:hidden; position:relative;}
.piclist{ height:115px;position:absolute; left:0px; top:0px}
.piclist li{ background:#eee; margin-right:20px; padding:5px; float:left;}
.swaplist{ position:absolute; left:-3000px; top:0px}
.og_prev,.og_next{ width:30px; height:50px; background:url(../images/icon.png) no-repeat; background:url(../images/icon_ie6.png) no-repeat\9; position:absolute; top:33px; z-index:99; cursor:pointer;filter:alpha(opacity=70); opacity:0.7;}
.og_prev{ background-position:0 -60px; left:4px;}
.og_next{ background-position:0 0; right:4px;}
/style
/head
body
div class="box"
div class="picbox"
ul class="piclist mainlist"
lia href="#" target="_blank"img src="images/1.jpg" width="220" height="105" //a/li
lia href="#" target="_blank"img src="images/2.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/3.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/4.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/1.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/2.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/3.jpg" width="220" height="105"//a/li
lia href="#" target="_blank"img src="images/4.jpg" width="220" height="105"//a/li
/ul
ul class="piclist swaplist"/ul
/div
div class="og_prev"/div
div class="og_next"/div
/div
/body
/html
