- 浏览: 98084 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
anybyb:
很详细,学习了
RSS从入门到精通(转载) -
hrsvici412:
浏览器的正中呢?布局中间放置的是iframe
Ext 中随着浏览器的变化window居中 -
Javakeith:
有点太长了!
RSS从入门到精通(转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右滑动-jquery +++++ by:WebStarting</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var sWidth = 80;//单个容器宽度(包括边距,填充),PS:每次位移距离
var visible = 10;//显示数量
var mr = 0; //向左移动的图片个数(为负值)
var bWidth ;//容器宽度
var listLength ;//列表图片个数
var listWidth ;//列表宽度
var listLeft ;//列表位置
var bId; //大容器ID
var listId;//列表ID
var trendLeft;//变化侧栏值
var maxMr;
function init(){
bId = $("#bigDiv");
listId = $("#myList");
bWidth = bId.width();
listLength = listId.find("li").length;
listWidth = listLength*sWidth;
listLeft =parseInt(listId.css('left'));
}
function picList(fx){
init();
maxMr = listLength - visible ;
if(listWidth>bWidth){
if(fx=='next'){
if(-mr < maxMr){
mr--;//每次移动的个数如果我们要移动7个,则为 mr = mr-7;
trendLeft = mr*sWidth;
listId.animate({
left:trendLeft + "px"
},200);
}
}else if(fx=='pre'){
if( mr < 0){
mr++;
trendLeft = mr*sWidth;
listId.animate({
left:trendLeft + "px"
},200);
}
}
}
if(-mr==maxMr){
$("input#btnNext").attr("disabled","disabled");
}else if(mr==0){
$("input#btnPre").attr("disabled","disabled");
}else{
$("input#btnNext").attr("disabled","");
$("input#btnPre").attr("disabled","");
}
}
$(function(){
picList(); //初始化
})
</script>
<style type="text/css">
* {
margin:0;
padding:0;
}
ul, li {
list-style:none;
}
.btn {
margin-top:30px;
}
.lf {
float:left;
}
.mainDiv {
width:800px;
height:80px;
position:relative;
overflow:hidden;
color:#fff;
background:#000;
margin:0 auto;
}
.mainDiv ul#myList {
position:absolute;
left:0px;
z-index:2;
top:10px;
width:20000px;
}
.mainDiv ul#myList li {
width:68px;
height:58px;
border:1px solid #ccc;
background:#444;
float:left;
margin:0 5px;
line-height:58px;
text-align:center;
}
</style>
</head>
<body>
<input type="button" class="lf btn" onclick="picList('pre')" value="上一个" id="btnPre" />
<div class="mainDiv lf" id="bigDiv">
<ul id="myList" style="left:0">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
<input type="button" class="lf btn" onclick="picList('next')" value="下一个" id="btnNext" />
</body>
</body>
</html>
发表评论
-
Ext 中随着浏览器的变化window居中
2011-01-11 16:40 1211//** Ext.ux.CenterWindowPlugin ... -
ext 表单验证实例(转)
2010-12-19 19:21 1347/放在onReady的function(){}中 Ext.Q ... -
一个最简单的例子,清楚说明回调函数的作用和强大功能
2010-11-15 14:54 2311回调函数(Callback Functions) 因为函数和 ... -
Array.prototype.slice.call自解
2010-08-26 11:48 1173为了研究Currying in Javascr ... -
js倒计时2
2010-08-26 11:45 689<script language="JavaS ... -
修改 window.setTimeout,使之可以传递参数和对象参数
2010-08-26 11:44 1125<script language="javas ... -
JS倒计时代码
2010-08-24 14:35 1253第一种:精确到秒的java ... -
JavaScript正则表达式exec和test方法实例!
2010-07-29 09:18 1124<script LANGUAGE="javas ... -
jQuery插件开发 - 其实很简单
2010-07-09 10:46 764【前言】jQuery已经被广泛使用,凭借其简洁的API,对DO ... -
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
2010-06-22 16:27 6661判断select选项中 是否存在Value="pa ... -
js技巧收集(200多个)
2010-06-17 18:06 8181.文本框焦点问题onBlur:当失去输入焦点后产生该事件on ... -
使用Javascript操作DOM的一些方法--元素的访问/复制等
2010-06-11 19:55 651getElementById(id)这是通过id来访问某一 ... -
Javascript遍历页面控件
2010-06-10 17:41 728function validate(){ //var El ... -
javascript中showModalDialog和showModelessDialog区别
2010-06-10 14:40 1004javascript中showModalDialog和show ... -
利用JS中window.showModalDialog()详解
2010-06-10 14:34 930window.showModalDialog()方法 ... -
JavaScript事件绑定的方法说明
2010-06-10 14:33 978事件使得客户端的 JavaSc ... -
十个技术含量超高的JS图片展示特效
2010-05-18 17:32 18433十款超级酷的JS图片展示代码,一定会给你强烈的震撼,技术含量超 ... -
JavaScript CSS Style属性对照表
2010-05-15 11:42 700为了达到某种特殊的效果我们需要用Javascript动态的 ... -
介绍 JSON
2010-05-15 10:51 622JSON(JavaScript Object Notati ... -
JS小游戏贪吃蛇+详细注释
2010-05-08 11:49 1130<!DOCTYPE html PUBLIC " ...
相关推荐
JQuery实现点击放大缩小图片并可左右滑动图片播放,一个比较酷炫的效果,适合美化页面等
jQuery图片左右滚动效果代码是一款带左右箭头,自动轮播的jQuery图片切换特效。
jQuery实现点击左右按钮两行列表滚动效果
左右滑动切换 两端带箭头jQuery焦点图轮播代码,焦点图特效,图片左右滑动切换,很不错,经典的风格,不支持缩略图,不过简洁大气,同样很不错哦。
jquery实现LightBox图片点击放大效果的图片盒子插件 jQuery实现slider图片滚动,单个滚动,成组滚动示例 jQuery实现产品图片循坏旋转的代码 jQuery实现动态图文分组排序切换源码 jQuery实现图片3D旋转特效插件 v1.1...
点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 代码如下: <!DOCTYPE html> <html lange=”en”> <head> <title>点击左右按钮图片横向滚动&...
点击左右按钮,实现图片或者DIV的滑动,也可用于手机开发
之前我们分享过很多不错的jQuery左右滑动焦点图动画,比如宽屏可左右切换的jQuery焦点图插件和jQuery淡入淡出切换效果的焦点图。今天要给大家带来另外一款jQuery焦点图插件,你可以用它来做一个多个人个人名片的滚动...
jQuery Accordion 可左右滑动展开、折叠的滑动门,兼容各大浏览器,外观简洁时尚,鼠标点击时各个菜单项展开,用在网页上是很漂亮的效果。本效果基于jquery实现,可扩展为滑动门等常见的网页特效。
jQuery既可点击左右按钮,也可自动切换的焦点图代码
jquery点击左右箭头切换幻灯片,点击左右箭头可实现切换
jQuery图片左右滑动鼠标悬停放大效果是一个非常简洁易用的jQuery图片放大效果,主要使用jQuery的animate方法实现 没有使用css3代码,支持左右点击滚动,兼容主流浏览器
在做web前端开发的时候经常遇到图片滑动切换特效,接下来通过本文给大家分享使用jQuery实现鼠标点击左右按钮滑动切换特效,感兴趣的朋友参考实现代码
主要介绍了基于jquery实现鼠标左右拖动滑块滑动附源码下载 的相关资料,需要的朋友可以参考下
jquery animate图片模向滑动示例,适用于展示图片太多的页面,通过点击左右方向按钮,滑动展示更多的图片。功能简单,在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。jquery animate() 用于创建自定义动画的...
分享一款jQuery左右滑动的名片风格图片切换特效,类似于一个个人导航效果,圆形的头像图标,下边显示姓名职业等信息,设计新颖漂亮的图片效果。左右两侧的按钮可控制上翻下翻,每点击一次会更换一张图文信息。无缝...
亲自使用过,本人实用场景在百度地图上点击...图片弹出大图覆盖整个页面,有阴罩层,可以左右滑动,右上角有叉,可以关闭。在弹出时,也能设置选中,定位哪张图片。本人在网上找了一堆原生js滑动组件。就遇到这个好用。
html5手机触屏左右滑动切换特效是一款基于html5 jquery实现的移动端html5动画切换效果,可以自动切换,支持鼠标点击拖动滑动。
22. jquery实现LightBox图片点击放大效果的图片盒子插件 23. jQuery实现slider图片滚动,单个滚动,成组滚动示例 24. jQuery实现产品图片循坏旋转的代码 25. jQuery实现动态图文分组排序切换源码 26. jQuery实现...
一个非常简洁易用的jQuery图片放大效果,主要使用jQuery的animate方法实现 没有使用css3代码,支持左右点击滚动,兼容主流浏览器 使用方法: 1、在你的网页中引入lanren.js文件 2、将index.html中...