zoukankan      html  css  js  c++  java
  • PC返回顶部浮动按钮

    要添加的css:

    <style>
    .up{54px;height:54px;background:url(/Images/topback.gif) no-repeat 0 0;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}.up:hover{filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;}
    </style>
    

      

    js代码:

    var scrolltotop={
    	setting:{
    		startline:100, //起始行
    		scrollto:0, //滚动到指定位置
    		scrollduration:400, //滚动过渡时间
    		fadeduration:[500,100] //淡出淡现消失
    	},
    	controlHTML:'<div class="up"></div>', //返回顶部按钮
    	controlattrs:{offsetx:30,offsety:80},//返回按钮固定位置
    	anchorkeyword:"#top",
    	state:{
    		isvisible:false,
    		shouldvisible:false
    	},scrollup:function(){
    		if(!this.cssfixedsupport){
    			this.$control.css({opacity:0});
    		}
    		var dest=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);
    		if(typeof dest=="string"&&jQuery("#"+dest).length==1){
    			dest=jQuery("#"+dest).offset().top;
    		}else{
    			dest=0;
    		}
    		this.$body.animate({scrollTop:dest},this.setting.scrollduration);
    	},keepfixed:function(){
    		var $window=jQuery(window);
    		var controlx=$window.scrollLeft()+$window.width()-this.$control.width()-this.controlattrs.offsetx;
    		var controly=$window.scrollTop()+$window.height()-this.$control.height()-this.controlattrs.offsety;
    		this.$control.css({left:controlx+"px",top:controly+"px"});
    	},togglecontrol:function(){
    		var scrolltop=jQuery(window).scrollTop();
    		if(!this.cssfixedsupport){
    			this.keepfixed();
    		}
    		this.state.shouldvisible=(scrolltop>=this.setting.startline)?true:false;
    		if(this.state.shouldvisible&&!this.state.isvisible){
    			this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]);
    			this.state.isvisible=true;
    		}else{
    			if(this.state.shouldvisible==false&&this.state.isvisible){
    				this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]);
    				this.state.isvisible=false;
    			}
    		}
    	},init:function(){
    		jQuery(document).ready(function($){
    			var mainobj=scrolltotop;
    			var iebrws=document.all;
    			mainobj.cssfixedsupport=!iebrws||iebrws&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;
    			mainobj.$body=(window.opera)?(document.compatMode=="CSS1Compat"?$("html"):$("body")):$("html,body");
    			mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+"</div>").css({position:mainobj.cssfixedsupport?"fixed":"absolute",bottom:mainobj.controlattrs.offsety,right:mainobj.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"返回顶部"}).click(function(){mainobj.scrollup();return false;}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&mainobj.$control.text()!=""){mainobj.$control.css({mainobj.$control.width()});}mainobj.togglecontrol();
    			$('a[href="'+mainobj.anchorkeyword+'"]').click(function(){mainobj.scrollup();return false;});
    			$(window).bind("scroll resize",function(e){mainobj.togglecontrol();});
    		});
    	}
    };
    scrolltotop.init();
    

      备注:需要引用jquery

  • 相关阅读:
    Window 窗口类
    使用 Bolt 实现 GridView 表格控件
    lua的table库
    Windows编程总结之 DLL
    lua 打印 table 拷贝table
    使用 xlue 实现简单 listbox 控件
    使用 xlue 实现 tips
    extern “C”
    COleVariant如何转换为int double string cstring
    原来WIN32 API也有GetOpenFileName函数
  • 原文地址:https://www.cnblogs.com/lxf1117/p/4153582.html
Copyright © 2011-2022 走看看