JS框架_(JQuery.js)动画效果鼠标跟随

 

 

百度云盘　　传送门　　密码 :4n9u

 

火狐浏览器上纯CSS_动画效果鼠标跟随效果：

(作者：lily_lcj　　　　传送门)

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画效果鼠标跟随</title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="scripts/respond.js"></script><!-- IE下兼容@media screen -->
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="scripts/sketch.min.js"></script>

</head>
<body>

<p>Gary</p>


<!-- 鼠标跟随DIV -->
<div id="test" style="position:fixed;top:0px;z-index:20;"></div>

<script language="JavaScript">
function getOs(){
   var OsObject = "";  
   if(navigator.userAgent.indexOf("MSIE")>0) {  
        return "MSIE";
   }
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
       $.getScript('scripts/mousefollow.js');
        return "Firefox";  
   } 
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {  
       $.getScript('scripts/mousefollow.js');
       return "Safari";
   }   
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){
       $.getScript('scripts/mousefollow.js'); 
        return "Camino";  
   }  
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
       $.getScript('scripts/mousefollow.js');
        return "Gecko";  
   }
}
getOs();
</script>
    
</body>
</html>
index.html

 

@charset "utf-8";
/* CSS Document */

/*============================== 
    CSS RESET
================================= */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
    font-family:"Microsoft YaHei","SimHei";
    font-size:12px;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hide from IE Mac \*/ 
.clearfix{
    display: block;
}
/* End hide from IE Mac */ 
.none {
    display: none;
}

a{text-decoration:none;}

input{    -webkit-box-sizing:border-box;
        -webkit-appearance: none;
}
/* End Clearfix */
public.css

 

@charset "utf-8";
/* CSS Document */

body{background:#222;}


.border_left_none{border-left:0px!important;}

#index_top img{
    float:left;
    height:15px;
    margin-top:10px;
    /*border-top:1px solid yellow;
    border-bottom:1px solid yellow;*/
    padding:5px;
    margin-right:20px;
    }
    
#index_top p{
    color:#fff;
    line-height:15px;
    margin-top:15px;
    float:left;
    font-size:14px;
    font-weight:700;
    padding-left:20px;
    padding-right:20px;
    border-left:1px solid #fff;
    }    


@media screen and (min-width: 1200px){
.top_wrap{
    width:1180px;
    height:45px;
    margin:0 auto;
    }
}

@media screen and (min-width: 960px) and (max-width: 1199px){
.top_wrap{
    width:960px;
    height:45px;
    margin:0 auto;
    }
}

p {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-50%);
  font-size: 40px;
  font-weight: 900;
  color: white;
  text-shadow: 0 0 50px black;
  text-transform: capitalize;
  font-family: 'Roboto','Helvetica','Arial',sans-serif;
  letter-spacing: 5px;
}
style.css

 

 

实现效果

 

getOs()获取浏览器种类，绑定js

<script language="JavaScript">
function getOs(){
   var OsObject = "";  
   if(navigator.userAgent.indexOf("MSIE")>0) {  
        return "MSIE";
   }
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
       $.getScript('scripts/mousefollow.js');
        return "Firefox";  
   } 
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {  
       $.getScript('scripts/mousefollow.js');
       return "Safari";
   }   
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){
       $.getScript('scripts/mousefollow.js'); 
        return "Camino";  
   }  
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
       $.getScript('scripts/mousefollow.js');
        return "Gecko";  
   }
}
getOs();
</script>

 

window.navigator.userAgent.indexOf（）获取浏览器类型和版本号的

 

　　支持：MSIE、Firefox、Safari、Camino、Gecko类型浏览器

 

以后等我厉害了一定要弄个兼容全部浏览器的O(∩_∩)O~

　　

posted @ 2018-07-30 11:27  Cynical丶Gary  阅读(327)  评论(0)  编辑  收藏  举报