页面点击特效

<script src="js/jquery.js"></script>
<div class="changeColor" style="height:100%"> 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /> </div> <style type="text/css"> /*滚动文字样式*/ #container { position: relative; width: 200px; } /*滚动文字样式*/ #content { position: absolute; left: 0; top: 0; white-space: nowrap; /*重要,不然文字显示效果不好*/ } </style> <script language="javascript" type="text/javascript"> //文字滚动 (function ($) { $.fn.extend({ roll: function (options) { var defaults = { speed: 1 }; var options = $.extend(defaults, options); var speed = (document.all) ? options.speed : Math.max(1, options.speed - 1); if ($(this) == null) return; var $container = $(this); var $content = $("#content"); var init_left = $container.width(); $content.css({ left: parseInt(init_left) + "px" }); var This = this; var time = setInterval(function () { This.move($container, $content, speed); }, 20); //setInterval会改变this指向,即使加了This=this,也要用匿名函数封装,这里调试了n久 $container.bind("mouseover", function () { clearInterval(time); }); $container.bind("mouseout", function () { time = setInterval(function () { This.move($container, $content, speed); }, 20); }); return this; }, move: function ($container, $content, speed) { var container_width = $container.width(); var content_width = $content.width(); if (parseInt($content.css("left")) + content_width > 0) { $content.css({ left: parseInt($content.css("left")) - speed + "px" }); } else { $content.css({ left: parseInt(container_width) + "px" }); } } }); })(jQuery); //百度统计 var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?73487e564b753be0f0bab7547f04047d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); //生成目录索引列表 function GenerateContentList() { var jquery_h3_list = $('#cnblogs_post_body h3'); //博客园的正文的div的id为cnblogs_post_body,然后查找下面所有的h3 if (jquery_h3_list.length > 0) { var content = '<a name="_labelTop"></a>'; //此处开始拼阅读目录 content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b onclick="DivHide();" style="cursor:pointer;" title="点击隐藏目录,再次点击显示目录">阅读目录</b></p>'; content += '<ul id="Catalog">'; //循环所有的h3,然后在h3的前面添加回到顶部的功能。 for (var i = 0; i < jquery_h3_list.length; i++) { var go_to_top = '<div style="text-align: right">'; if (i > 0) { go_to_top += '<a href="#_labelTop" style="color: Blue">回到顶部</a>'; } go_to_top += '<a name="_label' + i + '"></a></div>'; $(jquery_h3_list[i]).before(go_to_top); var li_content = '<li><a href="#_label' + i + '" style="color: Blue">' + $(jquery_h3_list[i]).text() + '</a></li>'; content += li_content; } content += '</ul>'; content += '</div>'; if ($('#cnblogs_post_body').length != 0) { $($('#cnblogs_post_body')[0]).prepend(content); } } } function DivHide() { if ($("#Catalog").css("display") == "none") { $("#Catalog").show(200); } else { $("#Catalog").hide(200); } } GenerateContentList(); //文字颜色 var ColorTimer; var Colorforn = 0; //颜色代码 var ColorArray = new Array("#00CCCC", "#6699CC", "#669999", "#FFCC66", "#FF6666"); ShowColor(); function ShowColor() { //引用b_project class的文字会变色。 $(".changeColor").css("color", "" + ColorArray[Colorforn] + ""); Colorforn++; if (Colorforn >= ColorArray.length) Colorforn = 0; ColorTimer = setTimeout("ShowColor();", 500); } //文字颜色结束 //滚动文字 $(window).load(function () { $("#container").roll({ speed: 2 }); }); //滚动文字结束 //单击显示随机文字 var a_idx = 0; jQuery(document).ready(function ($) { $("body").click(function (e) { var a = new Array("路见不平一声吼,吼完继续往前走。", "咸鱼翻身,还是咸鱼。", "水能载舟,亦能煮粥!", "明月几时有,抬头自己瞅。", "天哪!我的衣服又瘦了。", "听君一席话,回家烤白薯。", "流氓不可怕,就怕流氓有文化。", "知识就像内裤,看不见但很重要。", "为了祖国下一代,再丑也得谈恋爱。", "穷玩车,富玩表,牛B加班敲电脑。", "英雄不问出路,流氓不看岁数。", "我们的目标:向钱看,向厚赚。", "帅有个屁用!到头来还不是被卒吃掉!"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 5, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#FF69B4" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 3000, function () { $i.remove(); }); }); setTimeout('delay()', 2000); }); function delay() { $(".buryit").removeAttr("onclick"); } </script>

猜你喜欢

转载自www.cnblogs.com/zpblogs/p/9811364.html