网页鼠标点击特效

在网站 body 标签 前面插入以下代码即可实现 鼠标单击随机 字符,内容可自定义。

<script>
  $("html,body").click(function(e) {
    var gcd = new Array("❤", "^_^", "自由", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
    var n = Math.floor(Math.random() * gcd.length);
    var $i = $("<b/>").text(gcd[n]);
    var x = e.pageX,
    y = e.pageY;
    $i.css({
      "z-index": 99999,
      "top": y - 20,
      "left": x,
      "position": "absolute",
      "color": "#a71d5d"
    });
    $("body").append($i);
    $i.animate({
      "top": y - 180,
      "opacity": 0
    },
    1500,
    function() {
      $i.remove()
    });
    e.stopPropagation()
  });
</script>

网页右侧固定QQ客服列表

<!--css代码部分-->
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}

.rides-cs { font-size: 12px; background:#29a7e2; position: fixed; bottom: 50px; right: 0px; _position: absolute; z-index: 1500; border-radius:6px 0px 0 6px;}
.rides-cs a { color: #00A0E9;}
.rides-cs a:hover { color: #ff8100; text-decoration: none;}
.rides-cs .floatL { width: 36px; float:left; position: relative; z-index:1;margin-top: 21px;height: 181px;}
.rides-cs .floatL a { font-size:0; text-indent: -999em; display: block;}
.rides-cs .floatR { width: 130px; float: left; padding: 5px; overflow:hidden;}
.rides-cs .floatR .cn {background:#F7F7F7; border-radius:6px;margin-top:4px;}
.rides-cs .cn .titZx{ font-size: 14px; color: #333;font-weight:600; line-height:24px;padding:5px;text-align:center;}
.rides-cs .cn ul {padding:0px;}
.rides-cs .cn ul li { line-height: 38px; height:38px;border-bottom: solid 1px #E6E4E4;overflow: hidden;text-align:center;}
.rides-cs .cn ul li span { color: #777;}
.rides-cs .cn ul li a{color: #777;}
.rides-cs .cn ul li img { vertical-align: middle;}
.rides-cs .btnOpen, .rides-cs .btnCtn { position: relative; z-index:9; top:25px; left: 0; background-image: url(http://demo.lanrenzhijia.com/2014/service1031/images/lanrenzhijia.png); background-repeat: no-repeat; display:block; height: 146px; padding: 8px;}
.rides-cs .btnOpen { background-position: 0 0;}
.rides-cs .btnCtn { background-position: -37px 0;}
.rides-cs ul li.top { border-bottom: solid #ACE5F9 1px;}
.rides-cs ul li.bot { border-bottom: none;}
</style>
<!--html代码部分-->
<div id="floatTools" class="rides-cs" style="height:200px;">
 <div class="floatL">
 <a id="aFloatTools_Show" class="btnOpen" title="查看在线客服" style="display:block" href="javascript:void(0);">展开</a>
 <a id="aFloatTools_Hide" class="btnCtn" title="关闭在线客服" style="display:none" href="javascript:void(0);">收缩</a>
 </div>
 <div id="divFloatToolsView" class="floatR" style="display: none;height:200px;width: 140px;">
 <div class="cn">
 <h3 class="titZx">在线客服</h3>
 <ul>
 <li><span>售前咨询</span> <a target="_blank" rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=3341271096&site=qq&menu=yes"><img border="0" src="http://demo.lanrenzhijia.com/2014/service1031/images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li>
 <li><span>售后咨询</span> <a target="_blank" rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=3341271096&site=qq&menu=yes"><img border="0" src="http://demo.lanrenzhijia.com/2014/service1031/images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li>
 <li><span>技术支持</span> <a target="_blank" rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=3341271096&site=qq&menu=yes"><img border="0" src="http://demo.lanrenzhijia.com/2014/service1031/images/online.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </li>
 </ul>
 </div>
 </div>
</div>
<!--js代码部分-->
<script src="http://wuover.qiniudn.com/jquery.js"></script>
<script>
 $(function(){
 $("#aFloatTools_Show").click(function(){
 $('#divFloatToolsView').animate({width:'show',opacity:'show'},100,function(){$('#divFloatToolsView').show();});
 $('#aFloatTools_Show').hide();
 $('#aFloatTools_Hide').show(); 
 });
 $("#aFloatTools_Hide").click(function(){
 $('#divFloatToolsView').animate({width:'hide', opacity:'hide'},100,function(){$('#divFloatToolsView').hide();});
 $('#aFloatTools_Show').show();
 $('#aFloatTools_Hide').hide(); 
 });
 });
</script>

打字机打字效果

<div style="margin: 0 auto; margin-left: 10%; color: #a71d5d;"><span id="MainContainer">提示:js代码为正在打出的内容,把代码里面的汉字修改成自己想要输出的文字即可,如看不到内容,请<b><a>点击这里</a></b>刷新页面</span></div>
<script> 
var mtimer;
var index=1;
var length=0;
var words;
var delay=80;
$(function(){
 words='提示:js代码为正在输出的内容,把代码里面的汉字修改成自己想要输出的文字即可,<br />&lt;script type="text/javascript"&gt;<br />var mtimer;<br />var index=1;<br />var length=0;<br />var words;<br />var delay=200;<br />window.onload=function(){<br />words="HTML打字机效果实现";<br />length=words.length;<br />mtimer=setInterval("Show()", delay);<br />}<br />function Show(){<br />if(index==words.length){clearInterval(mtimer);<br />}<br />document.getElementById("MainContainer").innerHTML=words.substr(0,index);<br />index++;}<br />&lt;/script&gt;';
 length=words.length;
 mtimer=setInterval(Show, delay);
function Show(){
 if(index==words.length){
 clearInterval(mtimer);
 }
 document.getElementById("MainContainer").innerHTML=words.substr(0,index);
 index++;
}
});
</script>
<div class="ad2"></div>

网站圆型进度条返回顶部功能

    <div style="height: 2000px;"></div>
    <style>
    #backtoTop{background-color:#eee;border-radius:100%;bottom:10%;height:48px;position:fixed;right:-100px;width:48px;transition:0.5s;-webkit-transition:0.5s}
    #backtoTop.button--show{right:10px}
    .per{font-size:16px;height:48px;line-height:48px;position:absolute;text-align:center;top:0;width:48px;color:#555;cursor:pointer}
    .per:before{content:attr(data-percent)}
    .per:hover:before{content:"↑";font-size:20px}
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
     <script>
     var bigfa_scroll = {
     drawCircle: function(id, percentage, color) {
     var width = jQuery(id).width();
     var height = jQuery(id).height();
     var radius = parseInt(width / 2.20);
     var position = width;
     var positionBy2 = position / 2;
     var bg = jQuery(id)[0];
     id = id.split("#");
     var ctx = bg.getContext("2d");
     var imd = null;
     var circ = Math.PI * 2;
     var quart = Math.PI / 2;
     ctx.clearRect(0, 0, width, height);
     ctx.beginPath();
     ctx.strokeStyle = color;
     ctx.lineCap = "square";
     ctx.closePath();
     ctx.fill();
     ctx.lineWidth = 3;
     imd = ctx.getImageData(0, 0, position, position);
     var draw = function(current, ctxPass) {
     ctxPass.putImageData(imd, 0, 0);
     ctxPass.beginPath();
     ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
     ctxPass.stroke();
     }
     draw(percentage / 100, ctx);
     },
     backToTop: function($this) {
     $this.click(function() {
     jQuery("body,html").animate({
     scrollTop: 0
     },
     800);
     return false;
     });
     },
     scrollHook: function($this, color) {
     color = color ? color: "#000000";
     $this.scroll(function() {
     var docHeight = (jQuery(document).height() - jQuery(window).height()),
     $windowObj = $this,
     $per = jQuery(".per"),
     percentage = 0;
     defaultScroll = $windowObj.scrollTop();
     percentage = parseInt((defaultScroll / docHeight) * 100);
     var backToTop = jQuery("#backtoTop");
     if (backToTop.length > 0) {
     if ($windowObj.scrollTop() > 200) {
     backToTop.addClass("button--show");
     } else {
     backToTop.removeClass("button--show");
     }
     $per.attr("data-percent", percentage);
     bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
     }
     
     });
     }
    }
     
    jQuery(document).ready(function() {
     jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
     var T = bigfa_scroll;
     T.backToTop(jQuery("#backtoTop"));
     T.scrollHook(jQuery(window), "#1E90FF");
    });
    </script>

判断手机和PC电脑显示不同广告代码

<script>
var url = location.search;
url = url.substr(1);
var bs={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, 
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1, 
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, 
mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), 
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), 
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, 
iPhone: u.indexOf('iPhone') > -1,
iPad: u.indexOf('iPad') > -1         
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
} 
var flag = true;
if(bs.versions.mobile && url!='mobile'){
if(bs.versions.android||bs.versions.iPhone||bs.versions.iPad||bs.versions.ios){
flag=false;
}
}
if(flag){
/*pc广告代码*/

}else{
/*移动广告代码*/

}</script>