网站鼠标点击特效和鼠标移动特效
效果地址
图片打包下载
代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>至渝的个人简历</title></head><link href="logo.ico" rel="shortcut icon" /><script src="http://cdn./libs/jquery/2.1.1/jquery.min.js"></script> <!-- 用来实现鼠标点击特效--><style>* {margin: 0;padding: 0;}body {color: rgb(236, 228, 228);}.bg {background: url(image/img.png) no-repeat fixed;background-size: 100% 100%;}.container {height: 100%;width: 1120px;margin: 0 auto;display: block;}table {height: 100%;width: 100%;}table,td {border-collapse: collapse;text-align: left;}td {height: 20px;}.mail a {text-decoration: none;color: rgb(243, 242, 242);}.jianju a {text-decoration: none;color: rgb(243, 242, 242);}h2 {height: 43px;line-height: 43px;}.mail a:hover {text-decoration: underline;color: rgb(41, 6, 240);}.liming {/* height: 150px; */width: 150px;}.tophead {height: 48px;text-indent: 3.5em;margin-left: 30px;line-height: 48px;}.peplo {background: url(image/peplo.png) no-repeat;}.phone {background: url(image/phone.png) no-repeat;}.adress {background: url(image/address.png) no-repeat;}.mail {background: url(image/mail.png) no-repeat;}.wechat {background: url(image/wechat.png) no-repeat;}.profession {background: url(image/profesion.png) no-repeat;}.university {background: url(image/university.png) no-repeat;}.qiuzhi {background: url(image/qiuzhi.png) no-repeat;}.bgimage {background-size: auto 80%;}.w_foot {height: 40px;margin-top: 50px;}.w_foot_copyright {height: 40px;text-align: center;padding-top: 10px;background: #414141;color: #b2bcc5;font-size: 13px;}</style><body><div class='bg'><div style="height: 70px;"><p></p></div><div class="container"><table><tr><td><p class='tophead peplo bgimage'>姓名:xxx</p></td><td><p class='tophead phone bgimage'>电话:xxxx</p></td><td rowspan="4" class="liming"><img src="image/limin.png" alt="" class="liming"></td></tr><tr><td><p class='tophead bgimage university'>毕业学校:中南大学</p></td><td><p class='tophead bgimage mail'>邮箱:<a href="mailto:wuyinzhiming@">xxxxx@</a></p></td></tr><tr><td><p class='tophead bgimage profession'>学历/专业:硕士/控制科学与工程</p></td><td><p class='tophead bgimage wechat'>微信:xxxxx</p></td></tr><tr><td><p class='tophead qiuzhi bgimage'>求职意向:软件开发工程师</p></td><td><p class='tophead bgimage adress'>贯籍:xxxxxx</p></td></tr></table></div><div style="height: 380px;"><p> </p></div><div class="w_foot"><div class="w_foot_copyright">Copyright © -, 至渝, All Rights Reserved.</div></div></div><script>/* 鼠标点击文字特效 */var font = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");var color = new Array('#ff0000', '#eb4310', '#f6941d', '#fbb417', '#ffff00', '#cdd541', '#99cc33', '#3f9337', '#219167', '#239676', '#24998d', '#1f9baa', '#0080ff', '#3366cc', '#333399', '#003366', '#800080', '#a1488e', '#c71585', '#bd2158', '#eec142', '#FEEE6D');var f_idx = Math.floor(Math.random() * 20) % font.length;var f_idx1 = Math.floor(Math.random() * 20) % font.length;var c_idx = Math.floor(Math.random() * 40) % font.length;jQuery(document).ready(function ($) {$("body").click(function (e) {var $i = $("<span />").text(font[f_idx] + ' ' + font[f_idx1]);f_idx = Math.floor(Math.random() * 20) % font.length;f_idx1 = Math.floor(Math.random() * 20) % font.length;c_idx = Math.floor(Math.random() * 40) % color.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 9999999999999999999999999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": color[c_idx]});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function () {$i.remove();});});});</script></body></html>
使用方法
复制代码,放到一个新建的 .html 文件中下载图片包,解压到 .html文件所在目录下(直接解压即可,不用改名字)> imageindex.html
浏览器运行 .html 文件,鼠标点击即可看到效果
补充
主要实现的代码<script> </script>
那一部分代码,前面的 html 和 css 是我布局用的,好看点,你可以直接创一个空白的 body (宽和高都设置成100%),然后只要<script> </script>
那部分,也可以看到效果颜色的话自己改var color = new Array
哪儿文字的话自己改var font = new Array
哪儿下一篇 在鼠标点击特效上加上鼠标移动特效(一) ,效果1
下二篇 在鼠标点击特效上加上鼠标移动特效 (二) ,效果2
如果觉得《鼠标点击特效——富强 民主 文明 和谐.....》对你有帮助,请点赞、收藏,并留下你的观点哦!