百度云盘  传送门  密码 :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~

  

JS框架_(JQuery.js)动画效果鼠标跟随的更多相关文章

  1. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  2. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  3. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

  4. JS框架_(JQuery.js)点赞按钮动画

    百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...

  5. JS框架_(JQuery.js)纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

  6. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  7. JS框架_(JQuery.js)网页文字评论弹幕

    百度云盘 传送门 密码:3azl jQuery网页右下角文字评论弹幕效果 <!DOCTYPE html> <html> <head> <title>jQ ...

  8. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  9. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

随机推荐

  1. B.super_log(The Preliminary Contest for ICPC Asia Nanjing 2019)

    同:https://www.cnblogs.com/--HPY-7m/p/11444923.html #define IOS ios_base::sync_with_stdio(0); cin.tie ...

  2. python_操作MySQL 初解 之__<类方法调用并 增-删-改-查>

    文件一: 调用(sqls文件) # 导入模块 import pymysql from sqls import * # 创建类 class KaoShi(object): # 初始化 def __ini ...

  3. Https接口调用工具类

    ClientUtil.java import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org. ...

  4. ERROR qos-server can not bind localhost:22222

    dubboe版本2.7.1 spring cloud alibaba最新官网examples 根据readme中说明文档依次启动 1.nacos,默认用户名密码nacos/nacos 2.启动spri ...

  5. jquery做的滑动按钮开关

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. idea一键生成mybatis工具

    1.创建maven项目,导包 <build> <plugins> <plugin> <groupId>org.mybatis.generator< ...

  7. linux添加开机启动项、登陆启动项、定时启动项、关机执行项等的方法

    使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下: chkconfig --list 可能输出如下: network         0:off   1:o ...

  8. Delphi CheckBox组件

  9. vi 必须要学会的技能

    vi与vim vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样,它的强大不逊色于任何最新的文本编辑器.他是我们使用Linux系统不能缺少的工具.由于对 ...

  10. 百度网盘,FTP上传异常、上传失败的解决办法

    若你的宽带上传上限速度为50KB,那么将百度网盘或FTP的上行速度调为50KB以下即可,就不会出现网络异常的情况了.