【项目总结】韩雪官方网站

由Goofy发布在前端开发、建站相关

网站地址：

http://hanxue.cc

 

响应式网站：

以宽度为标准响应设备。

 

外部引用的类库：

基本类库：jquery；

音乐播放插件：audiojs；

视频（图片）展示插件：fancybox。

 

二次开发的插件：

专辑页面的图片滚动：gallery（从17素材采集）。

 

自主开发的插件：

区域滚动条：jsscroll；

仿ios幻灯片：picFocus

 

CMS系统：

dede织梦cms管理。

 

CMS二次开发内容：

跨栏目读取图片；

多层级栏目读取。

 

遇到的障碍：

问题：

图片列表页到幻灯片页面的跳转与定位问题。

解决方案：

从列表页通过修改跳转ur，带值到幻灯片页面，来判断当前应该显示哪一张图片。
设置跳转的目标参数：
url = $(this).attr("href")+"?index="+index;
读取参数：
initIndex = window.location.href.split("index=")[1]

问题：

专辑页面的仿ios的滚动效果，原例中是三张图片循环，要改成显示所有图片，如何让图片从一边到另一边且不影响中间的主要图片。

解决：

插件的原思路就是用transition结合transform来完成切换动画的。以透视效果（perspective），来完成透视效果。原例中用了preserve-3d，加了这个属性，元素间的层叠关系便不再受z-index控制，会影响到切换的效果，所以实例中移除了这个属性。

至于姜三张图片变为多张图片，其实就是加了图片定位的初始化，计算出初始化时，左侧与右侧应该有多少张图片，再加上一定的距离规则让他们平均分布。下面是计算分布的代码块。
this.leftCount = parseInt(this.itemsCount / 2);
this.rightCount = parseInt(this.itemsCount / 2);
this.baseDistance = 280;
this.baseRange = 50;
if (!(this.itemsCount % 2)) {
this.rightCount--;
}
this.baseRange = this.baseRange / this.rightCount;

问题：

专辑页面专辑图片的类别问题。

解决：

因为后台结构中音乐没有音乐专辑图片的直接分类，所以就要单独划出一个分类专门做专辑封面的管理，该项目中我走了弯路，导致从专辑图片到专辑音乐页面的跳转产生了问题，该项目中是利用dede中权重这个参数手动配对，才能保证一个专辑图片能正确链接到该专辑的音乐页面，实际上只要在专辑类别上定一个专辑的模型就可以正确链接到类别列表页面，或者在产品上增加专辑图片的字段，然后将图片推荐到封面页面就好了。

问题：

关于百度分享插件的图片分享。

解决：

我这边测试的结果是图片的分享要图片已经在页面中载入后，统一对符合条件（tag）的图片进行绑定。

而如果你要通过分享链接自动抓取图片显然条件更苛刻了，我这里是自己用js方法去取我想要取的图片，然后将这个图片放到插件的默认参数里面，来达到抓取页面图片的效果。
var picSrc = "{dede:field.picname/}";
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"{dede:field.title/}","bdMini":"2","bdMiniList":false,"bdPic":picSrc,"bdStyle":"2","bdSize":"24"},"share":{},"image":{"viewList":["tsina","tqq"],"viewText":"","viewSize":"24","tag":"shareImg"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

 

问题：

跨栏目层级读取，并读取子栏目中的第一个文章的缩略图。

解决：

涉及到了php的循环和嵌套中的sql查表，直接看代码。

{dede:field.typeid runphp="yes"}//根据typeid做遍历的变量
global $dsql;
$dsql -> SetQuery("SELECT * FROM test_arctype where reid=@me");//查当前类别下的所有子类别
@me="";
$dsql -> Execute();
$dsqls = $dsql;
while($son = $dsqls->GetArray()){//开始循环输出
$sid = $son['id'];
$sonarc = $dsql->GetOne("SELECT litpic FROM test_archives where typeid=$sid ORDER BY `snow_archives`.`senddate` desc");//查出子类里面第一个文档的缩略图
$sonarc = $sonarc['litpic'];
@me=@me.MfTypedir($son['typedir']).$son['id'].$sonarc;//MfTypedir函数格式化地址
}
{/dede:field.typeid}
遗留问题：php变量的操作出现点障碍。

问题：

取消手机中屏幕拖动事件。
解决：

$("body").bind("touchmove",function(event){
event.preventDefault();
});
$("body").unbind("touchmove");//恢复拖动

 

问题：

织梦CMS各种不明默认数值让我抓狂。

解决：

因为问题出现的时候已经生产，我只有没羞没臊的在各种列表都加了个很大的最小输出量，而避免二次开发，文字默认长度也给了很大的限制。

发表回复