dedecms织梦建站总结
2024-10-12 21:29:14
说好要每月坚持写博客的，差一点就背弃自己的诺言了。
这一个月，除了修改magento站点和学习android外，一心都投在了为一家建筑公司做网站上去了，使用的是dedecms，我主要做的是前端开发，着实体验了一把开源的力量---拿来用就是了(注：我所说的开源，就是指别人的代码^_^)。
废话不多说，先上成果
页面中很少使用图片做背景，比如说搜索框，因为我觉得那样好low的感觉。
其中折叠菜单如下所示
折叠使用纯CSS3制作，主要代码如下
<div class="wrapper"><!--class="menu"-->
<ul class="navigation">
<li class="menu-item"><a class="top" href='{dede:global.cfg_basehost/}'>网站首页</a></li>
{dede:channelartlist typeid='top'}
<li class="menu-item"><a class="top" href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
<ul>
{dede:channel type='son' noself="yes" }
<li class="dropdown"><a class="son" href='[field:typeurl/]'>[field:typename/]</a></li>
{/dede:channel}
</ul>
</li>
{/dede:channelartlist}
</ul>
</div>
Html Code
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:600);
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
} body {
background: #333333;
} .wrapper {
width: 90%;
margin: 0 auto;
padding-top: 20px;
} .navigation {
width: 100%;
text-align: center;
font: normal 1em/1.5em "Titillium Web", helvetica;
} .navigation li {
float: left;
} .menu-item {
width: 33.333%;
position: relative;
overflow: hidden;
color: #ffffff;
}
.menu-item ul {
position: absolute;
left: 9999px;
opacity:;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
} a.menu-link {
display: block;
padding: 15px;
margin-bottom: 6px;
} a.first {
background: #c0392b;
}
a.second {
background: #c8462b;
}
a.third {
background: #d3592b;
} a.second {
background: #C8462B;
} .dropdown {
width: 100%;
padding: 20px;
}
.dropdown a, .dropdown a:hover, .dropdown a:visited, .dropdown a:focus {
text-decoration: none;
color: #222222;
}
.dropdown:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.dropdown:nth-child(even) {
background: #eeeeee;
transform: perspective(1000px) rotateX(-20deg);
transform-origin: top;
-webkit-transform: perspective(1000px) rotateX(-20deg);
-webkit-transform-origin: top;
}
.dropdown:nth-child(odd) {
background: #f5f5f5;
transform: perspective(1000px) rotateX(20deg);
transform-origin: bottom;
-webkit-transform: perspective(1000px) rotateX(20deg);
-webkit-transform-origin: bottom;
margin-top: -11px;
} .menu-item:hover ul, .menu-item:focus ul {
position: static;
bottom: 200px;
opacity:;
} @media only screen and (max-width: 37.5em) {
.navigation li {
float: none;
clear: both;
} .menu-item {
width: 100%;
}
}
CSS Code
焦点文字slider如下所示，（没录好，滚的有点快）
焦点文字主要js，使用JQuery，需要引入jquery-1.7.2.min.js和common.js
/**
* @author Alexander Farkas
* v. 1.22
*/
(function ($)
{
if (!document.defaultView || !document.defaultView.getComputedStyle)
{ // IE6-IE8
var oldCurCSS = $.curCSS;
$.curCSS = function (elem, name, force)
{
if (name === 'background-position')
{
name = 'backgroundPosition';
}
if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name])
{
return oldCurCSS.apply(this, arguments);
}
var style = elem.style;
if (!force && style && style[name])
{
return style[name];
}
return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
};
} var oldAnim = $.fn.animate;
$.fn.animate = function (prop)
{
if ('background-position' in prop)
{
prop.backgroundPosition = prop['background-position'];
delete prop['background-position'];
}
if ('backgroundPosition' in prop)
{
prop.backgroundPosition = '(' + prop.backgroundPosition;
}
return oldAnim.apply(this, arguments);
}; function toArray(strg)
{
strg = strg.replace(/left|top/g, '0px');
strg = strg.replace(/right|bottom/g, '100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[3]];
} $.fx.step.backgroundPosition = function (fx)
{
if (!fx.bgPosReady)
{
var start = $.curCSS(fx.elem, 'backgroundPosition');
if (!start)
{//FF2 no inline-style fallback
start = '0px 0px';
} start = toArray(start);
fx.start = [start[0], start[2]];
var end = toArray(fx.end);
fx.end = [end[0], end[2]]; fx.unit = [end[1], end[3]];
fx.bgPosReady = true;
}
//return;
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1]; };
})(jQuery); ;(function( $, window, document, undefined ){ // utility function that generates the "dots" navigation
function generateNavigation($el, count, config) {
var i, html = "",
width = count * 32; html += "<ol class='" + config.navigationClass + "' style='margin-left: -" + width/2 + "px; width: " + width + "px'>";
for (i = 0; i < count; i++) {
html += "<li><a " + (i === 0 ? "class='selected'" : "" ) + " href='#" + (i) + "'>slide</a></li>";
}
html += "</ol>"; $el.append(html);
} function sweepOut($el, windowWidth) {
var dfr = $.Deferred(),
pos = $el.position(),
width = $el.width(),
delta, final,
options = $el.data("tlrkAnimOptions"); windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it delta = windowWidth - pos.left;
final = -(delta); setTimeout(function(){
$el.animate({left: final, opacity: "toggle"}, options.speed, options.easing, function(){
dfr.resolve();
});
}, options.delay); return dfr.promise();
} function sweepIn($el, windowWidth, frameLeft) {
var dfr = $.Deferred(),
options = $el.data("tlrkAnimOptions"),
positionData = $el.data("tlrkOriginalPos"),
final = positionData.position.left,
rightEdge; windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it $el.css({opacity: 0, display: "block"}); // move it outside the right edge of the screen
$el.css("left", function(current){
return current + windowWidth - frameLeft;
}); setTimeout(function(){
$el.animate({left: final, opacity: 1}, options.speed, options.easing, function(){
dfr.resolve();
});
}, options.delay); return dfr.promise();
} // two pass function that first iterates all the elements and gets their position/width/height
// and then sets their position to absolute
function absolutize($elements) { // todo - move it to separate function and do it just once
// gather the original position/dimension data for all elements
$elements.each(function(){
var $t = $(this); if ($t.data("tlrkOriginalPos")) return $t.data("tlrkOriginalPos", {
position: $t.position(),
width: $t.width(),
height: $t.height(),
css_pos: $t.css("position"),
css_left: $t.css("left"),
css_top: $t.css("top"),
css_width: $t.css("width") || "auto",
css_height: $t.css("height") || "auto"
}); }); // set the absolute position
$elements.each(function(){
var $t = $(this),
opos = $t.data("tlrkOriginalPos"); $t.css({
position: "absolute",
left: opos.position.left, width: opos.width,
height: opos.height
});
});
} function restoreFrameElements($elements) {
$elements.each(function(){
var $t = $(this),
opos = $t.data("tlrkOriginalPos"); if (!opos) return $t.css({
position: opos.css_pos,
left: opos.css_left,
top: opos.css_top,
width: opos.css_width,
height: opos.css_height
});
}); } var TlrkSlider = function( elem, options ){
this.elem = elem;
this.$elem = $(elem);
this.options = options;
}; // the plugin prototype
TlrkSlider.prototype = {
defaults: { defaultElementOptions: {
speed: 1200,
easing: "easeInOutBack",
// interval before the element starts moving when the fadeIn/Out functions are called
// it's a good idea to give different delays for the different elements
// if all have the same delay they'll start moving all together
delay: 100
}, // dispose elements are these that are not included in the elements object
// but affect the document flow and will be fadedIn/Out
disposeDelay: 100, // delay for the dispose elements
disposeSpeed: 1000, // how quickly they'll fadeOut/In delayBetweenTransition: 1000, // time between starting fadeOut and fadeIn
delayAnimation: 7000, // time between auto changing the current frame loop: true, // if true when clicking next on the last frame the slider jumps to the first one autoStart: true, // start the automatic looping through the frames on init framesSelector: "section", // selector for the frames inside the slider elements: {
"p": {delay: 100, speed: 1000, easing: "easeInOutBack"}
}, navigation: true, // the dots navigation on the bottom
navigationClass: "slider-nav", // callbacks
// another way to "catch" these events is with
// $(-slider-element-).bind("animationStart")
animationStart: null,
animationEnd: null
}, init: function() {
var c, e, element, $element,
that = this,
$firstFrame; c = this.config = $.extend({}, this.defaults, this.options); this.elem.style.position = "relative"; // make the wrapping element relative // basics
this.$frames = this.$elem.find(c.framesSelector);
this.framesCount = this.$frames.length;
this.currentFrame = 0;
this.queue = []; this._$elementsByFrame = {};
this._$disposeElementsByFrame = {}; for (i = 0; i < this.framesCount; i++) {
this._$elementsByFrame[i] = this._getFrameElements(i); // cache the $elements by frame
this._$disposeElementsByFrame[i] = this._getDisposeFrameElements(i); // cache the rest of the tree for each frame
} if (c.navigation) {
generateNavigation(this.$elem, this.framesCount, c);
this.$navigation = this.$elem.find("."+c.navigationClass);
} // bindings
this.$elem.find(".slider-nav").delegate("a", "click", function(e){
var frame = this.getAttribute("href").split("#")[1];
that.go.call(that, frame);
return false;
}); this.$elem // internal bindings for the callbacks
.bind("animationStart", function(){
if ($.isFunction(c.animationStart)) {c.animationStart.apply(that, arguments);}
})
.bind("animationEnd", function(){
if ($.isFunction(c.animationEnd)) {c.animationEnd.apply(that, arguments);}
})
; // start animation?
if (c.autoStart) {
this.start();
} else {
this.running = false;
} return this;
}, start: function(instant) {
var that = this; if (this.timer) { // we'll clear the current timer
window.clearTimeout(this.timer);
} this.running = true; if (instant) {
that.nextFrame();
} else {
this.timer = window.setTimeout(function(){ that.nextFrame.call(that) }, that.config.delayAnimation);
}
}, stop: function() {
if (!this.running) return; // we are not running this.running = false;
window.clearTimeout(this.timer);
}, // main function for changing frames
selectFrame: function(frame, dfr) {
var c = this.config, // shorthand for the config
that = this,
dfr = dfr || $.Deferred(),
dFadeIn = $.Deferred(),
dFadeOut = $.Deferred(); if (isNaN(frame) || frame < 0 || frame > this.framesCount || frame === this.currentFrame) {
dfr.reject();
return dfr.promise();
} // clear the animation loop interval if the animation is running
if (this.running && this.timer) {
window.clearTimeout(this.timer);
} // check if we are currenly running an animation.
if (this.animated && this.queue.length > 0) {
// wait for the last item in the queue to finish
this.queue[this.queue.length-1].done(function(){
that.selectFrame(frame, dfr); // and call again the selectFrame
})
return dfr.promise();
} this.animated = true;
this.$elem.trigger("animationStart", [this, frame]); this.queue.push(dfr); // fade the frames
dFadeOut = this._fadeOutFrame(this.currentFrame); // hide the fadetout frame
dFadeOut.done(function(){
that.$frames.eq(that.currentFrame).hide();
}); window.setTimeout(function(){ // then wait delayBetweenTransition and fadeIn the new frame
dFadeIn = that._fadeInFrame.call(that, frame).done(function(){
// when both the fadeIn and fadeOut are done we'll resolve the selectFrame promise
$.when(dFadeOut, dFadeIn).done(function(){
that.animated = false;
that.queue.shift();
that.$elem.trigger("animationEnd", [that]);
that.currentFrame = frame;
dfr.resolve();
});
});
}, c.delayBetweenTransition); // navigation html change
if (this.config.navigation) {
this.$navigation.find(".selected").removeClass("selected").end()
.find("a").eq(frame).addClass("selected");
} dfr.done(function(){ // we'll resume the loop animation after the transitions are done
if (that.running) {
that.start();
}
}); return dfr.promise();
}, _fadeFrame: function(frame, callback, direction) {
var dfr = $.Deferred(),
$frame = this.$frames.eq(frame),
$elements = this._$elementsByFrame[frame],
windowWidth = $(window).width(), // cache it before the animations, so we don't have to check it for each element
i, len,
that = this,
elementAnimations = [],
$disposeElements = this._$disposeElementsByFrame[frame],
$affectedElements,
frameLeft = $frame.offset().left; direction = direction || "out"; if (!$.isFunction(callback)) return; // do nothing if there's no callback passed $affectedElements = $elements.add($disposeElements); // position absolute the animation and dispose elements
absolutize($affectedElements); // toggle the dispose elements
if ($disposeElements.length > 0) {
window.setTimeout(function(){
$disposeElements[direction === "out" ? "fadeOut" : "fadeIn"](that.config.disposeSpeed);
}, this.config.disposeDelay);
} // invoke the callback for each element
// the callback must return a promise
$elements.each(function(){
elementAnimations.push( callback.call(that, $(this), windowWidth, frameLeft) );
}); // wait for all the elements to finish their animation
$.when.apply(this, elementAnimations).done(function(){
//restoreFrameElements($affectedElements); // and restore the elements' position
dfr.resolve(); // resolve the fade function
}); return dfr.promise();
}, _fadeOutFrame: function(frame) {
var dfr = $.Deferred(),
$frame = this.$frames.eq(frame),
$disposeElements = this._$disposeElementsByFrame[frame]; this._fadeFrame(frame, this._animationOut, "out").done(function(){
dfr.resolve();
}) return dfr.promise();
}, _fadeInFrame: function(frame) {
var dfr = $.Deferred(),
$frame = this.$frames.eq(frame),
$elements = this._$elementsByFrame[frame]; this._restoreFrame(frame); $frame.show(); this._fadeFrame(frame, this._animationIn, "in").done(function(){
dfr.resolve();
}); return dfr.promise();
}, _restoreFrame: function(frame){
if (!frame) return
restoreFrameElements( this._$elementsByFrame[frame].add(this._$disposeElementsByFrame[frame]) );
}, nextFrame: function() {
var frame = this.currentFrame+1,
dfr = $.Deferred(); if (frame > this.framesCount-1) {
if (this.config.loop) {
frame = 0;
} else {
dfr.reject();
}
}; this.selectFrame(frame).done(function(){
dfr.resolve();
}); return dfr.promise();
}, prevFrame: function() {
var frame = this.currentFrame-1,
dfr = $.Deferred(); if (frame < 0) {
if (this.config.loop) {
frame = this.framesCount-1;
} else {
dfr.reject();
return dfr.promise();
}
} this.selectFrame(frame).done(function(){
dfr.resolve();
}); return dfr.promise();
}, go: function(str) { // shorthand
switch (str) {
case "next":
case "+1":
this.nextFrame();
break; case "prev":
case "-1":
this.prevFrame();
break; case "first":
this.selectFrame(0);
break; case "last":
this.selectFrame(this.framesCount-1);
break; default:
if (isNaN(str)) return;
this.selectFrame(Number(str));
}
}, // returns jquery collection of animation elements
_getFrameElements: function(frame) {
var $frame = this.$frames.eq(frame),
elements = this.config.elements,
e, elementOptions,
$found, $frameElements = $([]); for (e in elements) {
elementOptions = elements[e];
$found = $frame.find(e);
$found.addClass("t-frame-element").data("tlrkAnimOptions", $.extend({}, this.defaults.defaultElementOptions, elementOptions ));
$frameElements = $frameElements.add($found);
} return $frameElements;
}, // returns jquery collection of elements that have to be faded out
// i.e. elements on the same level as the animation elements
// that doesn't contain other animation elements
_getDisposeFrameElements: function(frame) {
var $disposeElements = $([]),
$frame = this.$frames.eq(frame),
$elements = this._$elementsByFrame[frame]; $elements.each(function(){
var $t = $(this),
$siblings = $t.siblings().not(".t-frame-element"); $siblings.each(function(){
var $t = $(this);
// check if the node is not already marked and doesn't contains other frame elements
if (!$t.hasClass("t-frame-dispose") && $t.find(".t-frame-element").length === 0) {
$t.addClass("t-frame-dispose");
$disposeElements = $disposeElements.add($t);
}
}); });
return $disposeElements;
}, // expose the internal animationIn/Out functions that are called for each element in the frame
// two arguments are passed - the $element which have to be animated and the window width
_animationIn: sweepIn,
_animationOut: sweepOut } TlrkSlider.defaults = TlrkSlider.prototype.defaults; $.fn.tlrkSlider = function(options) {
var otherArgs = Array.prototype.slice.call(arguments, 1); return this.each(function() {
var $el = $(this),
pluginData = $el.data("tlrkSlider"); if (!pluginData) { // check if the slider is already attached
pluginData = new TlrkSlider(this, options).init();
$el.data("tlrkSlider", pluginData);
return;
} //change the options or call a method
if (typeof options === "string") { // setting / getting option(s)
if (options === "option") { if (typeof otherArgs[0] === "string" && typeof otherArgs[1] !== "undefined") { // set an option value
pluginData.config[otherArgs[0]] = otherArgs[1];
} if (typeof otherArgs[0] === "object") { // extend the config with new options
pluginData.config = $.extend(pluginData.config, otherArgs[0]);
} } else { // call a method?
try {
pluginData[options].apply(pluginData, otherArgs);
} catch(ex) {
throw "Error calling a plugin method (" + ex + ")";
}
}
}
});
}; window.TlrkSlider = TlrkSlider; })( jQuery, window , document ); $(document).ready(function(){
var $backgrounds = $(".header-content").find(".parallax-bg"),
LAYER_OFFSET = 30,
PRLX_SPEED = 1500,
$slider; $slider = $("#slider").tlrkSlider({
autoStart: true,
animationStart: function(ev, slider, step){
var max_steps = this.framesCount;
$backgrounds.each(function(idx, el){
var pos = (step * (100 / max_steps)) + (LAYER_OFFSET * idx);
$(this).animate({"backgroundPosition": pos + "% 0"}, PRLX_SPEED);
});
},
elements: {
"img": {delay: 10},
"h2": {delay: 500},
".copy": {delay: 800},
".button": {delay: 1000}
}
}); $(".header-content")
.hover(
function(){$(this).find(".slider-prev, .slider-next").show();},
function(){$(this).find(".slider-prev, .slider-next").hide();}
)
.find(".slider-prev").click(function(){$slider.tlrkSlider("go", "prev"); return false; }).end()
.find(".slider-next").click(function(){$slider.tlrkSlider("go", "next"); return false; }); });
JS Code
Flash效果如下
Flash很简单，主要使用SWFObject
<div id="index_bt_gg">
<div id="index_bt_gg_ct"></div>
<script type="text/javascript">
var width = '300';
var height = '220';
var s6 = new SWFObject("{dede:global.cfg_templets_skin/}/etc/focus.swf", "mymovie1", width, height, "4", "#ffffff");
s6.addParam("wmode","transparent");
var pics = "";
var links = "";
var texts = "";
{dede:arclist row=4 typeid="6" orderby=pubdate flag='p'}
var uri = "[field:litpic/]"
uri = uri.replace("-lp","");
pics+= uri+"|";
links+="[field:arcurl/]|";
texts+="[field:title/]|";
{/dede:arclist}
pics=pics.substring(0,pics.length-1);
//alert(pics);
links=links.substring(0,links.length-1);
texts=texts.substring(0,texts.length-1);
s6.addVariable("pics",pics);
s6.addVariable("links",links);
s6.addVariable("texts",texts);
s6.addVariable("width",width);
s6.addVariable("height",height);
s6.addVariable("borderwidth",width);
s6.addVariable("borderheight",height);
s6.write("index_bt_gg_ct");
</script>
</div>
HTML+JavaScript Code
这里有个问题，因为通过dede:arclist获取到的图片，都是被压缩的缩略图，dedecms的缩略图的文件名都是在原文件名后面加-lp的，所以拿到url之后，需要将-lp去掉。比如获取到的url是"zm/uploads/allimg/141130/1610442494-0-lp.JPG"，需要修改为"zm/uploads/allimg/141130/1610442494-0.JPG"。
滚动文字如下
<div id="demo" style="overflow:hidden;height:230px;">
<div id="demo1">
{dede:sql sql='Select content from dede_arctype where id=15'}
[field:content function="@me"/]
{/dede:sql}
</div>
<div id="demo2"></div>
</div>
Html Code
var speed = 40;
var demo = document.getElementById("demo");
var demo2 = document.getElementById("demo2");
var demo1 = document.getElementById("demo1"); demo2.innerHTML = demo1.innerHTML;
function Marquee() {//demo2.offsetTop = 1179
if (demo2.offsetTop <= demo.scrollTop + 500) {
demo.scrollTop -= demo1.offsetHeight;//demo1.offsetHeight = 462
}
else {//demo.scrollTop 最大 694
demo.scrollTop++;
}
}
var MyMar = setInterval(Marquee, speed);
demo.onmouseover = function() {
clearInterval(MyMar);
}
demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed);
}
JavaScript Code
这里需要注意，JavaScript中用到的值需要根据div在页面中的位置计算，这点没做好
当点击办公平台或企业邮箱时会有提示，一秒钟后消失
这中效果主要使用了prompt插件。
然后在页面调用
function popMsg(str){
var def = {
content:str,
width : 220, //弹出层的宽度
time:1000
}
$.Prompt(def);
$.Prompt();
}
JAVA Code
自定义select样式
#slinks{
margin:;
padding:;
outline: none;
height: 25px;
line-height: 25px;
width: 100%;
border: rgb(191, 204, 220) 1px solid;
border-radius: 3px;
display: inline-block;
background-size: 5px 5px,5px 5px,25px 25px,1px 25px;
background-color: #fff;
background-image: repeating-linear-gradient(225deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%),
repeating-linear-gradient(135deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%),
linear-gradient( #FFFFFF 0%,#F8F9Fd, #EFFAFA 100%),
repeating-linear-gradient( rgb(191, 204, 220) 0%,rgb(191, 204, 220) 100%);
background-repeat: no-repeat;
background-position: 212px 10px,217px 10px,right top,205px top;
-webkit-appearance: none;
}
Css Code
以上贴的代码只是很小且不完整的部分。能把这个网站做出来，很大程度上得益于我平时整理的前端代码库和手册库
文件比较大现在不便上传。需要的筒子可以联系我或者给我留言
最新文章
- react+redux完整项目
- iOS_开发中引导页的设置及代码
- Hive修改表
- 无法建立SSL连接
- kuangbin_ShortPath F (POJ 3259)
- poj 1113 Wall
- 《sort命令的k选项大讨论》-linux命令五分钟系列之二十七
- Java实现一致性Hash算法深入研究
- typedef和define
- Build制作模型
- 安全系列之二：OAuth2.0 开放授权协议
- Openjudge-NOI题库-变幻的矩阵
- android版火狐调试器
- poj2182（线段树求序列第k小）
- Unity3D手机斗地主游戏开发实战（04）_出牌判断大小
- Activity启动模式（lauchMode）
- 您还在用下一步下一步的方式安装SQLSERVER和SQLSERVER补丁吗？
- effective c++ 笔记 (5-8)
- 13 python logging模块
- ubuntu18.04下搭建深度学习环境anaconda2+ cuda9.0+cudnn7.0.5+tensorflow1.7【原创】【学习笔记】