经验分享程序开发文档资料数据资源其它资源

jq带滚动条图片滚动特效代价

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jq带滚动条图片滚动特效代价 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jq带滚动条图片滚动特效代价

HTML代码(index.html):

<!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>jq带滚动条图片滚动</title>
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>
<body>
<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#E1E7E8;}
/* imageFlow */
#imageFlow{width:1050px;height:390px;overflow:hidden;position:relative;margin:30px auto 0 auto;}
#imageFlow .diapo{position:absolute;left:-1000px;cursor:pointer;overflow:hidden;}
#imageFlow .bank{visibility:hidden;overflow:hidden;}
#imageFlow ul{height:20px;margin:0 auto;width:100%;text-align:center;}
#imageFlow ul li{color:#333;font-size:12px;text-align:left;margin-left:30%;height:20px;line-height:20px;overflow:hidden;width:100%;vertical-align:bottom;}
#imageFlow .text{position:absolute;left:0px;width:80px;bottom:1%;text-align:center;color:#333;font-family:verdana, arial, Helvetica, sans-serif;z-index:1000;}
#imageFlow .title{font-size:0.9em;font-weight:bold;}
#imageFlow .legend{font-size:0.8em;}
#imageFlow .scrollbar{position:absolute;left:10%;top:0;width:80%;height:16px;z-index:1;}
#imageFlow .scrollbar img{cursor:pointer;}
#imageFlow .track{position:absolute;left:-55px;width:950px;height:16px;top:0px;}
#imageFlow .arrow-left{position:absolute;left:-105px;z-index:1;}
#imageFlow .arrow-right{position:absolute;right:-105px;z-index:1;}
#imageFlow .bar{position:absolute;height:16px;left:25px;top:0px;cursor:pointer;}
#imageFlow .ProTi{color:#ff6600;font-weight:bold;}
#imageFlow .ProRmb{font-weight:bold;}
#imageFlow .ProMo{color:#ff6600;cursor:pointer;}
</style>

<!--[if IE 6]>
<script src="js/DDPngMin.js"></script>
<script>DD_belatedPNG.fix('#imageFlow .diapo');</script>
<![endif]--> 

<script type="text/javascript" src="js/Flow.js"></script>
<script type="text/javascript">
/* ==== create imageFlow ==== */
if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style){ 
	imf.create("imageFlow", 0.78, 1, 5);
	$(document).ready(function(){
		$(".bar").attr("src","images/clear.gif");   
		$(".bar").attr("style","filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/sc.png')");
		$(".arrow-left").attr("src","images/clear.gif");   
		$(".arrow-left").attr("style","filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/btn_Pro_show_left.png')");
		$(".arrow-right").attr("src","images/clear.gif");   
		$(".arrow-right").attr("style","filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/btn_Pro_show_right.png')");
	});
} else { 
	imf.create("imageFlow", 0.5, 1.5, 5);
} 
</script>

<div id="imageFlow">
	<div class="bank">
		<a rel='images/1090.png' href='#'>
			<ul>
				<li class="ProTi" >1090笔记本型光学无线鼠标 </li>
				<li>高精度光学寻迹引擎 </li>
				<li>无线自由 </li>	
				<li>NANO接收器，即插即忘 </li>		
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/1090jzb.png' href='#'>
			<ul>
				<li class="ProTi" >1090精致版笔记本型光学无线鼠标</li>
				<li>高精度光学寻迹引擎 </li>	
				<li>无线自由 </li>	
				<li>NANO接收器，即插即忘 </li>		
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/1030.png' href='#'>
			<ul>
				<li class="ProTi" >1030无线光学鼠标</li>
				<li>高精度光学寻迹引擎 </li>
				<li>无线自由 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/1100X.png' href='#'>
			<ul>
				<li class="ProTi" >1100X光学无线鼠标</li>
				<li>高精度光学寻迹引擎 </li>
				<li>舒适贴心 </li>
				<li>无线自由 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/1200.png' href='#'>
			<ul>
				<li class="ProTi" >1200光学无线鼠标</li>
				<li>高精度光学寻迹引擎 </li>
				<li>无线自由 </li>
				<li>纤薄外观 </li>
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/3100.png' href='#'>
			<ul>
				<li class="ProTi" >3100光学无线鼠标</li>
				<li>高精度蓝光寻迹引擎 </li>
				<li>动感流线，时尚魅力 </li>
				<li>无线自由 </li>
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/7100.png' href='#'>
			<ul>
				<li class="ProTi" >7100光学无线鼠标</li>
				<li>高精度蓝光寻迹引擎 </li>
				<li>精巧独到、舒适贴心 </li>
				<li>无线自由 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/3000.png' href='#'>
			<ul>
				<li class="ProTi" >3000光学无线鼠标</li>
				<li>高精度蓝光寻迹引擎 </li>
				<li>精巧独到、舒适贴心 </li>	
				<li>无线自由 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/3710.png' href='#'>
			<ul>
				<li class="ProTi" >3710无线激光鼠标</li>
				<li>更长电池使用寿命 </li>
				<li>2.4G无线自由 </li>
				<li>激光定位精准，移动灵敏 </li>
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/6310.png' href='#'>
			<ul>
				<li class="ProTi" >6310光学无线鼠标</li>
				<li>高精度蓝光寻迹引擎 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/3180.png' href='#'>
			<ul>
				<li class="ProTi" >3180光学无线鼠标</li>
				<li>高精度蓝光寻迹引擎 </li>
				<li>舒适手感 </li>
				<li>无线自由 </li>
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/3090.png' href='#'>
			<ul>
				<li class="ProTi" >3090笔记本型无线光学鼠标</li>
				<li>高精度光学寻迹引擎 </li>
				<li>人体工学设计 </li>
				<li>无线自由 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
	</div>
	
	<div class="scrollbar">
		<img class="track" src="images/sb.png" alt="" />
		<img class="arrow-left" src="images/btn_Pro_show_left.png" alt="" />
		<img class="arrow-right" src="images/btn_Pro_show_right.png" alt="" />
		<img class="bar" src="images/sc.png" alt=""/>
	</div>
	
</div> 
<!--演示内容结束-->
<br><br><br>
</body>
</html>

JS代码(DDPngMin.js):

/*** DD_belatedPNG:Adds IE6 support:PNG images for CSS background-image and HTML <IMG/>.* Author:Drew Diller* Email:drew.diller@gmail.com* URL:http://www.dillerdesign.com/experiment/DD_belatedPNG/* Version:0.0.8a* Licensed under the MIT License:http://dillerdesign.com/experiment/DD_belatedPNG/#license** Example usage:* DD_belatedPNG.fix('.png_bg');
	// argument is a CSS selector* DD_belatedPNG.fixPng( someNode );
	// argument is an HTMLDomElement**/
var DD_belatedPNG={
	ns:"DD_belatedPNG",imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function(){
	if(document.namespaces&&!document.namespaces[this.ns]){
	document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}
}
,createVmlStyleSheet:function(){
	var b,a;
	b=document.createElement("style");
	b.setAttribute("media","screen");
	document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);
	if(b.styleSheet){
	b=b.styleSheet;
	b.addRule(this.ns+"\\:*","{
	behavior:url(#default#VML)}
");
	b.addRule(this.ns+"\\:shape","position:absolute;
	");
	b.addRule("img."+this.ns+"_sizeFinder","behavior:none;
	border:none;
	position:absolute;
	z-index:-1;
	top:-10000px;
	visibility:hidden;
	");
	this.screenStyleSheet=b;
	a=document.createElement("style");
	a.setAttribute("media","print");
	document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);
	a=a.styleSheet;
	a.addRule(this.ns+"\\:*","{
	display:none !important;
}
");
	a.addRule("img."+this.ns+"_sizeFinder","{
	display:none !important;
}
")}
}
,readPropertyChange:function(){
	var b,c,a;
	b=event.srcElement;
	if(!b.vmlInitiated){
	return}
if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){
	DD_belatedPNG.applyVML(b)}
if(event.propertyName=="style.display"){
	c=(b.currentStyle.display=="none")?"none":"block";
	for(a in b.vml){
	if(b.vml.hasOwnProperty(a)){
	b.vml[a].shape.style.display=c}
}
}
if(event.propertyName.search("filter")!=-1){
	DD_belatedPNG.vmlOpacity(b)}
}
,vmlOpacity:function(b){
	if(b.currentStyle.filter.search("lpha")!=-1){
	var a=b.currentStyle.filter;
	a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;
	b.vml.color.shape.style.filter=b.currentStyle.filter;
	b.vml.image.fill.opacity=a}
}
,handlePseudoHover:function(a){
	setTimeout(function(){
	DD_belatedPNG.applyVML(a)}
,1)}
,fix:function(a){
	if(this.screenStyleSheet){
	var c,b;
	c=a.split(",");
	for(b=0;
	b<c.length;
	b++){
	this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}
}
}
,applyVML:function(a){
	a.runtimeStyle.cssText="";
	this.vmlFill(a);
	this.vmlOffsets(a);
	this.vmlOpacity(a);
	if(a.isImg){
	this.copyImageBorders(a)}
}
,attachHandlers:function(i){
	var d,c,g,e,b,f;
	d=this;
	c={
	resize:"vmlOffsets",move:"vmlOffsets"}
;
	if(i.nodeName=="A"){
	e={
	mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"}
;
	for(b in e){
	if(e.hasOwnProperty(b)){
	c[b]=e[b]}
}
}
for(f in c){
	if(c.hasOwnProperty(f)){
	g=function(){
	d[c[f]](i)}
;
	i.attachEvent("on"+f,g)}
}
i.attachEvent("onpropertychange",this.readPropertyChange)}
,giveLayout:function(a){
	a.style.zoom=1;
	if(a.currentStyle.position=="static"){
	a.style.position="relative"}
}
,copyImageBorders:function(b){
	var c,a;
	c={
	borderStyle:true,borderWidth:true,borderColor:true}
;
	for(a in c){
	if(c.hasOwnProperty(a)){
	b.vml.color.shape.style[a]=b.currentStyle[a]}
}
}
,vmlFill:function(e){
	if(!e.currentStyle){
	return}
else{
	var d,f,g,b,a,c;
	d=e.currentStyle}
for(b in e.vml){
	if(e.vml.hasOwnProperty(b)){
	e.vml[b].shape.style.zIndex=d.zIndex}
}
e.runtimeStyle.backgroundColor="";
	e.runtimeStyle.backgroundImage="";
	f=true;
	if(d.backgroundImage!="none"||e.isImg){
	if(!e.isImg){
	e.vmlBg=d.backgroundImage;
	e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}
else{
	e.vmlBg=e.src}
g=this;
	if(!g.imgSize[e.vmlBg]){
	a=document.createElement("img");
	g.imgSize[e.vmlBg]=a;
	a.className=g.ns+"_sizeFinder";
	a.runtimeStyle.cssText="behavior:none;
	position:absolute;
	left:-10000px;
	top:-10000px;
	border:none;
	margin:0;
	padding:0;
	";
	c=function(){
	this.width=this.offsetWidth;
	this.height=this.offsetHeight;
	g.vmlOffsets(e)}
;
	a.attachEvent("onload",c);
	a.src=e.vmlBg;
	a.removeAttribute("width");
	a.removeAttribute("height");
	document.body.insertBefore(a,document.body.firstChild)}
e.vml.image.fill.src=e.vmlBg;
	f=false}
e.vml.image.fill.on=!f;
	e.vml.image.fill.color="none";
	e.vml.color.shape.style.backgroundColor=d.backgroundColor;
	e.runtimeStyle.backgroundImage="none";
	e.runtimeStyle.backgroundColor="transparent"}
,vmlOffsets:function(d){
	var h,n,a,e,g,m,f,l,j,i,k;
	h=d.currentStyle;
	n={
	W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop}
;
	a=(n.L+n.bLW==1)?1:0;
	e=function(b,p,q,c,s,u){
	b.coordsize=c+","+s;
	b.coordorigin=u+","+u;
	b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";
	b.style.width=c+"px";
	b.style.height=s+"px";
	b.style.left=p+"px";
	b.style.top=q+"px"}
;
	e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);
	e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);
	g={
	X:0,Y:0}
;
	if(d.isImg){
	g.X=parseInt(h.paddingLeft,10)+1;
	g.Y=parseInt(h.paddingTop,10)+1}
else{
	for(j in g){
	if(g.hasOwnProperty(j)){
	this.figurePercentage(g,n,j,h["backgroundPosition"+j])}
}
}
d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);
	m=h.backgroundRepeat;
	f={
	T:1,R:n.W+a,B:n.H,L:1+a}
;
	l={
	X:{
	b1:"L",b2:"R",d:"W"}
,Y:{
	b1:"T",b2:"B",d:"H"}
}
;
	if(m!="repeat"||d.isImg){
	i={
	T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)}
;
	if(m.search("repeat-")!=-1){
	k=m.split("repeat-")[1].toUpperCase();
	i[l[k].b1]=1;
	i[l[k].b2]=n[l[k].d]}
if(i.B>n.H){
	i.B=n.H}
d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}
else{
	d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}
}
,figurePercentage:function(d,c,f,a){
	var b,e;
	e=true;
	b=(f=="X");
	switch(a){
	case"left":case"top":d[f]=0;
	break;
	case"center":d[f]=0.5;
	break;
	case"right":case"bottom":d[f]=1;
	break;
	default:if(a.search("%")!=-1){
	d[f]=parseInt(a,10)/100}
else{
	e=false}
}
d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));
	if(d[f]%2===0){
	d[f]++}
return d[f]}
,fixPng:function(c){
	c.style.behavior="none";
	var g,b,f,a,d;
	if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){
	return}
c.isImg=false;
	if(c.nodeName=="IMG"){
	if(c.src.toLowerCase().search(/\.png$/)!=-1){
	c.isImg=true;
	c.style.visibility="hidden"}
else{
	return}
}
else{
	if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){
	return}
}
g=DD_belatedPNG;
	c.vml={
	color:{
}
,image:{
}
}
;
	b={
	shape:{
}
,fill:{
}
}
;
	for(a in c.vml){
	if(c.vml.hasOwnProperty(a)){
	for(d in b){
	if(b.hasOwnProperty(d)){
	f=g.ns+":"+d;
	c.vml[a][d]=document.createElement(f)}
}
c.vml[a].shape.stroked=false;
	c.vml[a].shape.appendChild(c.vml[a].fill);
	c.parentNode.insertBefore(c.vml[a].shape,c)}
}
c.vml.image.shape.fillcolor="none";
	c.vml.image.fill.type="tile";
	c.vml.color.fill.on=false;
	g.attachHandlers(c);
	g.giveLayout(c);
	g.giveLayout(c.offsetParent);
	c.vmlInitiated=true;
	g.applyVML(c)}
}
;
	try{
	document.execCommand("BackgroundImageCache",false,true)}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
	DD_belatedPNG.createVmlStyleSheet();

JS代码(Flow.js):

var imf = function(){
	var lf = 0;
	var instances = [];
	function getElementsByClass(object,tag,className){
	var o = object.getElementsByTagName(tag);
	for (var i = 0,n = o.length,ret = [];
	i < n;
	i++)if (o[i].className == className) ret.push(o[i]);
	if (ret.length == 1) ret = ret[0];
	return ret;
}
function addEvent(o,e,f){
	if (window.addEventListener) o.addEventListener(e,f,false);
	else if (window.attachEvent) r = o.attachEvent('on' + e,f);
}
function createReflexion(cont,img){
	var flx = false;
	/* ---- DXImageTransform 变化---- */
flx = document.createElement('div');
	//把添加倒影换成添加产品信息//消除了IE下面的倒影//flx.title = img.title;
	//flx.replaceChild(document.createTextNode(o.text),this.legend.firstChild);
	//flx.alt.nodeValue = document.getElementById("text").getAttribute("title");
	/* ---- insert Reflexion 添加倒影换成添加文本---- */
flx.style.position = 'absolute';
	flx.style.left = '-1000px';
	cont.appendChild(flx);
	return flx;
}
/* //////////// ==== ImageFlow Constructor 构造==== //////////// */
function ImageFlow(oCont,size,zoom,border){
	this.diapos = [];
	this.scr = false;
	this.size = size;
	this.zoom = zoom;
	this.bdw = border;
	this.oCont = oCont;
	this.oc = document.getElementById(oCont);
	this.scrollbar = getElementsByClass(this.oc,'div','scrollbar');
	//this.text = getElementsByClass(this.oc,'div','text');
	//改掉单个产品的标题显视方式//this.title = getElementsByClass(this.text,'div','title');
	//this.legend = getElementsByClass(this.text,'div','legend');
	this.bar = getElementsByClass(this.oc,'img','bar');
	this.arL = getElementsByClass(this.oc,'img','arrow-left');
	this.arR = getElementsByClass(this.oc,'img','arrow-right');
	this.bw = this.bar.width;
	this.alw = this.arL.width - 5;
	this.arw = this.arR.width - 5;
	this.bar.parent = this.oc.parent = this;
	this.arL.parent = this.arR.parent = this;
	this.view = this.back = -1;
	this.resize();
	this.oc.onselectstart = function(){
	return false;
}
/* ---- create images 创建图---- */
var img = getElementsByClass(this.oc,'div','bank').getElementsByTagName('a');
	this.NF = img.length;
	for (var i = 0,o;
	o = img[i];
	i++){
	this.diapos[i] = new Diapo(this,i,o.rel,o.title || '- ' + i + ' -',o.innerHTML || o.rel,o.href || '',o.target || '_self',o.cloneNode(true));
}
/* ==== add mouse wheel events 加载鼠标滚轮动作==== */
var temp_h1 = document.body.clientHeight;
	var temp_h2 = document.documentElement.clientHeight;
	var isXhtml = (temp_h2<=temp_h1&&temp_h2!=0)?true:false;
	var htmlbody = isXhtml?document.documentElement:document.body;
	if (window.addEventListener)this.oc.addEventListener('DOMMouseScroll',function(e){
	this.parent.scroll(-e.detail);
	htmlbody.style.overflow = "hidden";
	//上下滚动BUG清除}
,false);
	else this.oc.onmousewheel = function(){
	this.parent.scroll(event.wheelDelta);
	htmlbody.style.overflow = "hidden";
	this.onmouseout = function(){
	htmlbody.style.overflow = "auto";
}
}
/* ==== scrollbar drag N drop 移动==== */
this.bar.onmousedown = function(e){
	if (!e) e = window.event;
	var scl = e.screenX - this.offsetLeft;
	var self = this.parent;
	/* ---- move bar 移动小块---- */
this.parent.oc.onmousemove = function(e){
	if (!e) e = window.event;
	self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw),Math.max(self.alw,e.screenX - scl))) + 'px';
	self.view = Math.round(((e.screenX - scl)) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
	if (self.view != self.back) self.calc();
	return false;
}
/* ---- release scrollbar 释放滚动条---- */
this.parent.oc.onmouseup = function(e){
	self.oc.onmousemove = null;
	return false;
}
return false;
}
/* ==== right arrow 右箭头==== */
this.arR.onclick = this.arR.ondblclick = function(){
	if (this.parent.view < this.parent.NF - 1)this.parent.calc(1);
}
/* ==== Left arrow 左箭头==== */
this.arL.onclick = this.arL.ondblclick = function(){
	if (this.parent.view > 0)this.parent.calc(-1);
}
}
/* //////////// ==== ImageFlow prototype ==== //////////// */
ImageFlow.prototype ={
	/* ==== targets ==== */
calc:function(inc){
	if (inc) this.view += inc;
	var tw = 0;
	var lw = 0;
	var o = this.diapos[this.view];
	if (o && o.loaded){
	/* ---- reset 重置---- */
var ob = this.diapos[this.back];
	if (ob && ob != o){
	ob.img.className = 'diapo';
	ob.z1 = 1;
}
/* ---- update legend 更新说明---- */
//this.title.replaceChild(document.createTextNode(o.title),this.title.firstChild);
	//this.legend.replaceChild(document.createTextNode(o.text),this.legend.firstChild);
	/* ---- update hyperlink 更新超级链接---- */
if (o.url){
	o.img.className = 'diapo link';
	window.status = 'hyperlink:' + o.url;
}
else{
	o.img.className = 'diapo';
	window.status = '';
}
/* ---- calculate target sizes & positions 计算目标大小与设置---- */
o.w1 = Math.min(o.iw,this.wh * .5) * o.z1;
	var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
	var x = x0 + o.w1 + this.bdw;
	for (var i = this.view + 1,o;
	o = this.diapos[i];
	i++){
	if (o.loaded){
	o.x1 = x;
	o.w1 = (this.ht / o.r) * this.size;
	x += o.w1 + this.bdw;
	tw += o.w1 + this.bdw;
}
}
x = x0 - this.bdw;
	for (var i = this.view - 1,o;
	o = this.diapos[i];
	i--){
	if (o.loaded){
	o.w1 = (this.ht / o.r) * this.size;
	o.x1 = x - o.w1;
	x -= o.w1 + this.bdw;
	tw += o.w1 + this.bdw;
	lw += o.w1 + this.bdw;
}
}
/* ---- move scrollbar 移动滚动条---- */
if (!this.scr && tw){
	var r = (this.ws - this.alw - this.arw - this.bw) / tw;
	this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
}
/* ---- save preview view ---- */
this.back = this.view;
}
}
,/* ==== mousewheel scrolling 鼠标滚轮滚动==== */
scroll:function(sc){
	if (sc < 0){
	if (this.view < this.NF - 1) this.calc(1);
	//左移个数；}
else{
	if (this.view > 0) this.calc(-1);
}
}
,/* ==== resize 调整 ==== */
resize:function(){
	this.wh = this.oc.clientWidth;
	this.ht = this.oc.clientHeight;
	this.ws = this.scrollbar.offsetWidth;
	this.calc();
	this.run(true);
}
,/* ==== move all images 移动所有的图片 ==== */
run:function(res){
	var i = this.NF;
	while (i--) this.diapos[i].move(res);
}
}
/* //////////// ==== Diapo Constructor 构造==== //////////// */
Diapo = function(parent,N,src,title,text,url,target,ch){
	this.parent = parent;
	this.loaded = false;
	this.title = title;
	this.text = text;
	this.url = url;
	this.target = target;
	this.N = N;
	this.CH = ch;
	this.img = document.createElement('img');
	this.img.src = src;
	this.img.parent = this;
	this.img.className = 'diapo';
	this.x0 = this.parent.oc.clientWidth;
	this.x1 = this.x0;
	this.w0 = 0;
	this.w1 = 0;
	this.z1 = 1;
	this.img.parent = this;
	this.img.onclick = function(){
	this.parent.click();
}
this.parent.oc.appendChild(this.img);
	/* ---- display external link 显视外部链接---- */
if (url){
	this.img.onmouseover = function(){
	this.className = 'diapo link';
}
this.img.onmouseout = function(){
	this.className = 'diapo';
}
}
}
/* //////////// ==== Diapo prototype模型 ==== //////////// */
Diapo.prototype ={
	/* ==== HTML rendering 渲染==== */
move:function(res){
	if (this.loaded){
	var sx = this.x1 - this.x0;
	var sw = this.w1 - this.w0;
	if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res){
	/* ---- paint only when moving ==移动时绘制---- */
this.x0 += sx * .1;
	this.w0 += sw * .1;
	if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0){
	/* ---- paint only visible images 只绘制能看到的图---- */
this.visible = true;
	var o = this.img.style;
	var h = this.w0 * this.r;
	/* ---- diapo ---- */
o.left = Math.round(this.x0) + 'px';
	o.bottom = Math.floor(this.parent.ht * .25) + 'px';
	o.width = Math.round(this.w0) + 'px';
	o.height = Math.round(h) + 'px';
	/* ---- reflexion 倒影 ---- */
if (this.flx){
	var o = this.flx.style;
	o.left = Math.round(this.x0) + 'px';
	o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';
	o.width = Math.round(this.w0) + 'px';
	o.height = Math.round(h) + 'px';
	this.flx.appendChild(this.CH)//添加...}
}
else{
	/* ---- disable invisible images 看不见的图失效---- */
if (this.visible){
	this.visible = false;
	this.img.style.width = '0px';
	if (this.flx) this.flx.style.width = '0px';
}
}
}
}
else{
	/* ==== image onload 图像截入==== */
if (this.img.complete && this.img.width){
	/* ---- get size image ---- */
this.iw = this.img.width;
	this.ih = this.img.height;
	this.r = this.ih / this.iw;
	this.loaded = true;
	/* ---- create reflexion生成倒影 换成添加文本---- */
this.flx = createReflexion(this.parent.oc,this.img);
	if (this.parent.view < 0) this.parent.view = this.N;
	this.parent.calc();
}
}
}
,/* ==== diapo onclick 幻灯片单击==== */
click:function(){
	if (this.parent.view == this.N){
	/* ---- click on zoomed diapo 单击已放大的图---- */
if (this.url){
	/* ---- open hyperlink 打开一个链接---- */
window.open(this.url,this.target);
}
else{
	/* ---- zoom in/out 放大或缩小动作---- */
this.z1 = this.z1 == 1 ? this.parent.zoom:1;
	this.parent.calc();
}
}
else{
	/* ---- select diapo 选择幻灯片---- */
this.parent.view = this.N;
	this.parent.calc();
}
return false;
}
}
/* //////////// ==== public methods 公共方法==== //////////// */
return{
	/* ==== initialize script 初始化 === */
create:function(div,size,zoom,border){
	/* ---- instanciate imageFlow 实例化---- */
var load = function(){
	var loaded = false;
	var i = instances.length;
	while (i--) if (instances[i].oCont == div) loaded = true;
	if (!loaded){
	/* ---- push new imageFlow instance 新实例进栈---- */
instances.push(new ImageFlow(div,size,zoom,border));
	/* ---- init script (once) 初始化---- */
if (!imf.initialized){
	imf.initialized = true;
	/* ---- window resize event 窗口调整动作---- */
addEvent(window,'resize',function(){
	var i = instances.length;
	while (i--) instances[i].resize();
}
);
	/* ---- stop drag N drop 停止拖动---- */
addEvent(document.getElementById(div),'mouseout',function(e){
	if (!e) e = window.event;
	var tg = e.relatedTarget || e.toElement;
	if (tg && tg.tagName == 'HTML'){
	var i = instances.length;
	while (i--) instances[i].oc.onmousemove = null;
}
return false;
}
);
	/* ---- set interval loop 设置循环间隔---- */
setInterval(function(){
	var i = instances.length;
	while (i--) instances[i].run();
}
,16);
}
}
}
/* ---- window onload event ---- */
addEvent(window,'load',function(){
	load();
}
);
}
}
}
();
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
727.41 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
727.41 KB
立即下载
李娅
了解
打赏作者 鼓励作者
Html Js 滚动条
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章