网站鼠标点击特效和鼠标移动特效
效果地址
图片打包下载
代码
<!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
