• 注册
热门标签
↑ 收起导航

随页面滑动且漂浮在左右的快捷操作按钮

最近在做一单品的销售网页,参考了一下山寨机的销售页面,做的到处都是订购下单按钮,有点让人烦!如何能让销售按钮即方便点击,又能保持在用户当前访问的屏幕呢!滑动,是不错的选择!

滑动菜单,能跟随用户翻屏行为,还能在菜单里添加一些回顶、回底等快捷操作,用户体验方面肯定会有不小的提升!

以下是核心代码部分,喜欢的请拿走自行修改!

<style>
    body {background:#454545;}
    .content{margin:0 atuo; width:960px; background:#fff;}
    /* 图标漂浮在右 */
    #shangxia{position:absolute;top:30%;right:50%;margin-right:-520px;display:block; z-index:999999;}
    #shang{background:url(images/t.png) no-repeat;position:relative;cursor:pointer;height:40px;width:40px;margin:10px 0;}
    #gobuy{background:url(images/gobuy.gif) no-repeat;position:relative;cursor:pointer;height:40px;width:40px;margin:10px 0;}
    #xia{background:url(images/d.png) no-repeat;position:relative;cursor:pointer;height:40px;width:40px;margin:10px 0;}

    /* 图标漂浮在左 */
    #Qonline{position:absolute;top:40%;left:50%;margin-left:-605px;display:block; z-index:999999;}
    #q1{background:url(images/q.gif) no-repeat 0px 0px;position:relative;cursor:pointer;width:123px;height:35px;margin:0px; line-height:28px;padding-left:30px;}
    #q2{background:url(images/q.gif) no-repeat 0px -35px;position:relative;cursor:pointer;width:123px;height:35px;margin:0px; line-height:28px;padding-left:30px;}
    #q3{background:url(images/q.gif) no-repeat 0px -70px;position:relative;cursor:pointer;width:123px;height:35px;margin:0px; line-height:28px;padding-left:30px;}
</style>

<!-- float begin -->
<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready(function($){
    var s= $('#Qonline').offset().top;$(window).scroll(function (){$("#Qonline").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
    var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
    $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
    $('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);});
    $('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
    $('#gobuy').click(function(){window.location = 'http://yangjunwei.com';});//也可以是页面中的一个锚点,#buyForm
});
-->
</script>
<div id="Qonline">
    <div id="q1"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=87005971&site=qq&menu=yes" alt="点此进行交流" title="点此进行交流">87005971</a></div>
    <div id="q2"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=87005971&site=qq&menu=yes" alt="点此进行交流" title="点此进行交流">87005971</a></div>
    <div id="q3"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=87005971&site=qq&menu=yes" alt="点此进行交流" title="点此进行交流">87005971</a></div>
</div>
<div id="shangxia">
    <div id="shang"></div><div id="gobuy"></div><div id="xia"></div>
</div>
<div id="footer"></div>
<!-- float end -->
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/347.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

沙发木了,占个板凳也不错~ »

  • 钱慕曼
    2016/01/11 07:06:58

    有意义,有收获,谢谢提供

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册