- 浏览: 406899 次
- 性别:
- 来自: 济南
最新评论
-
nianshi:
slideDown就是show的滑动效果版本, slideUp ...
Jquery零碎代码收藏 -
nianshi:
以后编写JS代码,少写<div onclick=&quo ...
Jquery零碎代码收藏 -
nianshi:
获取匹配元素相对父元素的偏移var p = $("p ...
Jquery零碎代码收藏 -
nianshi:
获取匹配元素在当前窗口的相对偏移var p = $(" ...
Jquery零碎代码收藏 -
wuchu:
谢谢
Flex 读取XML配置文件总结
js代码
var
$
=
function
(id)
{
return " string " == typeof id ? document.getElementById(id):id;
}
var Class =
{
create: function ()
{
return function ()
{
this .initialize.apply( this ,arguments);
}
}
}
Object.extend = function (destination,source)
{
for ( var property in source)
{
destination[property] = source[property];
}
return destination;
}
function addEventHandler(oTarget,sEventType,fnHandler)
{
if (oTarget.addEventListener)
{
oTarget.addEventListener(sEventType,fnHandler, false );
}
else if (oTarget.attachEvent)
{
oTarget.attachEvent( " on " + sEventType,fnHandler);
}
else
{
oTarget[ " on " + sEventType] = fnHandler;
}
}
var Scroller = Class.create();
Scroller.prototype =
{
initialize: function (idScroller,idScrollMid,idScrollLeft,idScrollRight,options)
{
var oScroll = this ,oScroller = $(idScroller),oScrollMid = $(idScrollMid);
this .widthScroller = oScroller.offsetWidth;
this .widthList = oScrollMid.offsetWidth;
if ( this .widthList < this .widthScroller)
{
return ;
}
oScroller.style.overflow = " hidden " ;
oScrollMid.appendChild(oScrollMid.cloneNode( true ));
this .oScroller = oScroller;
this .scroll = true ;
this .SetOptions(options);
this .side = 1 ;
switch ( this .options.Side)
{
case " right " :
this .side =- 1 ;
break ;
case " left " :
default :
this .side = 1 ;
}
addEventHandler(oScrollMid, " mouseover " , function (){ oScroll.scroll = false ; });
addEventHandler(oScrollMid, " mouseout " , function (){ oScroll.scroll = true ; });
if (idScrollLeft)
{
addEventHandler($(idScrollLeft), " click " , function (){ oScroll.side = 1 ; });
}
if (idScrollRight)
{
addEventHandler($(idScrollRight), " click " , function (){ oScroll.side =- 1 ; });
}
this .Scroll();
},
SetOptions: function (options)
{
this .options =
{
Step: 1 ,
Time: 5 ,
Side: " left "
}
Object.extend( this .options,options || {});
},
Scroll: function ()
{
if ( this .scroll)
{
var iScroll = this .oScroller.scrollLeft,iWidth = this .widthList;
if ( this .side > 0 )
{
if (iScroll >= (iWidth * 2 - this .widthScroller))
{
iScroll -= iWidth;
}
}
else
{
if (iScroll <= 0 )
{
iScroll += iWidth;
}
}
this .oScroller.scrollLeft = iScroll + this .options.Step * this .side; //
}
var oScroll = this ;
window.setTimeout( function (){ oScroll.Scroll(); }, this .options.Time);
}
}
window.onload = function ()
{
new Scroller( " idScroller " , " idScrollMid " , " idScrollLeft " , " idScrollRight " );
}
{
return " string " == typeof id ? document.getElementById(id):id;
}
var Class =
{
create: function ()
{
return function ()
{
this .initialize.apply( this ,arguments);
}
}
}
Object.extend = function (destination,source)
{
for ( var property in source)
{
destination[property] = source[property];
}
return destination;
}
function addEventHandler(oTarget,sEventType,fnHandler)
{
if (oTarget.addEventListener)
{
oTarget.addEventListener(sEventType,fnHandler, false );
}
else if (oTarget.attachEvent)
{
oTarget.attachEvent( " on " + sEventType,fnHandler);
}
else
{
oTarget[ " on " + sEventType] = fnHandler;
}
}
var Scroller = Class.create();
Scroller.prototype =
{
initialize: function (idScroller,idScrollMid,idScrollLeft,idScrollRight,options)
{
var oScroll = this ,oScroller = $(idScroller),oScrollMid = $(idScrollMid);
this .widthScroller = oScroller.offsetWidth;
this .widthList = oScrollMid.offsetWidth;
if ( this .widthList < this .widthScroller)
{
return ;
}
oScroller.style.overflow = " hidden " ;
oScrollMid.appendChild(oScrollMid.cloneNode( true ));
this .oScroller = oScroller;
this .scroll = true ;
this .SetOptions(options);
this .side = 1 ;
switch ( this .options.Side)
{
case " right " :
this .side =- 1 ;
break ;
case " left " :
default :
this .side = 1 ;
}
addEventHandler(oScrollMid, " mouseover " , function (){ oScroll.scroll = false ; });
addEventHandler(oScrollMid, " mouseout " , function (){ oScroll.scroll = true ; });
if (idScrollLeft)
{
addEventHandler($(idScrollLeft), " click " , function (){ oScroll.side = 1 ; });
}
if (idScrollRight)
{
addEventHandler($(idScrollRight), " click " , function (){ oScroll.side =- 1 ; });
}
this .Scroll();
},
SetOptions: function (options)
{
this .options =
{
Step: 1 ,
Time: 5 ,
Side: " left "
}
Object.extend( this .options,options || {});
},
Scroll: function ()
{
if ( this .scroll)
{
var iScroll = this .oScroller.scrollLeft,iWidth = this .widthList;
if ( this .side > 0 )
{
if (iScroll >= (iWidth * 2 - this .widthScroller))
{
iScroll -= iWidth;
}
}
else
{
if (iScroll <= 0 )
{
iScroll += iWidth;
}
}
this .oScroller.scrollLeft = iScroll + this .options.Step * this .side; //
}
var oScroll = this ;
window.setTimeout( function (){ oScroll.Scroll(); }, this .options.Time);
}
}
window.onload = function ()
{
new Scroller( " idScroller " , " idScrollMid " , " idScrollLeft " , " idScrollRight " );
}
前台代码
<
body
>
< div id ="idScroller" style ="width:290px; overflow:hidden" >
< div style ="width:2000px" >
< div id ="idScrollMid" style ="float:left;" >
< div style ="float:left" > < img src ="images/pic1.jpg" width ="160px" height ="99px;" /> </ div >
< div style ="float:left" > < img src ="images/pic2.jpg" width ="160px" height ="107px;" /> </ div >
</ div >
</ div >
</ div >
< input id ="idScrollLeft" type ="button" value ="向左" />
< input id ="idScrollRight" type ="button" value ="向右" />
</ body >
< div id ="idScroller" style ="width:290px; overflow:hidden" >
< div style ="width:2000px" >
< div id ="idScrollMid" style ="float:left;" >
< div style ="float:left" > < img src ="images/pic1.jpg" width ="160px" height ="99px;" /> </ div >
< div style ="float:left" > < img src ="images/pic2.jpg" width ="160px" height ="107px;" /> </ div >
</ div >
</ div >
</ div >
< input id ="idScrollLeft" type ="button" value ="向左" />
< input id ="idScrollRight" type ="button" value ="向右" />
</ body >
发表评论
-
encodeURI和encodeURIComponent
2011-12-02 14:00 1327encodeURI和encodeURIComponent ... -
Javascript获取url里面的一些东西
2011-11-01 14:25 889属性 描述 hash 设置或 ... -
不错的JS特效代码
2011-10-31 14:06 776http://js.fgm.cc/learn/ -
你可能不知道的10个JavaScript小技巧
2011-10-31 09:34 690尽管我使用 Javascript来 ... -
jquery选择器摘要
2011-05-25 12:10 930jquery ... -
jquery 多库共存机制
2011-02-11 12:08 1002在web项目开发中,经常需要引用第三方js库,如果第三方 ... -
纯CSS实现两列等高
2011-01-19 17:17 1110<!DOCTYPE html PUBLIC " ... -
Jquery AutoComplete实例
2011-01-14 17:11 1965<!DOCTYPE html PUBLIC " ... -
Jquery AutoComplete自动完成 的使用方法实例
2011-01-14 17:02 1438Jquery AutoComplete自动完成 ... -
JS完美拖拽+拖动改变Div的宽高+关闭按钮
2010-12-31 11:14 2212完美拖拽+拖动改变Div的宽高+关闭按钮 -
Javascript捕获鼠标位置(跨浏览器)
2010-12-31 10:59 1768Html代码 Javascript ... -
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
2010-11-29 11:25 8471 判断select选项中 是否存在Val ... -
javascript获取各种浏览器可见窗口大小
2010-11-29 09:12 935Js代码 function g ... -
js 获取html 控件坐标
2010-11-22 11:29 3431假设 obj 为某个 HTML 控件。 ... -
img SetTimeOut渐现
2010-11-22 09:09 935JS代码: < script lang ... -
js获取页面宽度高度及屏幕分辨率
2010-11-18 15:04 2748网页可见区域宽:document.body.clientWid ... -
Iframe框架高度自适应的实现
2010-11-16 15:21 1206解决iframe框架页面自适应高度问题代码如下,需要注意 ... -
实现iFrame自适应高度,原来很简单!
2010-11-16 15:20 1161实现iFrame自适应高度,原来很简单! 2010-10 ... -
js弹出div对话框(1,透明,2带拖动功能)
2010-11-16 15:19 3161(很好用的)js弹出div对话框(1,透明,2带拖动功能 ... -
JS弹出DIV对话框透明遮罩效果,挺不错
2010-11-16 15:17 1579<!DOCTYPE html PUBLIC & ...
相关推荐
jQuery视差插件ImageScroll是一款基于jQuery CSS3实现的全屏视差滚动效果。
jquery图片滚动demo解压缩即可以用
imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动。
关于canvas-scroll打开手机浏览器,或者chrome模拟手机基于canvas实现图片列表的滚动,通过移动端touch事件进行模拟滚动
使用jQuery-jcImgScroll 插件实现 功能介绍: 1. 可以自定义箭头位置,显示图片数量必须是单数 2. 自定义数字按钮功能 3. 自定义信息显示功能 jQuery-jcImgScroll 调用简单,插件实用!只需修改插件参数 及 CSS便能...
很实用的滚动相册实现源代码,带渐变效果 JS+CSS实现
$('#scrollContent').setScroll( //scrollContent为滚动层的ID {img:'',width:10},//背景图及其宽度 {img:'up_arrow.gif',height:3},//up image {img:'down_arrow.gif',height:3},//down image {img:'scrollbar_...
滚动动画 当您滚动网页时,通过图像序列制作动画。 例子 用法 复制存储库 git 克隆 将js和css文件复制到你的项目中 js/aniscroll.js css/aniscroll.css 将 js 和 css 文件的引用添加到您的项目中 < link rel =...
1. scroll-view水平滚动使用 1. wxml <scroll class=scroll-wrap> <view class=scroll-view-item> <view class=scroll-img-wrap> <image src=../../images/wukecheng@2x.png class=img-responsive> <...
带竖向滚动条的图组展示效果 .box-163css{position:relative;height:330px;border:solid 1px #ddd;width:600px;margin:20px auto;} .picul{ width:100%; float:left;} .picul li{ width:115px; height:115px; float:...
纯js不间断滚动代码 来源: ...使用方法: 应用说明:页面包含... 8、鼠标悬停滚动思想源自Flash,所以有一定的局限性(容器内仅允许用图片<img>或者带链接的图片<a><img>的形式,并需要禁止其自动换行)
imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动。
imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动。 在线演示 源码下载 3.jquery实现的fixed固定层时间轴动态效果 ...
jQuery编程实现一组由8幅图组成的图片,进入网页初始时显示前面4张,然后自动向左滚动,直到屏幕显示的是后4张时停止滚动。... scroll(next_img); } }); //创建一个滚动的函数,使用animate函数自定义动画 function s
无缝滚动——上下</title> <style type=”text/css”> *{margin:0;padding:0;} li{list-style:none;} img{border:0;} #scroll{width:178px;margin:50px auto;position:relative;} .btn{display:...
更具体地说,它会在您向下滚动以使其出现在屏幕上之前在img标签上设置src属性。内容列表变更日志1.5 将工厂提取到提供程序中,因此您可以设置偏移量来预加载图像 app . config ( [ 'ImgSrcOndemandProvider' , ...
滚动标记 滚动页面时跟踪您的... scrollmarker ( 'h1, h2, img' ) ; </ script > 注意:选择器匹配的元素越多,跟踪越详细但速度也越慢 注意:没有 id 属性的元素将根据元素的内容给出一个 支持的浏览器 使用
OpenCV 中cv::imshow 没有窗口滑动条,无法完全显示全部图像。 为方便显示,本程序在 openCV 2.3 下实现一个简易滑动条窗口。... 调用方式: //窗体默认 1200 * 800, 标题 Scroll Window,...scroll_win.myimShow(img);
<scroll-view scroll-y="true" bindscroll="scrollChangeBgColor" class="scroll-view" bindscrolltolower="scrollBottom"> <!--滚动banner--> <!--滑块视图--> <!--推荐...
如果需要让图片全部显示在可视区域时再换成真实src的话,需要把if判断中的条件换成 $off + $height - $scroll 首先给需要延迟加载的img标签加个class名lazy,然后把src的路径赋值给data-original,如下所示: ...