Javascript

常用JS

• [jquery.SuperSlide]: http://www.superslide2.com/

• jquery.tab.js

• jQuery Validate

• TouchSlide

• Lightbox

• http://www.swiper.com.cn/

• validform.js

• 前端网址导航 http://www.h-ui.net/site.shtml

• jquery.fancybox

• vue https://cn.vuejs.org

• jQuery瀑布流插件masonry

• JQuery插件supersized.js实现背景图片淡入浅出

• 前端必备插件之纯原生JS的瀑布流插件Macy.js

• jquery.form.js 表单的ajax提交

• jquery.lazyload.js 图片的延迟加载

• jQuery.validate.js 表单验证插件

• 打字机效果https://github.com/mattboldt/typed.js/

• H-ui 前端框架 http://www.h-ui.net/index.shtml

• ADMINLTE https://adminlte.io/

• ace_admin http://ace.jeka.by/

• layuicms http://layuicms.com/

• X-admin

• beyondadmin

• http://layer.layui.com/

• metisMenu

• 字体库和CSS框架 https://fontawesome.dashgame.com/

• flowplayer jwplayer ckplayer dplayer http://dplayer.js.org/

• Aos.js

• zTree http://www.treejs.cn/

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=71Vco0Yx0zd5szFS9b5HfYAZ"></script>
<script>
    var map=new BMap.Map("map");
    var point=new BMap.Point(114.139093,32.133128);
    map.centerAndZoom(point,17);
    map.enableScrollWheelZoom();   //开始滚轮控制。
    map.addControl(new BMap.NavigationControl());  //控件
    var marker1=new BMap.Marker(point);   //创建标注
    map.addOverlay(marker1);
    marker1.addEventListener("mouseover",function(){
        map.openInfoWindow(infoWindow,marker1.getPosition());
    });
    marker1.addEventListener("mouseout",function(){
        map.closeInfoWindow(infoWindow,marker1.getPosition());
    });
    //alert(map.getCenter(116.404,39.915))
    var opts1={
        width:250,
        height:100,
        title:"<a style='color:#666;'>电话：010-6666666<br>地址：#</a>"
    };
    var infoWindow=new BMap.InfoWindow("#",opts1);
    map.openInfoWindow(infoWindow,marker1.getPosition());
</script>
<div class="map" id="map" ></div>

.dh{ display:inline-block;-webkit-animation:zooming 1s infinite; -moz-animation:zooming 1s infinite; -o-animation:zooming 1s infinite; animation:zooming 1s infinite;}
@keyframes zooming{
    0%      {transform: scale(.8);} 
    50%     {transform: scale(1.05); text-shadow:0 0 5px white;}
    100%    {transform: scale(.8);}
}
@-webkit-keyframes zooming{
     0%      {-webkit-transform: scale(.8);} 
     50%     {-webkit-transform: scale(1.05); text-shadow:0 0 5px white; }
     100%    {-webkit-transform: scale(.8);}}
@-moz-keyframes zooming{
     0%      {-moz-transform: scale(.8);} 
     50%     {-moz-transform: scale(1.05); text-shadow:0 0 5px white; }
     100%    {-moz-transform: scale(.8);}}

@-o-keyframes zooming{
    0%      {-o-transform: scale(.8);} 
    50%     {-o-transform: scale(1.05); text-shadow:0 0 5px white;}
    100%    {-o-transform: scale(.8);}}

​

 <a href="#" class="class_outer"> <img src="1.jpg" width="546" height="353" border="0" /> <span class="class_cover">亲，透明遮罩会了吗？</span> </a> 

  .class_outer {
 display: block;
 width: 546px;
height: 276px;
 margin: 10px auto;
 position: relative;
overflow: hidden;
 }
 .class_cover {
width: 100%;
 height: 50px;
 line-height: 50px;
 padding-left: 5px;
 background-color: rgba(0, 0, 0, .50);
 color: #FFFFFF;
 font-size: 26px;
 position: absolute;
 left: 0px;
 bottom: 0px;
 } 

需要加载jquery

 #back-top {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background: #FF9C01;
    color: #fff;
    text-align: center;
    line-height: 60px;
    text-decoration: none;
}

$(function () {

 //先将#back-top隐藏
 $('#back-top').hide();

 //当滚动条的垂直位置距顶部100像素一下时，跳转链接出现，否则消失
 $(window).scroll(function () {
  if ($(window).scrollTop() > 100) {
   $('#back-top').fadeIn(1000);
  } else {
   $("#back-top").fadeOut(1000);
  }
 });

 //点击跳转链接，滚动条跳到0的位置，页面移动速度是1000
 $("#back-top").click(function () {

  $('body,html').animate({
   scrollTop: '0'
  }, 1000);
  return false; //防止默认事件行为
 })

 });