- 浏览: 1588859 次
- 来自: 上海
文章分类
- 全部博客 (374)
- Java (101)
- Struts (54)
- Oracle (30)
- JavaScript (16)
- Spring (27)
- Hibernate (16)
- MyEclipse (3)
- JSF (1)
- FreeMarker (2)
- SiteMesh (2)
- JfreeChart (2)
- Ibatis (2)
- JSP (12)
- MyBatis (4)
- SWFupload (1)
- EJB (4)
- Jboss (4)
- WebService (2)
- Linux (16)
- Android (2)
- XML (6)
- Java 网络编程 (13)
- AXIS2 (1)
- FTP (1)
- Jswing (1)
- Socket (3)
- 杂文选集 (6)
- solr (2)
- PS (1)
- Tomcat (7)
- JDBC (9)
- Highcharts (1)
- maven (1)
- Nodejs (0)
- navicat (2)
- Exception (5)
- eclipse (3)
- jQuery (1)
- springMVC (4)
- MySQL (11)
- SVN (1)
- Sql Server (1)
- zookeeper (1)
- JVM (1)
- Groovy (2)
- Git (1)
- Nginx (1)
- DynamicReport (1)
- IDEA (2)
- JasperReports (1)
- Postgresql (2)
- Mac (1)
- gradle (1)
- 数据结构算法 (1)
最新评论
-
hpu145:
引用引用
java 千分位的添加和去除 -
被遗忘的下路:
少了个junit-4.8.2的包
SSH2整合完整案例(四十三) -
白天看黑夜:
java过滤emoji字符处理,希望能帮到你http://ww ...
emoji 表情图片解决方法 -
caipeiming:
这个挺好JavaScript实现input输入框控件只允许输入 ...
js 控制文本框只能输入中文、英文、数字等 -
双子树:
东西太好啦受教啊
Struts2 JSP中将list,set ,Map传递到Action然后<s:iterator>遍历(三十五)
//支持 左右,滚动 ,上下滚动的话,同理, 修改 margin-left 为 margin-top
//支持 鼠标摸上去 悬停 移开继续滚动
//支持 左右单机按钮 单步定向滚动
//注意 对于常规的滚动,
有两种效果,第一种 带有 动画效果,一种没有动画效果(代码中注释的地方)
var bjscroll={ parendId:"", //ul childClassName:"", //子元素的类样式 pageUnit:1, //轮换可视区域宽 最小 子元素单位 viewWidth:0, //可视区域宽 viewHeight:0, //可视区域高 hasBtn:false, //是否有左右单机按钮 showNum:false, //是否显示数字 1/5 4/5 seamlessScroll:false, //是否采用无缝滚动 hoverStop:true, //获得焦点后是否停止 当前的滚动 timeInterval:2500, //切换显示的时间 scrollWay:"right", leftBtnId:"", //左边和右边的按钮id rightBtnId:"", leftNumId:"", //显示 页面数字的id 1/5 rightNumId:"", leftNum:"", rightNum:"", leftNumEle:"", rightNumEle:"", currentPage:1, //默认显示的第一个 totPage:10, //最大索引值 maxLength:10, //子元素的个数 timer:"", //计时器 btnclick:0, //控制单击 init:function(){ //计算最大索引 if(bjscroll.childClassName!=null && bjscroll.childClassName.length>0){ bjscroll.maxLength=$("."+bjscroll.childClassName).length; }else{ bjscroll.maxLength=document.getElementById(bjscroll.parendId).children.length; } if(bjscroll.pageUnit <= 1){ bjscroll.pageUnit=1; }else if(bjscroll.pageUnit >= bjscroll.maxLength){ bjscroll.pageUnit=bjscroll.maxLength; } bjscroll.totPage=parseInt((bjscroll.maxLength+bjscroll.pageUnit-1)/bjscroll.pageUnit); //有显示数字分页的地方 if(bjscroll.showNum){ bjscroll.leftNum=1; bjscroll.rightNum=bjscroll.totPage-1; bjscroll.leftNumEle=$("#"+bjscroll.leftNumId); bjscroll.rightNumEle=$("#"+bjscroll.rightNumId); } //给btn绑定事件 bjscroll.bindBtnClick(); //控制可视区域 鼠标 hover 事件 if(bjscroll.hoverStop){ $("#"+bjscroll.parendId).hover(function(){window.clearInterval(bjscroll.timer);},bjscroll.startRotation);//鼠标放在最大牌上的时候停止自动按时切换最大牌 离开鼠标复原 } //启动计时器 bjscroll.startRotation(); }, startRotation:function(){ //自动轮换 window.clearInterval(bjscroll.timer); if(bjscroll.seamlessScroll){ bjscroll.timer=window.setInterval("bjscroll."+bjscroll.scrollWay+"SeamlessScroll()",bjscroll.timeInterval); }else{ bjscroll.timer=window.setInterval("bjscroll."+bjscroll.scrollWay+"Scroll()",bjscroll.timeInterval); } //alert(bjscroll.timer); }, bindBtnClick:function(){ //有所有箭头 if(bjscroll.hasBtn){ var leftBtn=$("#"+bjscroll.leftBtnId); var rightBtn=$("#"+bjscroll.rightBtnId); if(bjscroll.seamlessScroll){ $(leftBtn).click(function(){ if(bjscroll.btnclick==0){ bjscroll.btnclick=1; //$(this).attr("disabled",true); window.clearInterval(bjscroll.timer); bjscroll.leftSeamlessScroll(); } }).mouseout(bjscroll.startRotation); $(rightBtn).click(function(){ if(bjscroll.btnclick==0){ bjscroll.btnclick=1; //$(this).attr("disabled",true); window.clearInterval(bjscroll.timer); bjscroll.rightSeamlessScroll(); //rightBtn.disabled=false; } }).mouseout(bjscroll.startRotation); }else{ $(leftBtn).click(function(){ if(bjscroll.btnclick==0){ bjscroll.btnclick=1; //$(this).attr("disabled",false); window.clearInterval(bjscroll.timer); bjscroll.leftScroll(); } }).mouseout(bjscroll.startRotation); $(rightBtn).click(function(){ if(bjscroll.btnclick==0){ bjscroll.btnclick=1; //$(this).attr("disabled",false); window.clearInterval(bjscroll.timer); bjscroll.rightScroll(); //rightBtn.disabled=false; } }).mouseout(bjscroll.startRotation); } } }, leftSeamlessScroll:function(){ //无缝 左边滚动 注意clone尾和头 if(bjscroll.currentPage<=1){ $("#"+bjscroll.parendId+":not(:animated)").css("marginLeft",-bjscroll.viewWidth*(bjscroll.totPage-1)+"px"); } $("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"+="+bjscroll.viewWidth+"px"},bjscroll.leftSeamlessScrollCallBack); }, rightSeamlessScroll:function(){ //无缝 右边滚动 3 1 2 3 1 $("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"-="+bjscroll.viewWidth+"px"},bjscroll.rightSeamlessScrollCallBack); }, leftSeamlessScrollCallBack:function(){ if(bjscroll.currentPage<=1){ //接下来显示最后一个 bjscroll.currentPage=bjscroll.totPage; } bjscroll.currentPage--; bjscroll.calcIndex(); }, rightSeamlessScrollCallBack:function(){ bjscroll.currentPage++; if(bjscroll.currentPage>=bjscroll.totPage){ bjscroll.currentPage=1; $("#"+bjscroll.parendId).css("marginLeft",0+"px"); } bjscroll.calcIndex(); }, leftScroll:function(){ //常规左滚动 if(bjscroll.currentPage<=1){ //接下来要显示最后一个 //$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"-="+bjscroll.viewWidth*(bjscroll.totPage-1)+"px"},bjscroll.leftScrollCallBack); $("#"+bjscroll.parendId+":not(:animated)").css("marginLeft",-bjscroll.viewWidth*bjscroll.totPage+"px"); }else{ //$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"+="+bjscroll.viewWidth+"px"},bjscroll.leftScrollCallBack); } $("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"+="+bjscroll.viewWidth+"px"},bjscroll.leftScrollCallBack); }, rightScroll:function(){ //常规右滚动 if(bjscroll.currentPage>=bjscroll.totPage){ //接下来要显示第一个 //$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"+="+bjscroll.viewWidth*(bjscroll.totPage-1)+"px"},bjscroll.rightScrollCallBack); $("#"+bjscroll.parendId+":not(:animated)").css("marginLeft",bjscroll.viewWidth+"px"); }else{ //$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"-="+bjscroll.viewWidth+"px"},bjscroll.rightScrollCallBack); } $("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"-="+bjscroll.viewWidth+"px"},bjscroll.rightScrollCallBack); }, leftScrollCallBack:function(){ if(bjscroll.currentPage<=1){ bjscroll.currentPage=bjscroll.totPage; }else{ bjscroll.currentPage--; } bjscroll.calcIndex(); }, rightScrollCallBack:function(){ if(bjscroll.currentPage>=bjscroll.totPage){ bjscroll.currentPage=1; }else{ bjscroll.currentPage++; } bjscroll.calcIndex(); }, calcIndex:function(){ bjscroll.leftNum=bjscroll.currentPage; bjscroll.rightNum=bjscroll.totPage-bjscroll.leftNum; if(bjscroll.hasBtn && bjscroll.btnclick==1){ bjscroll.btnclick=0; } if(bjscroll.showNum){ bjscroll.showNumFun(); } }, showNumFun:function(){ //显示轮换页数 $(bjscroll.leftNumEle).text(bjscroll.leftNum+"/"+bjscroll.totPage); $(bjscroll.rightNumEle).text(bjscroll.rightNum+"/"+bjscroll.totPage); }, clearRotation:function(){ window.clearInterval(bjscroll.timer); } }
例子:
<div style="width:9999px" id="rotationparent"> <div></div> <div></div> ... </div> 或者 是 ul li 然后在窗体加载事件里面写 $(function(){ //gundong bjscroll.parendId="rotationparent"; bjscroll.viewWidth=840; bjscroll.pageUnit=3; bjscroll.scrollWay="right"; bjscroll.leftBtnId="leftBtn"; bjscroll.rightBtnId="rightBtn"; bjscroll.childClassName="gund .prod"; bjscroll.hasBtn=true; bjscroll.init(); }); 对于常规的滚动, 有两种效果,第一种 带有 动画效果,一种没有动画效果(代码中注释的地方)
评论
3 楼
lengzl
2014-07-09
这么长的代码,你是怎样构思,又是怎样写出来的?
真的很佩服!
真的很佩服!
2 楼
Luob.
2014-07-08
chenzheng8975 写道
哈哈 楼主好久没动态啊
忙啊
1 楼
chenzheng8975
2014-07-08
哈哈 楼主好久没动态啊
发表评论
-
JS 数组操作
2014-12-02 17:44 12071、数组的创建 var arrayObj = new Ar ... -
Ajax 传递数组到后台
2014-12-02 17:29 18512function login123(){ var n ... -
jquery 获取表单数据
2014-11-26 13:54 1366<html> <head> & ... -
JavaScript 计时器,倒计时
2014-07-08 11:13 1209先看效果 //列表的的效果 //单个效果 va ... -
jQuery的deferred对象详解
2014-02-21 15:13 961原文地址:http://www.ruanyifeng.com/ ... -
Jquery template 小demo
2014-02-20 20:04 741<!DOCTYPE html> <h ... -
用 ant和 YUIcompressor 对css,js压缩小demo
2014-02-20 20:00 1426<?xml version="1.0&qu ... -
js === 和 == 的区别
2014-01-21 23:18 831如果是基本类型 var ... -
js 钱大小写转换,和 数值格式化
2013-08-28 20:21 1743var num=56.45678; var rs1=num. ... -
js 打印
2013-08-28 20:04 1218js web页面打印 //关键的就下面两行 会用就行了 ... -
jquery Iframe 父子窗体
2013-08-12 18:26 2027子窗体的操作 //获取 父窗体 ... -
Jquery 修改按钮的单击函数
2013-08-09 21:44 2171场景button的 onclick 初试化的时候 函数手动写上 ... -
XMLhttpRequest 请求 XML,JSON ,POJO 数据
2012-10-09 22:48 15311在使用XMlhttpRequest对象发送请求和响应之前,必须 ... -
js 控制文本框只能输入中文、英文、数字等
2012-09-25 09:08 11903总而言之:先在<input>里输入onkeyup= ... -
JS 判断时间大小(一)
2012-08-22 11:37 20721.使用 Date.parse() var starttime ...
相关推荐
JavaScript 上下无缝图片滚动是一种常见的网页动态效果,用于展示一系列图片,给用户带来更丰富的视觉体验。这种技术常被应用于产品展示、轮播广告或图片画廊等场景,如糯米网的产品展示。在这个效果中,图片会按照...
JavaScript 图片无缝滚动源码 图片无缝滚动源码
JavaScript图片左右无缝滚动是一种常见的网页动态效果,常用于展示多张图片并使用户可以通过鼠标操作来浏览。这种技术主要依赖JavaScript语言以及HTML和CSS来实现。以下是对这一知识点的详细说明: 1. **JavaScript...
原生JavaScript实现图片无缝滚动,主要涉及以下几个步骤: 1. **HTML 结构**:创建一个包含所有图片的`<div>`容器,每张图片作为`<img>`元素放入其中。 ```html ... ``` 2. **CSS 样式**:设置容器的`...
接下来,我们可能还需要一个JavaScript(或jQuery)脚本来实现无缝滚动。主要步骤包括: 1. **获取图片列表**:找到所有的图片元素,并记录其宽度。 2. **计算总宽度**:将所有图片宽度相加,再加上适当的间隙,...
JavaScript 图片滚动插件是一种广泛应用于网页设计中的动态效果工具,它使得图片展示更加生动有趣。在网页设计中,图片滚动通常用于展示多张图片,尤其是对于产品展示、新闻更新或者图片滑块等场景,能有效提升用户...
### JavaScript + div 图片无缝滚动知识点解析 #### 一、技术背景与应用场景 在Web开发领域,使用JavaScript结合HTML和CSS实现动态效果是常见的做法。其中,“图片无缝滚动”是一种非常实用的技术,常用于网站轮播...
在探讨“javascript无缝滚动代码”的知识点时,我们主要聚焦于如何通过JavaScript和HTML结合,实现图片的无缝滚动效果。此技术常用于网站设计中的轮播图、广告位或信息流等场景,能够提升用户体验,使页面更加生动...
以上是关于JavaScript图片滚动的基本实现和扩展功能的介绍。在实际项目中,可以结合CSS3的动画属性,如`translateX`和`translateY`,以及现代浏览器的`requestAnimationFrame`来优化滚动性能和动画平滑度。同时,...
这个文件可能包含了实现无缝滚动的JavaScript代码,包括定义滚动速度、动画效果、事件监听等功能。开发者可以通过引入这个文件到HTML页面,并配置相关参数来启用图片滚动效果。 在实际应用中,创建无缝图片滚动效果...
标题中的“图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向”涉及到的是网页设计中的一个常见功能——图片滚动效果。这种效果通常用于展示多张图片,以滚动的方式呈现,使得用户无需手动翻页就能浏览到...
这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现这种效果的JavaScript代码。以下是关于这个插件及其相关技术的知识点详解: 1. **JavaScript基础**:无缝滚动效果主要依赖...
在实现无缝图片滚动时,开发者通常会使用JavaScript库,如jQuery,来处理事件和动画效果。jQuery是一个轻量级、高性能的JavaScript库,提供了丰富的API供开发者使用。在这个例子中,"jquery-gd"可能是一个基于jQuery...
"marquee图片无缝滚动(上下左右均可)" 这个标题涉及到一个JavaScript或HTML元素的使用,即`<marquee>`标签,它用于创建一个滚动的效果,通常用于文字或图像的自动滚动。这里的关键词是“无缝滚动”,意味着在滚动...
本文将深入探讨如何使用JavaScript来实现文字和图片的无缝滚动效果,以及如何通过复制和应用提供的js代码来创建这些效果。 无缝滚动技术的主要目标是让页面内容(无论是文字还是图片)在不中断视觉连续性的情况下...
JavaScript图片无缝滚动是一种常见的网页动态效果,用于展示一组图片或内容,通过自动循环滚动的方式,为用户带来流畅的视觉体验。这种技术广泛应用于网站的广告轮播、产品展示等场景。下面将详细介绍JavaScript图片...
在图片无缝滚动中,JavaScript主要负责处理时间间隔、图片切换逻辑和事件监听。例如,可以使用`setInterval`函数每隔一定时间自动切换图片,或者通过`addEventListener`监听用户的鼠标悬停和点击事件,实现手动控制...
2. **无缝滚动**:无缝滚动是网页设计中的一种效果,使得内容(如图片)在滚动时没有明显的断点,仿佛一直在平滑移动。这种效果可以增加用户体验,尤其在展示产品或信息时更为吸引人。 3. **实现方法**:使用jQuery...
"jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术,它使得图片能够在页面上以平滑、连续的方式移动,既可以从左到右,也可以从上到下,为用户带来流畅的视觉体验。 jQuery是一个...