你的位置:首页 > Java教程

[Java教程]凛冬将至,用几款特效暖暖身


友情提示:所有特效效果均是GIF图片演示(均有源码下载),所以这个博文可能加载的比较慢,请谅解。

凛冬将至(Winter Is Coming)web 前端特效,距北京供暖也没几天了,正在筹备全民抗寒工作。在这准备好迎接寒冬之际,先来几款前端特效暖暖身web 前端特效。可以在日后的寒冬里用来抗寒。本着对自己/对园友负责的态度web 前端特效,我这里提供的抗寒特效均是经过本人测试和研究过的,我会尽量将每款特效细化,详细介绍其使用方法或者注意事项,不好理解的地方加注释。力图通过这篇博文能让园友有所收获,欢度寒冬,坐等年终奖web 前端特效web 前端特效。说到年终奖是不是很多人开始意yin了web 前端特效

web 前端特效

v1.0写在前面

本文中所有给出的特效都是本人将一些需要引入的js或者css文件传到local经过测试以后展示给大家的。如果大家在调试的时候有问题可以随时提出来。因为每个案例代码都太多了,所以所有代码都只给出部分主要代码(便于大家在得到源码之前,可以更好的读懂特效),当然大家也可以根据右下方的导航栏直接看特效,在看了效果图以后对某个特效有兴趣,这里我会对应的提供源码下载地址。

v2.0tab图片切换

2.1.html代码: 

<div id="menuWrapper" class="menuWrapper bg1">    <ul class="menu" id="menu">    <li class="bg1" style="background-position:0 0;">    <a id="bg1" href="#">迈瑞宝</a>    <ul class="sub1" style="background-position:0 0;">    <li><a href="#">报价:11.99-23.69万</a></li>    <li><a href="#">车身结构:三箱</a></li>    <li><a href="#">油耗:8.3-12.0L</a></li>    </ul>    </li>    <li class="bg1" style="background-position:-266px 0px;">    <a id="bg2" href="#">索纳塔8</a>    <ul class="sub2" style="background-position:-266px 0;">    <li><a href="#">报价:13.39-22.59万</a></li>    <li><a href="#">车身结构:三箱</a></li>    <li><a href="#">油耗:9.0-12.0L</a></li>    </ul>    </li>    <li class="last bg1" style="background-position:-532px 0px;">    <a id="bg3" href="#">K5</a>    <ul class="sub3" style="background-position:-266px 0;">    <li><a href="#">报价:10.88-25.58万</a></li>    <li><a href="#">车身结构:三箱</a></li>    <li><a href="#">油耗:8.4-13.0L</a></li>    </ul>    </li>    </ul>    </div>


2.2.css代码: 

ul.menu > li > a{  float:left;  width:265px;  height:50px;  margin-top:450px;  text-align:center;  line-height:50px;  color:#ddd;  background-color:#333;  letter-spacing:1px;  cursor:pointer;  text-decoration:none;  text-shadow:0px 0px 1px #fff;}ul.menu > li ul{  list-style:none;  float:left;  margin-top:-180px;  width:100%;  height:110px;  padding-top:20px;  background-repeat:no-repeat;  background-color:transparent;}ul.menu > li ul li{  display:none;}  ul.menu > li ul.sub1 {    background-image: url('../img/bg1sub.png');  }  ul.menu > li ul.sub2 {    background-image: url('../img/bg2sub.png');  }ul.menu > li ul.sub3{  background-image:url(../img/bg3sub.png);}ul.menu > li ul li a{  color:#fff;  text-decoration:none;  line-height:30px;  margin-left:20px;  text-shadow:1px 1px 1px #444;  font-size:11px;}ul.menu > li ul li a:hover{  border-bottom:1px dotted #fff;}ul.menu > li ul.sub1 li{  display:block;}


2.3.js代码: 

if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8    var oldCurCSS = jQuery.curCSS;    jQuery.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[4]];  }


2.4.代码效果: 

web前端特效

Demo中关于汽车相关参数均来自某车之家,其真实性不在此次讨论范围内,咱们只看效果。

2.5.源码下载: 

https://github.com/toutouge/WebProject/tree/master/PictureSwitch1

v3.0索引图片切换

3.1.html代码: 

<div id="slideshowHolder">    <img src="img/1.jpg" />    <img src="img/2.jpg" />    <img src="img/3.jpg" />    </div>


3.2.css代码: 

.ft-prev, .ft-next {      background-color: #000;      padding: 0 10px;      color:#fff;    }


3.3.js代码: 

$(document).ready(function () {      $('#slideshowHolder').jqFancyTransitions({        effect: '', // wave, zipper, curtain        width: 500, // width of panel        height: 700, // height of panel        strips: 20, // number of strips        delay: 5000, // delay between images in ms        stripDelay: 50, // delay beetwen strips in ms        titleOpacity: 0.7, // opacity of title        titleSpeed: 1000, // speed of title appereance in ms        position: 'alternate', // top, bottom, alternate, curtain        direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate        navigation: true, // prev and next navigation buttons        links: true // show images as links      });    });


3.4.代码效果: 


3.5.源码下载: 

https://github.com/toutouge/WebProject/tree/master/PictureSwitch2

v4.0统计图

4.1.html代码: 

<div id="content">    <div class="legend">    <h1>汽车销量:</h1>    <div class="skills">    <ul>    <li class="jq">大众</li>    <li class="css">丰田</li>    <li class="html">别克</li>    <li class="php">福特</li>    <li class="sql">长安</li>    </ul>    </div>    </div>    <div id="diagram"></div>    </div>    <div class="get">    <div class="arc">    <span class="text">大众</span>    <input type="hidden" class="percent" value="95" />    <input type="hidden" class="color" value="#97BE0D" />    </div>    <div class="arc">    <span class="text">丰田</span>    <input type="hidden" class="percent" value="90" />    <input type="hidden" class="color" value="#D84F5F" />    </div>    <div class="arc">    <span class="text">别克</span>    <input type="hidden" class="percent" value="80" />    <input type="hidden" class="color" value="#88B8E6" />    </div>    <div class="arc">    <span class="text">福特</span>    <input type="hidden" class="percent" value="53" />    <input type="hidden" class="color" value="#BEDBE9" />    </div>    <div class="arc">    <span class="text">长安</span>    <input type="hidden" class="percent" value="45" />    <input type="hidden" class="color" value="#EDEBEE" />    </div>    </div>


4.2.css代码: 

#content {position:absolute;top:50%;left:50%;margin:-340px 0 0 -450px;width:900px;height:600px;}.legend {float:left;width:250px;margin-top:140px;}#content h1 {font-family:'Cabin Sketch', arial, serif;text-shadow:3px 3px 0 #ddd;color:#193340;font-size:40px;margin-bottom:40px;text-align:right;}.skills {float:left;clear:both;width:100%;}.skills ul,.skills li {display:block;list-style:none;margin:0;padding:0;}.skills li {float:right;clear:both;padding:0 15px;height:35px;line-height:35px;color:#fff;margin-bottom:1px;font-size:18px;}


4.3.js代码: 

var o = {      init: function () {        this.diagram();      },      random: function (l, u) {        return Math.floor((Math.random() * (u - l + 1)) + l);      },      diagram: function () {        var r = Raphael('diagram', 600, 600),          rad = 73;        r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });        var title = r.text(300, 300, 'loading...').attr({          font: '20px Arial',          fill: '#fff'        }).toFront();        r.customAttributes.arc = function (value, color, rad) {          var v = 3.6 * value,            alpha = v == 360 ? 359.99 : v,            random = o.random(91, 240),            a = (random - alpha) * Math.PI / 180,            b = random * Math.PI / 180,            sx = 300 + rad * Math.cos(b),            sy = 300 - rad * Math.sin(b),            x = 300 + rad * Math.cos(a),            y = 300 - rad * Math.sin(a),            path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];          return { path: path, stroke: color }        }        $('.get').find('.arc').each(function (i) {          var t = $(this),            color = t.find('.color').val(),            value = t.find('.percent').val(),            text = t.find('.text').text();          rad += 30;          var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });          z.mouseover(function () {            this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');            if (Raphael.type != 'VML') //solves IE problem    this.toFront();            title.animate({ opacity: 0 }, 500, '>', function () {              this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, 500, '<');            });          }).mouseout(function () {            this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic');          });        });      }    }    $(function () { o.init(); });


4.4.代码效果: 

web 前端特效

4.5.源码下载: 

https://github.com/toutouge/WebProject/tree/master/StatisticalGaphs

v5.0滚动条分页

5.1.html代码: 

<ol class="curtains">    <!--<li id="section-1" data-parallax-background="-.05">-->    <li id="section-1" class="cover">      <header data-fade="550" data-slow-scroll="3">        <h1>博客园</h1>        <h2>请叫我头头哥,www.cnblogs.com/toutou</h2>      </header>    </li>    <li id="section-2">      <article>        <h4>博客园</h4>        <hr>        <p style="text-indent:2em;">          博客园创建于2004年1月,博客园诞生于江苏扬州这样一个IT非常落后的小城市,          城市虽小,但是这里却有很多求知创新的人,博客园诞生的理由是如此简单。        </p>        <p style="text-indent:2em;">          一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,          有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏,“博客”从耀眼的明星成为平民<br />          ,这些似乎都与博客园无关,博客园一步一个脚印地走着自己的路,傻傻地对每个用户注册进行人工审批、          对首页内容宁缺毋滥、对不合适的广告拒之门外,傻傻地对用户体验关怀备至,对盈利模式冷若冰霜。        </p>        <h4>发展历程</h4>        <hr>        <p>2006年9月 博客园到北京发展。</p>        <p>2007年9月 博客园来到上海发展。</p>        <p>2008年3月 博客园团队成立。</p>        <p></p>        <p class="align-center">          <a href="http://www.cnblogs.com/" class="button">看看博客园</a>        </p>      </article>    </li>  </ol>


5.2.css代码: 

/* Sliding panels */.curtains>li {  background:#FFF url(../img/blizzard.png);  box-shadow:0 0 12px #666;}  .curtains>li:last-child{box-shadow:none}/* MENU */#menu{  position:fixed;  top:20px;  left:20px;  z-index:20;  padding:10px;  background-color:#000;}  #menu li{margin:0}  #menu a{    margin:0;    color:#FFF;  }/* Section 1 */#section-1 {  background: url(../img/eiffel-2.jpg) 50% 0 no-repeat;  background-size: cover;}  #section-1 header{    color:#FFF;    position:absolute;    top:30%;    left:50%;    margin:0 0 0 -350px;    width:700px;    text-align:center;    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);    line-height:1.1;  }  #section-1 h1{    font-size:120px;  }  #section-1 h2{    text-transform:capitalize;    opacity:.75;    font-size:48px;  }


5.3.js代码: 

 scrollToPosition: function (direction) {      var position = null,        self = this;      if (self.scrollEl.is(':animated')) {        return false;      }      if (direction === 'up' || direction == 'down') {        // Keyboard event        var $next = (direction === 'up') ? self.$current.prev() : self.$current.next();        // Step in the current panel ?        if (self.$step) {          if (!self.$current.find('.current-step').length) {            self.$step.eq(0).addClass('current-step');          }          var $nextStep = (direction === 'up') ? self.$current.find('.current-step').prev('.step') : self.$current.find('.current-step').next('.step');          if ($nextStep.length) {            position = (self.options.mobile) ? $nextStep.position().top + self.$elDatas[self.$current.index()]['data-position'] : $nextStep.position().top + self.$elDatas[self.$current.index()]['data-position'];          }        }        position = position || ((self.$elDatas[$next.index()] === undefined) ? null : self.$elDatas[$next.index()]['data-position']);        if (position !== null) {          self.scrollEl.animate({            scrollTop: position          }, self.options.scrollSpeed, self.options.easing);        }      } else if (direction === 'top') {        self.scrollEl.animate({          scrollTop: 0        }, self.options.scrollSpeed, self.options.easing);      } else if (direction === 'bottom') {        self.scrollEl.animate({          scrollTop: self.options.bodyHeight        }, self.options.scrollSpeed, self.options.easing);      } else {        var index = $("#" + direction).index(),          speed = Math.abs(self.currentIndex - index) * (this.options.scrollSpeed * 4) / self.$liLength;        self.scrollEl.animate({          scrollTop: self.$elDatas[index]['data-position'] || null        }, (speed <= self.options.scrollSpeed) ? self.options.scrollSpeed : speed, this.options.easing);      }    }


5.4.代码效果: 

web 前端特效

5.5.源码下载: 

https://github.com/toutouge/WebProject/tree/master/SpecialPage

v6.0博客总结

关于第一波特效就这么多,如果大家觉得可以就点个赞,后续我再考虑是否继续追加。

在北京的小伙伴们要做好防寒工作了,北京上周已经下雪了。上周五那家伙早上一起床,窗外全白花花的。

web 前端特效

PS:北京的确雾霾多,但是照片里雾蒙蒙的效果不是雾霾,只是我早上醒的早,早上的时候拍的。

 


作  者:请叫我头头哥
出  处:http://www.cnblogs.com/toutou/
关于作者:专注于微软平台的项目开发。如有问题或建议,请多多赐教!
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信我
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力!