dedecms织梦建站总结
说好要每月坚持写博客的，差一点就背弃自己的诺言了。
这一个月，除了修改magento站点和学习android外，一心都投在了为一家建筑公司做网站上去了，使用的是dedecms，我主要做的是前端开发，着实体验了一把开源的力量---拿来用就是了(注：我所说的开源，就是指别人的代码^_^)。
废话不多说，先上成果
页面中很少使用图片做背景，比如说搜索框，因为我觉得那样好low的感觉。
其中折叠菜单如下所示
折叠使用纯CSS3制作，主要代码如下
1 <div class="wrapper"><!--class="menu"--> 2 <ul class="navigation"> 3 <li class="menu-item"><a class="top" href='{dede:global.cfg_basehost/}'>网站首页</a></li> 4 {dede:channelartlist typeid='top'} 5 <li class="menu-item"><a class="top" href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a> 6 <ul> 7 {dede:channel type='son' noself="yes" } 8 <li class="dropdown"><a class="son" href='[field:typeurl/]'>[field:typename/]</a></li> 9 {/dede:channel} 10 </ul> 11 </li> 12 {/dede:channelartlist} 13 </ul> 14 </div>
1 @import url(http://fonts.googleapis.com/css?family=Titillium+Web:600); 2 * { 3 -moz-box-sizing: border-box; 4 -webkit-box-sizing: border-box; 5 box-sizing: border-box; 6 } 7 8 body { 9 background: #333333; 10 } 11 12 .wrapper { 13 width: 90%; 14 margin: 0 auto; 15 padding-top: 20px; 16 } 17 18 .navigation { 19 width: 100%; 20 text-align: center; 21 font: normal 1em/1.5em "Titillium Web", helvetica; 22 } 23 24 .navigation li { 25 float: left; 26 } 27 28 .menu-item { 29 width: 33.333%; 30 position: relative; 31 overflow: hidden; 32 color: #ffffff; 33 } 34 .menu-item ul { 35 position: absolute; 36 left: 9999px; 37 opacity: 0; 38 transition: all .2s ease-in-out; 39 -webkit-transition: all .2s ease-in-out; 40 } 41 42 a.menu-link { 43 display: block; 44 padding: 15px; 45 margin-bottom: 6px; 46 } 47 48 a.first { 49 background: #c0392b; 50 } 51 a.second { 52 background: #c8462b; 53 } 54 a.third { 55 background: #d3592b; 56 } 57 58 a.second { 59 background: #C8462B; 60 } 61 62 .dropdown { 63 width: 100%; 64 padding: 20px; 65 } 66 .dropdown a, .dropdown a:hover, .dropdown a:visited, .dropdown a:focus { 67 text-decoration: none; 68 color: #222222; 69 } 70 .dropdown:first-child { 71 border-top: 1px solid rgba(0, 0, 0, 0.3); 72 } 73 .dropdown:nth-child(even) { 74 background: #eeeeee; 75 transform: perspective(1000px) rotateX(-20deg); 76 transform-origin: top; 77 -webkit-transform: perspective(1000px) rotateX(-20deg); 78 -webkit-transform-origin: top; 79 } 80 .dropdown:nth-child(odd) { 81 background: #f5f5f5; 82 transform: perspective(1000px) rotateX(20deg); 83 transform-origin: bottom; 84 -webkit-transform: perspective(1000px) rotateX(20deg); 85 -webkit-transform-origin: bottom; 86 margin-top: -11px; 87 } 88 89 .menu-item:hover ul, .menu-item:focus ul { 90 position: static; 91 bottom: 200px; 92 opacity: 1; 93 } 94 95 @media only screen and (max-width: 37.5em) { 96 .navigation li { 97 float: none; 98 clear: both; 99 } 100 101 .menu-item { 102 width: 100%; 103 } 104 }
焦点文字slider如下所示，（没录好，滚的有点快）
焦点文字主要js，使用JQuery，需要引入jquery-1.7.2.min.js和common.js
1 /** 2 * @author Alexander Farkas 3 * v. 1.22 4 */ 5 (function ($) 6 { 7 if (!document.defaultView || !document.defaultView.getComputedStyle) 8 { // IE6-IE8 9 var oldCurCSS = $.curCSS; 10 $.curCSS = function (elem, name, force) 11 { 12 if (name === 'background-position') 13 { 14 name = 'backgroundPosition'; 15 } 16 if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) 17 { 18 return oldCurCSS.apply(this, arguments); 19 } 20 var style = elem.style; 21 if (!force && style && style[name]) 22 { 23 return style[name]; 24 } 25 return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force); 26 }; 27 } 28 29 var oldAnim = $.fn.animate; 30 $.fn.animate = function (prop) 31 { 32 if ('background-position' in prop) 33 { 34 prop.backgroundPosition = prop['background-position']; 35 delete prop['background-position']; 36 } 37 if ('backgroundPosition' in prop) 38 { 39 prop.backgroundPosition = '(' + prop.backgroundPosition; 40 } 41 return oldAnim.apply(this, arguments); 42 }; 43 44 function toArray(strg) 45 { 46 strg = strg.replace(/left|top/g, '0px'); 47 strg = strg.replace(/right|bottom/g, '100%'); 48 strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2"); 49 var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); 50 return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[3]]; 51 } 52 53 $.fx.step.backgroundPosition = function (fx) 54 { 55 if (!fx.bgPosReady) 56 { 57 var start = $.curCSS(fx.elem, 'backgroundPosition'); 58 if (!start) 59 {//FF2 no inline-style fallback 60 start = '0px 0px'; 61 } 62 63 start = toArray(start); 64 fx.start = [start[0], start[2]]; 65 var end = toArray(fx.end); 66 fx.end = [end[0], end[2]]; 67 68 fx.unit = [end[1], end[3]]; 69 fx.bgPosReady = true; 70 } 71 //return; 72 var nowPosX = []; 73 nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; 74 nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; 75 fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1]; 76 77 }; 78 })(jQuery); 79 80 81 82 ;(function( $, window, document, undefined ){ 83 84 // utility function that generates the "dots" navigation 85 function generateNavigation($el, count, config) { 86 var i, html = "", 87 width = count * 32; 88 89 html += "<ol class='" + config.navigationClass + "' style='margin-left: -" + width/2 + "px; width: " + width + "px'>"; 90 for (i = 0; i < count; i++) { 91 html += "<li><a " + (i === 0 ? "class='selected'" : "" ) + " href='#" + (i) + "'>slide</a></li>"; 92 } 93 html += "</ol>"; 94 95 $el.append(html); 96 } 97 98 function sweepOut($el, windowWidth) { 99 var dfr = $.Deferred(), 100 pos = $el.position(), 101 width = $el.width(), 102 delta, final, 103 options = $el.data("tlrkAnimOptions"); 104 105 windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it 106 107 delta = windowWidth - pos.left; 108 final = -(delta); 109 110 setTimeout(function(){ 111 $el.animate({left: final, opacity: "toggle"}, options.speed, options.easing, function(){ 112 dfr.resolve(); 113 }); 114 }, options.delay); 115 116 return dfr.promise(); 117 } 118 119 function sweepIn($el, windowWidth, frameLeft) { 120 var dfr = $.Deferred(), 121 options = $el.data("tlrkAnimOptions"), 122 positionData = $el.data("tlrkOriginalPos"), 123 final = positionData.position.left, 124 rightEdge; 125 126 windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it 127 128 $el.css({opacity: 0, display: "block"}); // move it outside the right edge of the screen 129 $el.css("left", function(current){ 130 return current + windowWidth - frameLeft; 131 }); 132 133 setTimeout(function(){ 134 $el.animate({left: final, opacity: 1}, options.speed, options.easing, function(){ 135 dfr.resolve(); 136 }); 137 }, options.delay); 138 139 return dfr.promise(); 140 } 141 142 143 // two pass function that first iterates all the elements and gets their position/width/height 144 // and then sets their position to absolute 145 function absolutize($elements) { 146 147 // todo - move it to separate function and do it just once 148 // gather the original position/dimension data for all elements 149 $elements.each(function(){ 150 var $t = $(this); 151 152 if ($t.data("tlrkOriginalPos")) return 153 154 $t.data("tlrkOriginalPos", { 155 position: $t.position(), 156 width: $t.width(), 157 height: $t.height(), 158 css_pos: $t.css("position"), 159 css_left: $t.css("left"), 160 css_top: $t.css("top"), 161 css_width: $t.css("width") || "auto", 162 css_height: $t.css("height") || "auto" 163 }); 164 165 }); 166 167 // set the absolute position 168 $elements.each(function(){ 169 var $t = $(this), 170 opos = $t.data("tlrkOriginalPos"); 171 172 $t.css({ 173 position: "absolute", 174 left: opos.position.left, 175 176 width: opos.width, 177 height: opos.height 178 }); 179 }); 180 } 181 182 function restoreFrameElements($elements) { 183 $elements.each(function(){ 184 var $t = $(this), 185 opos = $t.data("tlrkOriginalPos"); 186 187 if (!opos) return 188 189 $t.css({ 190 position: opos.css_pos, 191 left: opos.css_left, 192 top: opos.css_top, 193 width: opos.css_width, 194 height: opos.css_height 195 }); 196 }); 197 198 } 199 200 var TlrkSlider = function( elem, options ){ 201 this.elem = elem; 202 this.$elem = $(elem); 203 this.options = options; 204 }; 205 206 // the plugin prototype 207 TlrkSlider.prototype = { 208 defaults: { 209 210 211 defaultElementOptions: { 212 speed: 1200, 213 easing: "easeInOutBack", 214 // interval before the element starts moving when the fadeIn/Out functions are called 215 // it's a good idea to give different delays for the different elements 216 // if all have the same delay they'll start moving all together 217 delay: 100 218 }, 219 220 // dispose elements are these that are not included in the elements object 221 // but affect the document flow and will be fadedIn/Out 222 disposeDelay: 100, // delay for the dispose elements 223 disposeSpeed: 1000, // how quickly they'll fadeOut/In 224 225 delayBetweenTransition: 1000, // time between starting fadeOut and fadeIn 226 delayAnimation: 7000, // time between auto changing the current frame 227 228 loop: true, // if true when clicking next on the last frame the slider jumps to the first one 229 230 autoStart: true, // start the automatic looping through the frames on init 231 232 framesSelector: "section", // selector for the frames inside the slider 233 234 elements: { 235 "p": {delay: 100, speed: 1000, easing: "easeInOutBack"} 236 }, 237 238 navigation: true, // the dots navigation on the bottom 239 navigationClass: "slider-nav", 240 241 // callbacks 242 // another way to "catch" these events is with 243 // $(-slider-element-).bind("animationStart") 244 animationStart: null, 245 animationEnd: null 246 }, 247 248 init: function() { 249 var c, e, element, $element, 250 that = this, 251 $firstFrame; 252 253 c = this.config = $.extend({}, this.defaults, this.options); 254 255 this.elem.style.position = "relative"; // make the wrapping element relative 256 257 // basics 258 this.$frames = this.$elem.find(c.framesSelector); 259 this.framesCount = this.$frames.length; 260 this.currentFrame = 0; 261 this.queue = []; 262 263 this._$elementsByFrame = {}; 264 this._$disposeElementsByFrame = {}; 265 266 for (i = 0; i < this.framesCount; i++) { 267 this._$elementsByFrame[i] = this._getFrameElements(i); // cache the $elements by frame 268 this._$disposeElementsByFrame[i] = this._getDisposeFrameElements(i); // cache the rest of the tree for each frame 269 } 270 271 if (c.navigation) { 272 generateNavigation(this.$elem, this.framesCount, c); 273 this.$navigation = this.$elem.find("."+c.navigationClass); 274 } 275 276 // bindings 277 this.$elem.find(".slider-nav").delegate("a", "click", function(e){ 278 var frame = this.getAttribute("href").split("#")[1]; 279 that.go.call(that, frame); 280 return false; 281 }); 282 283 this.$elem // internal bindings for the callbacks 284 .bind("animationStart", function(){ 285 if ($.isFunction(c.animationStart)) {c.animationStart.apply(that, arguments);} 286 }) 287 .bind("animationEnd", function(){ 288 if ($.isFunction(c.animationEnd)) {c.animationEnd.apply(that, arguments);} 289 }) 290 ; 291 292 // start animation? 293 if (c.autoStart) { 294 this.start(); 295 } else { 296 this.running = false; 297 } 298 299 return this; 300 }, 301 302 start: function(instant) { 303 var that = this; 304 305 if (this.timer) { // we'll clear the current timer 306 window.clearTimeout(this.timer); 307 } 308 309 this.running = true; 310 311 if (instant) { 312 that.nextFrame(); 313 } else { 314 this.timer = window.setTimeout(function(){ that.nextFrame.call(that) }, that.config.delayAnimation); 315 } 316 }, 317 318 stop: function() { 319 if (!this.running) return; // we are not running 320 321 this.running = false; 322 window.clearTimeout(this.timer); 323 }, 324 325 // main function for changing frames 326 selectFrame: function(frame, dfr) { 327 var c = this.config, // shorthand for the config 328 that = this, 329 dfr = dfr || $.Deferred(), 330 dFadeIn = $.Deferred(), 331 dFadeOut = $.Deferred(); 332 333 if (isNaN(frame) || frame < 0 || frame > this.framesCount || frame === this.currentFrame) { 334 dfr.reject(); 335 return dfr.promise(); 336 } 337 338 // clear the animation loop interval if the animation is running 339 if (this.running && this.timer) { 340 window.clearTimeout(this.timer); 341 } 342 343 // check if we are currenly running an animation. 344 if (this.animated && this.queue.length > 0) { 345 // wait for the last item in the queue to finish 346 this.queue[this.queue.length-1].done(function(){ 347 that.selectFrame(frame, dfr); // and call again the selectFrame 348 }) 349 return dfr.promise(); 350 } 351 352 this.animated = true; 353 this.$elem.trigger("animationStart", [this, frame]); 354 355 this.queue.push(dfr); 356 357 // fade the frames 358 dFadeOut = this._fadeOutFrame(this.currentFrame); 359 360 // hide the fadetout frame 361 dFadeOut.done(function(){ 362 that.$frames.eq(that.currentFrame).hide(); 363 }); 364 365 window.setTimeout(function(){ // then wait delayBetweenTransition and fadeIn the new frame 366 dFadeIn = that._fadeInFrame.call(that, frame).done(function(){ 367 // when both the fadeIn and fadeOut are done we'll resolve the selectFrame promise 368 $.when(dFadeOut, dFadeIn).done(function(){ 369 that.animated = false; 370 that.queue.shift(); 371 that.$elem.trigger("animationEnd", [that]); 372 that.currentFrame = frame; 373 dfr.resolve(); 374 }); 375 }); 376 }, c.delayBetweenTransition); 377 378 // navigation html change 379 if (this.config.navigation) { 380 this.$navigation.find(".selected").removeClass("selected").end() 381 .find("a").eq(frame).addClass("selected"); 382 } 383 384 dfr.done(function(){ // we'll resume the loop animation after the transitions are done 385 if (that.running) { 386 that.start(); 387 } 388 }); 389 390 return dfr.promise(); 391 }, 392 393 _fadeFrame: function(frame, callback, direction) { 394 var dfr = $.Deferred(), 395 $frame = this.$frames.eq(frame), 396 $elements = this._$elementsByFrame[frame], 397 windowWidth = $(window).width(), // cache it before the animations, so we don't have to check it for each element 398 i, len, 399 that = this, 400 elementAnimations = [], 401 $disposeElements = this._$disposeElementsByFrame[frame], 402 $affectedElements, 403 frameLeft = $frame.offset().left; 404 405 direction = direction || "out"; 406 407 if (!$.isFunction(callback)) return; // do nothing if there's no callback passed 408 409 $affectedElements = $elements.add($disposeElements); 410 411 // position absolute the animation and dispose elements 412 absolutize($affectedElements); 413 414 // toggle the dispose elements 415 if ($disposeElements.length > 0) { 416 window.setTimeout(function(){ 417 $disposeElements[direction === "out" ? "fadeOut" : "fadeIn"](that.config.disposeSpeed); 418 }, this.config.disposeDelay); 419 } 420 421 // invoke the callback for each element 422 // the callback must return a promise 423 $elements.each(function(){ 424 elementAnimations.push( callback.call(that, $(this), windowWidth, frameLeft) ); 425 }); 426 427 // wait for all the elements to finish their animation 428 $.when.apply(this, elementAnimations).done(function(){ 429 //restoreFrameElements($affectedElements); // and restore the elements' position 430 dfr.resolve(); // resolve the fade function 431 }); 432 433 return dfr.promise(); 434 }, 435 436 _fadeOutFrame: function(frame) { 437 var dfr = $.Deferred(), 438 $frame = this.$frames.eq(frame), 439 $disposeElements = this._$disposeElementsByFrame[frame]; 440 441 this._fadeFrame(frame, this._animationOut, "out").done(function(){ 442 dfr.resolve(); 443 }) 444 445 return dfr.promise(); 446 }, 447 448 _fadeInFrame: function(frame) { 449 var dfr = $.Deferred(), 450 $frame = this.$frames.eq(frame), 451 $elements = this._$elementsByFrame[frame]; 452 453 this._restoreFrame(frame); 454 455 $frame.show(); 456 457 this._fadeFrame(frame, this._animationIn, "in").done(function(){ 458 dfr.resolve(); 459 }); 460 461 return dfr.promise(); 462 }, 463 464 _restoreFrame: function(frame){ 465 if (!frame) return 466 restoreFrameElements( this._$elementsByFrame[frame].add(this._$disposeElementsByFrame[frame]) ); 467 }, 468 469 nextFrame: function() { 470 var frame = this.currentFrame+1, 471 dfr = $.Deferred(); 472 473 if (frame > this.framesCount-1) { 474 if (this.config.loop) { 475 frame = 0; 476 } else { 477 dfr.reject(); 478 } 479 }; 480 481 this.selectFrame(frame).done(function(){ 482 dfr.resolve(); 483 }); 484 485 return dfr.promise(); 486 }, 487 488 prevFrame: function() { 489 var frame = this.currentFrame-1, 490 dfr = $.Deferred(); 491 492 if (frame < 0) { 493 if (this.config.loop) { 494 frame = this.framesCount-1; 495 } else { 496 dfr.reject(); 497 return dfr.promise(); 498 } 499 } 500 501 this.selectFrame(frame).done(function(){ 502 dfr.resolve(); 503 }); 504 505 return dfr.promise(); 506 }, 507 508 go: function(str) { // shorthand 509 switch (str) { 510 case "next": 511 case "+1": 512 this.nextFrame(); 513 break; 514 515 case "prev": 516 case "-1": 517 this.prevFrame(); 518 break; 519 520 case "first": 521 this.selectFrame(0); 522 break; 523 524 case "last": 525 this.selectFrame(this.framesCount-1); 526 break; 527 528 default: 529 if (isNaN(str)) return; 530 this.selectFrame(Number(str)); 531 } 532 }, 533 534 // returns jquery collection of animation elements 535 _getFrameElements: function(frame) { 536 var $frame = this.$frames.eq(frame), 537 elements = this.config.elements, 538 e, elementOptions, 539 $found, $frameElements = $([]); 540 541 for (e in elements) { 542 elementOptions = elements[e]; 543 $found = $frame.find(e); 544 $found.addClass("t-frame-element").data("tlrkAnimOptions", $.extend({}, this.defaults.defaultElementOptions, elementOptions )); 545 $frameElements = $frameElements.add($found); 546 } 547 548 return $frameElements; 549 }, 550 551 // returns jquery collection of elements that have to be faded out 552 // i.e. elements on the same level as the animation elements 553 // that doesn't contain other animation elements 554 _getDisposeFrameElements: function(frame) { 555 var $disposeElements = $([]), 556 $frame = this.$frames.eq(frame), 557 $elements = this._$elementsByFrame[frame]; 558 559 $elements.each(function(){ 560 var $t = $(this), 561 $siblings = $t.siblings().not(".t-frame-element"); 562 563 $siblings.each(function(){ 564 var $t = $(this); 565 // check if the node is not already marked and doesn't contains other frame elements 566 if (!$t.hasClass("t-frame-dispose") && $t.find(".t-frame-element").length === 0) { 567 $t.addClass("t-frame-dispose"); 568 $disposeElements = $disposeElements.add($t); 569 } 570 }); 571 572 }); 573 return $disposeElements; 574 }, 575 576 577 // expose the internal animationIn/Out functions that are called for each element in the frame 578 // two arguments are passed - the $element which have to be animated and the window width 579 _animationIn: sweepIn, 580 _animationOut: sweepOut 581 582 } 583 584 TlrkSlider.defaults = TlrkSlider.prototype.defaults; 585 586 $.fn.tlrkSlider = function(options) { 587 var otherArgs = Array.prototype.slice.call(arguments, 1); 588 589 return this.each(function() { 590 var $el = $(this), 591 pluginData = $el.data("tlrkSlider"); 592 593 if (!pluginData) { // check if the slider is already attached 594 pluginData = new TlrkSlider(this, options).init(); 595 $el.data("tlrkSlider", pluginData); 596 return; 597 } 598 599 //change the options or call a method 600 if (typeof options === "string") { 601 602 // setting / getting option(s) 603 if (options === "option") { 604 605 if (typeof otherArgs[0] === "string" && typeof otherArgs[1] !== "undefined") { // set an option value 606 pluginData.config[otherArgs[0]] = otherArgs[1]; 607 } 608 609 if (typeof otherArgs[0] === "object") { // extend the config with new options 610 pluginData.config = $.extend(pluginData.config, otherArgs[0]); 611 } 612 613 } else { // call a method? 614 try { 615 pluginData[options].apply(pluginData, otherArgs); 616 } catch(ex) { 617 throw "Error calling a plugin method (" + ex + ")"; 618 } 619 } 620 } 621 }); 622 }; 623 624 window.TlrkSlider = TlrkSlider; 625 626 })( jQuery, window , document ); 627 628 $(document).ready(function(){ 629 var $backgrounds = $(".header-content").find(".parallax-bg"), 630 LAYER_OFFSET = 30, 631 PRLX_SPEED = 1500, 632 $slider; 633 634 $slider = $("#slider").tlrkSlider({ 635 autoStart: true, 636 animationStart: function(ev, slider, step){ 637 var max_steps = this.framesCount; 638 $backgrounds.each(function(idx, el){ 639 var pos = (step * (100 / max_steps)) + (LAYER_OFFSET * idx); 640 $(this).animate({"backgroundPosition": pos + "% 0"}, PRLX_SPEED); 641 }); 642 }, 643 elements: { 644 "img": {delay: 10}, 645 "h2": {delay: 500}, 646 ".copy": {delay: 800}, 647 ".button": {delay: 1000} 648 } 649 }); 650 651 $(".header-content") 652 .hover( 653 function(){$(this).find(".slider-prev, .slider-next").show();}, 654 function(){$(this).find(".slider-prev, .slider-next").hide();} 655 ) 656 .find(".slider-prev").click(function(){$slider.tlrkSlider("go", "prev"); return false; }).end() 657 .find(".slider-next").click(function(){$slider.tlrkSlider("go", "next"); return false; }); 658 659 });
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>
这里有个问题，因为通过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>
1 var speed = 40; 2 var demo = document.getElementById("demo"); 3 var demo2 = document.getElementById("demo2"); 4 var demo1 = document.getElementById("demo1"); 5 6 demo2.innerHTML = demo1.innerHTML; 7 function Marquee() {//demo2.offsetTop = 1179 8 if (demo2.offsetTop <= demo.scrollTop + 500) { 9 demo.scrollTop -= demo1.offsetHeight;//demo1.offsetHeight = 462 10 } 11 else {//demo.scrollTop 最大 694 12 demo.scrollTop++; 13 } 14 } 15 var MyMar = setInterval(Marquee, speed); 16 demo.onmouseover = function() { 17 clearInterval(MyMar); 18 } 19 demo.onmouseout = function() { 20 MyMar = setInterval(Marquee, speed); 21 }
这里需要注意，JavaScript中用到的值需要根据div在页面中的位置计算，这点没做好
当点击办公平台或企业邮箱时会有提示，一秒钟后消失
这中效果主要使用了prompt插件。
然后在页面调用
1 function popMsg(str){ 2 var def = { 3 content:str, 4 width : 220, //弹出层的宽度 5 time:1000 6 } 7 $.Prompt(def); 8 $.Prompt(); 9 }
自定义select样式
1 #slinks{ 2 margin: 0; 3 padding: 0; 4 outline: none; 5 height: 25px; 6 line-height: 25px; 7 width: 100%; 8 border: rgb(191, 204, 220) 1px solid; 9 border-radius: 3px; 10 display: inline-block; 11 background-size: 5px 5px,5px 5px,25px 25px,1px 25px; 12 background-color: #fff; 13 background-image: repeating-linear-gradient(225deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 14 repeating-linear-gradient(135deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%), 15 linear-gradient( #FFFFFF 0%,#F8F9Fd, #EFFAFA 100%), 16 repeating-linear-gradient( rgb(191, 204, 220) 0%,rgb(191, 204, 220) 100%); 17 background-repeat: no-repeat; 18 background-position: 212px 10px,217px 10px,right top,205px top; 19 -webkit-appearance: none; 20 }
以上贴的代码只是很小且不完整的部分。能把这个网站做出来，很大程度上得益于我平时整理的前端代码库和手册库
文件比较大现在不便上传。需要的筒子可以联系我或者给我留言
