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

jQuery点击锚点链接屏幕滚动代码

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

以下是 jQuery点击锚点链接屏幕滚动代码 的示例演示效果:

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

部分效果截图:

jQuery点击锚点链接屏幕滚动代码

HTML代码(index.html):

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery点击锚点链接屏幕滚动代码</title>
    <link rel="stylesheet" href="icoroll/icomoon/style.css" />
    <link rel="stylesheet" href="icoroll/icoroll.css" />
    <link rel="stylesheet" href="icoroll/dark.css" />

    <script src="icoroll/jquery.js"></script>
    <script src="icoroll/icoroll.js"></script>

    <!--可无视样式-->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 500px;
            color: #fff;
            font-size: 20px;
        }

        #home {
            background: #060;
        }

        #browsers {
            background: #CF0;
        }

        #responsive {
            background: #00F;
        }

        #colors {
            background: #C90;
        }

        #configuration {
            background: #3CF;
        }

        #package {
            background: #0C0;
        }

        #history {
            background: #F00;
        }

        #iconmoon {
            background: #F0F;
        }
    </style>

    <script>
        $(function () {

            icoroll({
                links: $('.scroll'),
                tip_distance: 30,
                back_enabled: true,
                time: 1500
            }, {
                position: 'right',
                elements: [
                { 'class': 'icon-home-2', 'href': '#home', 'content': 'About' },
                { 'class': 'icon-chrome', 'href': '#browsers', 'content': 'Browser support' },
                { 'class': 'icon-mobile', 'href': '#responsive', 'content': 'Responsive' },
                { 'class': 'icon-pencil', 'href': '#colors', 'content': 'Theme change' },
                { 'class': 'icon-cogs', 'href': '#configuration', 'content': 'Configurable' },
                { 'class': 'icon-box-add', 'href': '#package', 'content': 'Package' },
                { 'class': 'icon-IcoMoon', 'href': '#iconmoon', 'content': 'Icomoon' },
                { 'class': 'icon-arrow-left-2', 'href': '#history', 'content': 'History' }
                ]
            });

        });
    </script>
</head>

<body>
    <div id="home">

    </div>
    <div id="browsers">

        <p>browsers内容</p>

    </div>

    <div id="responsive">

        <p>responsive内容</p>

    </div>

    <div id="colors">

        <p>colors内容</p>

    </div>

    <div id="configuration">

        <p>configuration内容</p>

    </div>

    <div id="package">

        <p>package内容</p>

    </div>

    <div id="history">

        <p>history内容</p>

    </div>

    <div id="iconmoon">
        <p>iconmoon内容</p>
    </div>
    <p>
</body>
</html>

JS代码(icoroll.js):

var IcoRoll=function(e,t){
	var n=this;
	this._menu=t?t:false;
	this._tip_free=true;
	this._attrs={
}
;
	this._back=false;
	this._ctime;
	this._is_scrolling=false;
	this._should_hide_back=false;
	this._menu_showed=false;
	this._can_add_hide_button=true;
	this._first_time=true;
	this._istouching=false;
	this._current_outside=false;
	this._above_size=0;
	this._under_size=0;
	this._default_attrs={
	links:$(".icoroll"),time:2e3,tip_distance:30,tip_text:"Click to see more",back_enabled:true,back_text:"Back",mobile_width:600,menu_show_time:500}
;
	for(attr in this._default_attrs)this._attrs[attr]=this._default_attrs[attr];
	for(attr in e)this._attrs[attr]=e[attr];
	var r=this._attrs.links;
	this._time=this._attrs.time;
	this._init=function(){
	this._window_height=$(window).height();
	r.css("cursor","pointer");
	$("body").append('<div id="scroll_tip" class="scroll_colors"></div>');
	$("body").append('<div id="scroll_back" ><span class="scroll_colors">'+this._attrs.back_text+"</span></div>");
	this._$=$("#scroll_tip");
	this._$back=$("#scroll_back");
	this._hideBack();
	var e=this._attrs["menu_show_time"]/1e3;
	e="top "+e+"s";
	this._$back.css({
	transition:e,"-moz-transition":e,"-webkit-transition":e,"-o-transition":e}
);
	if(!this._attrs.back_enabled)this._$back.css({
	display:"none"}
);
	if(this._menu){
	this._generateMenu();
	this._generateBlocks()}
this._bind();
	$(window).trigger("scroll");
	$(window).trigger("resize");
	$(window).load(function(){
	n._generateBlocks();
	$(window).trigger("scroll")}
);
	if(this._menu){
	this._generateBlocks();
	this._setMenuTransition()}
}
;
	this._generateMenu=function(){
	var e='<div id="scroll_menu"><div id="scroll_show_menu_button" class="icon-menu-2 scroll_colors hide_button"></div>';
	e+='<div id="scroll_up_button" class="hover_colors icon-arrow-up nav" ></div>';
	e+='<ul class="scroll_menu scroll_colors">';
	for(el in this._menu.elements){
	e+='<li id="menu_scroll_number_'+el+'" >';
	if(this._menu.position&&this._menu.position=="right"){
	e+='<a href="'+this._menu.elements[el].href+'" class="scroll_colors '+this._menu.elements[el]["class"]+'"></a>';
	if(this._menu.elements[el].content)e+='<span class="scroll_colors">'+this._menu.elements[el].content+"</span>"}
else{
	if(this._menu.elements[el].content)e+='<span class="scroll_colors">'+this._menu.elements[el].content+"</span>";
	e+='<a href="'+this._menu.elements[el].href+'" class="scroll_colors '+this._menu.elements[el]["class"]+'"></a>'}
e+="</li>"}
e+="</ul>";
	e+='<div id="scroll_down_button" class="hover_colors icon-arrow-down nav" ></div></div>';
	$("body").append(e);
	this._$menu=$(".scroll_menu");
	if(this._menu.position&&this._menu.position=="right")$(".scroll_menu li span").css({
	left:this._$menu.width()}
);
	else $(".scroll_menu li span").css({
	right:this._$menu.width()}
);
	if(this._menu.position&&this._menu.position=="right")this._$menu.addClass("scroll_right_menu");
	else this._$menu.addClass("scroll_left_menu");
	this._$button=$("#scroll_show_menu_button");
	this._$nav_up=$("#scroll_up_button");
	this._$nav_down=$("#scroll_down_button");
	this._$navs=$("#scroll_menu .nav");
	this._setMenuPosition();
	this._setMenuButtons();
	this._countHeights();
	this._setMenuPosition()}
;
	this._setMenuTransition=function(){
	var e=this._attrs["menu_show_time"]/1e3;
	var t="opacity "+e+"s,right "+e+"s,left "+e+"s";
	var n="top 0.4s,"+t;
	this._$menu.css({
	transition:n,"-moz-transition":n,"-webkit-transition":n,"-o-transition":n}
);
	this._$navs.css({
	transition:t,"-moz-transition":t,"-webkit-transition":t,"-o-transition":t}
)}
;
	this._setMenuButtons=function(){
	if(this._menu.position&&this._menu.position=="right"){
	this._$button.addClass("right");
	this._$navs.addClass("right")}
else{
	this._$button.addClass("left");
	this._$navs.addClass("left")}
}
;
	this._setMenuPosition=function(){
	this._$menu.css("top",this._above_size);
	this._$menu.css("display","block");
	this._mousestep=this._$menu.find("li").height();
	this._menu_height=this._$menu.height()}
;
	this._countHeights=function(){
	if(this._menu_height<n._window_height-this._above_size-this._under_size)this._above_size=(n._window_height-this._menu_height)/2;
	else this._above_size+=this._$nav_up.height();
	this._under_size=this._$nav_down.height();
	this._menu_visible_elements=Math.round((n._window_height-this._above_size-this._under_size)/this._$menu.find("li").height());
	this._menu_center_element=Math.ceil(this._menu_visible_elements/2)}
;
	this._generateBlocks=function(){
	this._blocks=[];
	for(i in this._menu.elements)if($(this._menu.elements[i].href).length>0)this._blocks[$(this._menu.elements[i].href).offset().top]=this._menu.elements[i].href}
;
	this._linkScrollEvent=function(e){
	this._back=e.offset().top-n._window_height/2;
	var t=e.attr("data-href");
	var r=e.attr("data-back")?e.attr("data-back"):"";
	this._$back.find("span").html(this._attrs.back_text+" "+r);
	if(!t)t=e.attr("href");
	this._scroll(e,$(t));
	if(e.attr("data-noback")==null){
	this._showBack()}
}
;
	this._scroll=function(e,t,n){
	var r=this;
	this._is_scrolling=true;
	this._should_hide_back=false;
	var i=typeof e=="number"?e:e.offset().top;
	var s=typeof t=="number"?t:t.offset().top;
	var o=$("body").height();
	var u=Math.abs(i-s)/o*this._time;
	$("html,body").animate({
	scrollTop:s-this._$back.height()}
,u,function(){
	r._is_scrolling=false;
	if(n)n()}
);
	this._ctime=u}
;
	this._bind=function(){
	this._bindLinks();
	this._bindScroll();
	this._bindBack();
	if(this._menu){
	this._bindMenu();
	this._bindNavs();
	this._bindBrowserLocation();
	this._bindBrowserBack()}
this._bindResize();
	this._bindShowButton()}
;
	this._bindLinks=function(){
	var e=this;
	r.bind("click",function(t){
	e._linkScrollEvent($(this));
	t.preventDefault();
	return false}
);
	r.hover(function(){
	var t=$(this).attr("data-title")?$(this).attr("data-title"):e._attrs.tip_text;
	e._$.html("<span>"+t+"</span>");
	if(e._attrs.tip_distance)var n=e._attrs.tip_distance;
	else var n=$(this).height()>e._$.height()?$(this).height():e._$.height();
	var r=$(this).offset().top-n;
	var i=$(this).offset().left+$(this).width()/2-e._$.width()/2;
	e._$.css({
	top:r,left:i}
);
	e._$.addClass("scroll_tip_show")}
,function(){
	e._$.removeClass("scroll_tip_show")}
)}
;
	this._bindBack=function(){
	var e=this;
	this._$back.bind("click",function(t){
	if(e._ctime==null||e._ctime==0)e._ctime=200;
	if(e._back){
	$("html,body").animate({
	scrollTop:e._back}
,e._ctime);
	e._hideBack()}
t.preventDefault();
	return false}
)}
;
	this._bindResize=function(){
	var e=this;
	$(window).bind("resize",function(){
	if(!e._menu)return;
	e._window_height=$(window).height();
	e._generateBlocks();
	e._above_size=0;
	e._under_size=0;
	if($(window).width()<e._attrs.mobile_width){
	if(e._first_time){
	e._hideMenu();
	e._first_time=false}
e._showButton();
	e._above_size=e._$button.height()}
else{
	e._showMenu();
	e._hideButton()}
if(e._window_height-e._above_size<e._menu_height){
	e._showUpDownButtons();
	e._countHeights()}
else{
	e._above_size=(e._window_height-e._menu_height)/2;
	e._hideUpDownButtons()}
e._setMenuPosition()}
)}
;
	this._bindBrowserBack=function(){
	$(window).on("popstate",function(e){
	e.stopPropagation();
	e.preventDefault();
	return false}
)}
;
	this._bindBrowserLocation=function(){
	$(window).on("hashchange",function(e){
	var t=window.location.href.substr(window.location.href.indexOf("#"));
	var r=n._$menu.find('a[href="'+t+'"]').first().parent();
	r.trigger("click");
	e.stopPropagation();
	e.preventDefault();
	return false}
)}
;
	this.__menuUp=function(e){
	var t=parseInt(n._$menu.css("top"));
	if(t+n._mousestep>n._above_size)n._$menu.css("top",n._above_size);
	else n._$menu.css("top",t+n._mousestep);
	e.preventDefault();
	return false}
;
	this.__menuDown=function(e){
	var t=parseInt(n._$menu.css("top"));
	var r=n._window_height-n._under_size;
	if(t+n._menu_height-n._mousestep<r)n._$menu.css("top",r-n._menu_height);
	else n._$menu.css("top",t-n._mousestep);
	e.preventDefault();
	return false}
;
	this._bindNavs=function(){
	var e=this;
	this._$nav_up.click(this.__menuUp);
	this._$nav_down.click(this.__menuDown)}
;
	this._bindShowButton=function(){
	var e=this;
	$(document).on("click",".hide_button",function(){
	e.__buttonShowHideMenuEvent()}
)}
;
	this.__buttonShowHideMenuEvent=function(){
	if(!this._menu_showed){
	this._showMenu();
	this._menu_showed=true}
else{
	this._hideMenu();
	this._menu_showed=false}
}
;
	this._bindMenu=function(){
	var e=this;
	var t=function(t){
	if(!t)var t=this;
	if(e._istouching)return false;
	e._hideBack();
	var n=e._current.offset().top;
	if(n<e._$nav_up.offset().top||n>e._$nav_down.offset().top){
	e._current_outside=true}
else e._current_outside=false;
	var r=$(t).find("a").attr("href");
	var i=$(t);
	if(r.match(/^http/))r=r.match(/#([a-z0-9_]+)/)[0];
	e._scroll($(window).scrollTop(),$(r),function(){
	e._current_outside=false;
	e._saveToHistory(i)}
);
	return false}
;
	var n=function(){
	var t=$(this);
	var n=$(this).find("a");
	var r=$(this).find("span");
	t.siblings().css("left",0);
	var i=e.__checkBrowser();
	if(i.browser=="msie"&&parseInt(i.version)<8)return false;
	if(e._menu.position&&e._menu.position=="right")t.css("left",-(parseInt(r.width())+parseInt(r.css("padding-right"))));
	else t.css("left",parseInt(r.width())+parseInt(r.css("padding-left")))}
;
	var r=function(){
	$(this).css("left",0)}
;
	this.menuHover=n;
	this.menuUnhover=r;
	this._$menu.find("li").hover(function(e){
	n.call(this)}
,function(e){
	r.call(this)}
);
	this._$menu.find("a").click(function(e){
	e.preventDefault();
	t($(this).parent().get());
	return false}
);
	this._$menu.find("li").click(function(e){
	t(this)}
);
	var i=this._$menu.find("li").get();
	if(i[0]["addEventListener"])for(el in i){
	i[el].addEventListener("touchstart",function(t){
	t.stopPropagation();
	t.preventDefault();
	e._mousey=t.touches[0].screenY;
	e._mousestep=e._$menu.find("a").height();
	e._touchtime=(new Date).getTime();
	e._istouching=true}
,false);
	i[el].addEventListener("touchend",function(i){
	e._istouching=false;
	var s=(new Date).getTime();
	if(Math.abs(s-e._touchtime)<200){
	if(e._current!=null)r.call(e._current);
	t(this);
	if(!$(this).hasClass("current")||$(this).hasClass("hided")){
	n.call($(this));
	$(this).removeClass("hided")}
else $(this).addClass("hided")}
else{
	r.call(e._current)}
}
,false);
	i[el].addEventListener("touchmove",function(t){
	t.stopPropagation();
	t.preventDefault();
	var n=e._mousey-t.touches[0].screenY;
	n=-n;
	if(Math.abs(n)<e._mousestep)n=n>0?e._mousestep:-e._mousestep;
	n=n*2;
	nvalue=parseInt(e._$menu.css("top"))+n;
	var i=nvalue+parseInt(e._menu_height);
	var s=nvalue-e._above_size;
	if(i<=e._window_height)return e._$menu.css("top",e._window_height-e._menu_height-e._under_size);
	if(s>=0)return e._$menu.css("top",e._above_size);
	e._$menu.css("top",nvalue);
	e._mousey=t.touches[0].screenY;
	r(e._current)}
,false)}
}
;
	this._bindScroll=function(){
	var e=this;
	$(window).on("scroll",function(){
	var t=$(window).scrollTop();
	var n=99999999;
	var r;
	for(i in e._blocks){
	if(Math.abs(t-i)<n){
	n=Math.abs(t-i);
	r=e._blocks[i]}
}
if(e._menu){
	var s=e._$menu.find('a[href="'+r+'"]');
	if(s.length==0)s=e._$menu.find('a[href*="'+r+'"]');
	e._checkMenu(s.parent())}
if(e._is_scrolling)return;
	if(!e._should_hide_back)return e._should_hide_back=true;
	e._should_hide_back=false;
	e._hideBack()}
);
	if(e._menu)this._$menu.on("mousewheel",function(t){
	if(e._menu_height<e._window_height-e._above_size-e._under_size)return false;
	if(t.originalEvent.wheelDelta/120>0){
	e.__menuUp(t)}
else{
	e.__menuDown(t)}
}
)}
;
	this._saveToHistory=function(e){
	if(!window.history.state||window.history.state.url!=e.find("a").attr("href"))if(window.history["pushState"])window.history.pushState({
	url:e.find("a").attr("href")}
,e.find("a").attr("href"),e.find("a").attr("href"))}
;
	this._unbindScroll=function(){
	$(window).unbind("scroll")}
;
	this._hideMenu=function(){
	if(this._menu.position&&this._menu.position=="right"){
	this._$navs.css("right",-this._$menu.width());
	this._$menu.css("right",-this._$menu.width())}
else{
	this._$navs.css("left",-this._$menu.width());
	this._$menu.css("left",-this._$menu.width())}
this._current.css("left",0);
	this._changeToShowButton()}
;
	this._showMenu=function(){
	if(this._menu.position&&this._menu.position=="right"){
	this._$navs.css("right",0);
	this._$menu.css("right",0)}
else{
	this._$navs.css("left",0);
	this._$menu.css("left",0)}
this._changeToHideButton()}
;
	this._showUpDownButtons=function(){
	this._$navs.css("display","block");
	this._$nav_up.css({
	top:this._above_size,width:this._$menu.find("a").width()}
);
	this._$nav_down.css({
	bottom:0,width:this._$menu.find("a").width()}
)}
;
	this._hideUpDownButtons=function(){
	this._$navs.css("display","none")}
;
	this._showButton=function(){
	this._$button.css("display","block")}
;
	this._hideButton=function(){
	this._$button.css("display","none")}
;
	this._hideBack=function(){
	this._$back.css("top",-this._$back.height())}
;
	this._showBack=function(){
	this._$back.css("top",0)}
;
	this._changeToHideButton=function(){
	this._$button.removeClass("icon-menu-2");
	this._$button.addClass("icon-close")}
;
	this._changeToShowButton=function(){
	this._$button.removeClass("icon-close");
	this._$button.addClass("icon-menu-2")}
;
	this._checkMenu=function(e){
	e.siblings().removeClass("current");
	e.addClass("current");
	if(this._menu_timeout_id!=null)window.clearTimeout(this._menu_timeout_id);
	this._menu_timeout_id=window.setTimeout(function(){
	n._saveToHistory(e)}
,3e3);
	var t=false;
	this._current=e;
	if(this._menu_height<n._window_height-n._above_size-n._under_size||this._current_outside)return;
	var r=e.offset().top;
	var i=this._$menu.offset().top;
	var s=Math.round((r-i)/this._mousestep)+1;
	if(s<n._menu_center_element)var o=$("#menu_scroll_number_0");
	else var o=$("#menu_scroll_number_"+parseInt(s-n._menu_center_element+1));
	if(s>this._menu.elements.length-(n._menu_visible_elements-n._menu_center_element))var u=$("#menu_scroll_number_"+(this._menu.elements.length-1));
	else var u=$("#menu_scroll_number_"+parseInt(s+(n._menu_visible_elements-n._menu_center_element)-1));
	var a=$(window).scrollTop();
	var f=o.offset().top-a;
	var l=u.offset().top-a;
	var c=n._window_height-this._under_size;
	var h=this._above_size;
	var p=this._$menu.offset().top-a;
	if(l>c){
	var d=true;
	t=n._window_height-this._under_size-(l-p)-this._mousestep}
else if(f<h){
	var d=false;
	t=this._above_size-(f-p)}
if(t===false)return;
	t=Math.round(t/this._mousestep)*this._mousestep;
	var v=t+parseInt(this._menu_height);
	var p=t-this._above_size;
	if(v<=n._window_height)return n._$menu.css("top",n._window_height-n._menu_height-n._under_size);
	if(p>=0)return this._$menu.css("top",this._above_size);
	this._$menu.css("top",t)}
;
	this.__checkBrowser=function(){
	uaMatch=function(e){
	e=e.toLowerCase();
	var t=/(chrome)[ \/]([\w.]+)/.exec(e)||/(webkit)[ \/]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||e.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[];
	return{
	browser:t[1]||"",version:t[2]||"0"}
}
;
	return uaMatch(navigator.userAgent)}
;
	this._init()}
;
	icoroll=function(e,t){
	return new IcoRoll(e,t)}

CSS代码(icoroll.css):

#scroll_tip{background:-moz-linear-gradient(top,rgba(247,247,247,1) 0%,rgba(235,235,235,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(247,247,247,1)),color-stop(100%,rgba(235,235,235,1)));background:-webkit-linear-gradient(top,rgba(247,247,247,1) 0%,rgba(235,235,235,1) 100%);background:-o-linear-gradient(top,rgba(247,247,247,1) 0%,rgba(235,235,235,1) 100%);background:-ms-linear-gradient(top,rgba(247,247,247,1) 0%,rgba(235,235,235,1) 100%);background:linear-gradient(top,rgba(247,247,247,1) 0%,rgba(235,235,235,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7',endColorstr='#ebebeb',GradientType=0 );border:1px solid #F3F3F3;-moz-box-shadow:#D1D1D1 0px 1px 2px,rgba(63,63,63,0.11) 0 2px 3px;-webkit-box-shadow:#D1D1D1 0px 1px 2px,rgba(63,63,63,0.11) 0 2px 3px;box-shadow:#D1D1D1 0px 1px 2px,rgba(63,63,63,0.11) 0 2px 3px;/* For IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=180,Color='#bdbdbd')";/* For IE 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=180,Color='#bdbdbd');zoom:1;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.19);-moz-box-shadow:0 1px 4px rgba(0,0,0,0.19);box-shadow:0 1px 4px rgba(0,0,0,0.19);transition:opacity 0.5s;-moz-transition:opacity 0.5s;/* Firefox 4 */
-webkit-transition:opacity 0.5s;/* Safari and Chrome */
-o-transition:opacity 0.5s;/* Opera */
}
#scroll_tip{position:absolute;z-index:1000;padding:.2em 1em;font-size:13px;opacity:0;}
#scroll_tip:after,#scroll_tip.bottom:after,#scroll_tip.top:after,#scroll_tip.left:after,#scroll_tip.right:after{content:"";width:0;height:0;position:absolute;border-style:solid;border-color:#47a3da transparent;}
#scroll_tip.bottom:after,#scroll_tip:after{bottom:-9px;left:50%;margin-left:-3px;border-width:8px 6px 0 6px;}
#scroll_tip.top:after{top:-9px;left:50%;margin-left:-3px;border-width:8px 6px 0 6px;}
#scroll_tip.right:after{bottom:45%;right:-9px;border-width:8px 6px 0 6px;}
#scroll_tip.left:after{bottom:45%;left:-9px;border-width:8px 6px 0 6px;}
#scroll_tip.scroll_tip_show{opacity:1;}
#scroll_back{position:fixed;width:100%;text-align:center;display:block;cursor:pointer;z-index:99;top:-200px;}
#scroll_back span{display:block;margin:auto;width:30%;padding:.4em 0px;position:relative;font-size:13px;text-transform:uppercase;}
#scroll_back span:after{content:"";width:0px;height:0px;color:white;border-style:solid;border-color:#333 transparent;border-width:0px 6px 8px 6px;position:absolute;bottom:30%;margin-left:20px;}
/* menu */
#scroll_menu{height:100%;}
#scroll_menu a{text-decoration:none;}
.scroll_menu{z-index:1000;position:fixed;list-style-type:none;margin:0;padding:0;display:none;}
.scroll_right_menu{right:0px;}
.scroll_left_menu{left:0px;}
#scroll_menu .nav,#scroll_show_menu_button,.scroll_menu li a,.scroll_menu li span{border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transition:background 0.1s ease-in-out;-moz-transition:background 0.1s ease-in-out;transition:background 0.1s ease-in-out;display:block;min-height:3em;min-width:3em;line-height:3em;text-align:center;position:relative;cursor:pointer;margin:0px;}
#scroll_show_menu_button{position:fixed;top:0px;cursor:pointer;z-index:1100;}
#scroll_menu .nav{position:fixed;display:block;cursor:pointer;z-index:1100;color:white;right:0px;font-size:12px;}
#scroll_show_menu_button.left{left:0px;}
#scroll_show_menu_button.right{right:0px;}
.scroll_menu li{position:relative;transition:left 0.5s;-moz-transition:left 0.5s;/* Firefox 4 */
-webkit-transition:left 0.5s;/* Safari and Chrome */
-o-transition:left 0.5s;/* Opera */
}
.scroll_menu li span{position:absolute;top:0px;padding:0px;margin:0px;display:block;white-space:nowrap;}
.scroll_right_menu li span{padding-right:1em;}
.scroll_left_menu li span{padding-left:1em;}
.scroll_menu li span.scroll_span_show{display:block;width:auto;}
@media all and (max-width:600px){.scroll_menu li:not(.current) a:hover{/* colors of hover element in menu */
background:inherit;color:inherit;text-decoration:none;}
.scroll_menu li:hover,.scroll_menu li:hover a,.scroll_menu li:hover span{background:inherit;color:inherit;text-decoration:none;}
#scroll_back span{width:50%;font-size:11px;}
#scroll_back span:after{display:none;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
181.12 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
181.12 KB
立即下载
葛君云
了解
打赏作者 鼓励作者
Html CSS3特效
最新结算
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
打赏文章