ECshop 开发人性小功能之一
2015-07-14 11:49
260 查看
ecshop添加功能 写道
在Ecshop里 添加一些人性化的小功能 很有用哦
go-top
利用jqu 没有做不到事情 不信来看看 现在商城五花八门 购物模式缺啥一成不变 那么 我们就来比比谁的用户体验好 对吧
谁为用户想的周到 谁就是大哥大!!!
上篇文章说道给小站加个返回顶部的按钮,很简单很实用很友好。一句html插入代码、一句CSS美化代码、一句jQuery滑动代码,轻松搞定!这篇文章接着来说,相关代码上篇文章也已补充,今儿就主要来说说代码的含义。
既然用了,顺便了解学习下它的含义,那是不学白不学的事儿呀!先看效果图,最好是亲自点击体验:
图中左手边三个图标,功能分别是滑动到顶部、到评论、到底部。具体代码:
提示:注意各id(#)或者class(.)之间对应的关系,css中margin-left:-520px;请自行调试!
在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 开发人性小功能之一
- Linux 编写ls -l 命令
- Linux 编写ls -l 命令
- Linux 编写ls -l 命令
- Linux 编写ls -l 命令
- ecshop Ecshop二次开发 ecshio模板设计开发(一)
- cmd&Linux 下使用mysql全记录
- Tomcat Can't load AMD 64-bit .dll on a IA 32
- Linux中iptables设置详细
- shell脚本检测局域网内存活主机
- linux 内存文件系统
- linux 驱动学习笔记03--Linux 内核的引导
- awk 处理 nginx 日志
- [Linux]vbox 虚拟机添加新磁盘
- [Linux]vbox 虚拟机添加新磁盘
- openwrt 交叉编译花生壳
- Linux下的WebLogic安装部署 .
- nginx配置文件
- 海量图片存储与运算架构
- shell 字符串处理