ecshop添加功能 写道
在Ecshop里 添加一些人性化的小功能 很有用哦
go-top
利用jqu 没有做不到事情 不信来看看 现在商城五花八门 购物模式缺啥一成不变 那么 我们就来比比谁的用户体验好 对吧
谁为用户想的周到 谁就是大哥大!!!
上篇文章说道给小站加个返回顶部的按钮,很简单很实用很友好。一句html插入代码、一句CSS美化代码、一句jQuery滑动代码,轻松搞定!这篇文章接着来说,相关代码上篇文章也已补充,今儿就主要来说说代码的含义。
既然用了,顺便了解学习下它的含义,那是不学白不学的事儿呀!先看效果图,最好是亲自点击体验:
图中左手边三个图标,功能分别是滑动到顶部、到评论、到底部。具体代码:
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
// 一个div标签包裹着三个空div标签而已,只为插入显示内容,可放header.php内
#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}
/* 使用fixed使id=“shangxia”的对象固定于浏览器中,相对的上距离为40%,左距离为50%(即居中),然后向左移动520px(需自行调整!!!) */
#shang{background:url(images/shang.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(images/xia.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#comt{background:url(images/comt.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
//点击id="shang"对象时,滑动至相对浏览器滚动条为0px(即顶部),时间为800毫秒
$('#comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});
//点击id="comt"对象时,滑动至id="comment"相对浏览器滚动条的距离,时间为800毫秒
$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
提示:注意各id(#)或者class(.)之间对应的关系,css中margin-left:-520px;请自行调试!
分享到:
相关推荐
EcShop开发案例整理,里面包含比较齐全的案例开发,EcShop开发案例整理代码齐全图文并茂,通俗易懂
ecshop开发的功能文档说明,二次开发,部分功能修改,ecshop 函数列表大全,ecshop首页仿凡客首页放大缩小广告,后台商品列表显缩略图方法,ecshop增加直接购买(快速购买)的功能,如何给ecshop添加可折叠和双排的...
使用者几乎可以在3几分钟简单的设置一下就可以拥有一个网上商店系统,所以很多的B2C站点都选择了使用ECShop网上商店系 统,但是有时候我们需要做一些ecshop本来没有的功能或者前端展示,这时候就需要我们自己去进行...
ecshop 开放帮助手册 需要开发的朋友们 可以下来看看
ecshop2.73的后台所有功能描述,有助于二次开发
包括ecshop模板制作参考手册; ecshop模板制作教程; ecshop数据库说明文档; ecshop函数列表..
十二、实现后台二次开发后功能模块仍然可以分配权限 41 十三、ecshop调用bbs数据 42 十四、整理了一个 获取用户等级的函数 43 十五、商品页显示具体属性排序 44 十六、解决ecshop新建页面分页问题 49 十七、刚修改的...
ecshop开发教程,二次开发教程,数据库结构,模板结构,函数手册
ecshop模板开发,ecshop模板二次开发
ecshop,开发手册,帮助文档 帮助你轻松学会ecshop适合二次开发
ecshop二次开发50个小技巧 1:如何统计ecshop商品在订单中出现的次数 2:ecshop详细页面如何通过onclick点击事件来控制购买,特别用在批发,批发存在一个最小购买量控制.
非常实用的ecshop开发手册,有需要者敬请收藏。为所有想做ecshop 开发者
ECShop模板开发详解.pdf ECShop模板开发详解.pdf ECShop模板开发详解.pdf
ECshop二次开发,包括后台帮助文档,二次开发设计的文件
ECshop二次开发
ecshop开发 ecshop二次开发资料 函数说明及修改
ECSHOP二次开发教程开发手册
包含了ecshop.chm二次开发手册,ECShop二次开发思想,ECShop函数手册,ECShop开发资料,ECSHOP数据库结构参数表
十二、实现后台二次开发后功能模块仍然可以分配权限 41 十三、ecshop调用bbs数据 42 十四、整理了一个 获取用户等级的函数 43 十五、商品页显示具体属性排序 44 十六、解决ecshop新建页面分页问题 49 十七、刚修改的...