dedecms织梦建站总结

 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 }

  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 });

<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>

<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                     }

1 function popMsg(str){
2             var def = {
3                 content:str,
4                 width : 220,                                    //弹出层的宽度
5                 time:1000
6             }
7             $.Prompt(def);
8             $.Prompt();
9         }

 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 }