www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

javascript贯彻很洒脱的气泡冒出特效,纯JS代码完

2019-06-14 03:16 来源:未知

以上所述是小编给大家介绍的JavaScript无操作后屏保功能的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • D3.js实现散点图和气泡图的方法详解
  • 纯JS代码实现气泡效果
  • JavaScript实现鼠标滑过处生成气泡的方法
  • js由下向上不断上升冒气泡效果实例
  • Jquery插件分享之气泡形提示控件grumble.js
  • JS CSS实现一个气泡提示框
  • jquery.cvtooltip.js 基于jquery的气泡提示插件
  • js 模拟气泡屏保效果代码
  • 使用JS实现气泡跟随鼠标移动的动画效果

就不给大家多文字说明了。给大家梳理下关键步骤。

今天组里的同事要写一个屏保的效果,要求鼠标无操作N秒后进入屏幕保护,滑动鼠标的时候取消屏幕保护。因为是坐在网页上,所以用JavaScript简单实现了一下,记录在此,代码如下:

构建html

(function($) {
$.fn.thoughtBubble = function( defaults ) {
var settings = $.extend({
backgroundColor: 'white',
fontColor: 'black',
width: '330px',
height: '210px',
fontSize: '15px',
bubbleColor: 'white',
speed: 125
}, defaults ),
getBubbleDiv = function( container ) {
var offset = container.offset(),
modifiedHeight = offset.top - parseInt( settings.height ),
style = '"position: absolute; top:'   modifiedHeight   'px; left:'   offset.left   'px ; width:'   settings.width   '; height:'   settings.height   ';"',
bubbleContainer = "<div class='bubble-holder' style="   style   ">"   getMainBubble()   getBubbles()   "</div>";
return bubbleContainer;
},
getMainBubble = function() {
return '<div class="main-bubble-holder"><div class="bubble main-bubble">'   getText()   '</div></div>';
},
getText = function() {
return ''   settings.text   '';
},
getBubbles = function() {
return '<div class="sm-bubble-holder"><div class="bubble bubbleLg"></div><div class="bubble bubbleMd"></div><div class="bubble bubbleSm"></div></div>';
},
animate = function(){
var bubbles = $(document).find('.bubble'),
reversed = bubbles.get().reverse(),
speed = settings.speed;
$(reversed[0]).stop().animate({ opacity: 1}, speed, function() {
$(reversed[1]).animate({ opacity: 1}, speed, function() {
$(reversed[2]).animate({ opacity: 1}, speed, function() {
$(reversed[3]).animate({ opacity: 1},speed);
});
});
});
},
unanimate = function() {
var bubbles = $(document).find('.bubble');
bubbles.stop().animate({opacity: 0});
},
shiftDiv = function( container ) {
var bubbleHolder = $(document).find('.bubble-holder'),
previousPosition = container.offset().left;
bubbleHolder.css('left', previousPosition);
};
return this.each( function() {
var $this = $(this),
container = getBubbleDiv( $this );
$this.on('mouseenter', animate );
$this.on('mouseout', unanimate );
$(window).on('resize', shiftDiv.bind(this, $this) );
return $this.parent().prepend(container);
});
};
})(jQuery);

您可能感兴趣的文章:

  • js 模拟气泡屏保效果代码

具体代码如下:

<div id='mainContainer' class='container'>
<img src='ahout.JPG' id="thoughtBubble" alt='whats up?' />
</div>
<html>
<head>
 <title>屏幕保护测试</title>
 <script type="text/javascript">
 var message ;//获取p标签
 var t=setTimeout("delayTask()",3000);//延时3秒执行延时任务
 //延时任务具体的操作
 function delayTask(){
  //延时后,在标签中显示时间
  message.innerText= new Date();//此行替换为你要做的显示操作
  clearTimeout(t);
 }
 //鼠标移动,重置延时任务
 function resetTask(){
  //重置标签中的内容
  message.innerText = "";//此行替换为你要做的取消操作
  clearTimeout(t);
  t=setTimeout("delayTask()",3000);
 }
 //页面加载时,加载函数。
 function loading(){
  message = document.getElementById("message");
  document.onmousemove = resetTask;
 }
 window.onload = loading;
 </script>
</head>
<body>
 <p>3秒无操作后显示时间:</p>
 <p id="message"></p>
</body>
</html>
<script>
  var canvas=document.getElementById("canvas");
  var context=canvas.getContext("2d");
  canvas.width=window.innerWidth;
  canvas.height=window.innerHeight;
  function Circle(){
    this.x=Math.random()*canvas.width;
    this.y=canvas.height;
    this.r=Math.random()*10;
    //绘制圆形
    this.paint=function(){
      context.beginPath();
      context.arc(this.x,this.y,this.r,0,Math.PI*2);
      context.fillStyle="white";
      context.globalAlpha = 0.5;
      context.fill();
    }
    //控制圆形移动
    this.step=function(){
      this.y--;
    }
  }
  var circles=[];
  function createCircles(){
    var circle=new Circle();//??????
    circles[circles.length]=circle;
  }

  function paintCircles(){
    for(var i=0;i<circles.length;i  ){
      circles[i].paint();
    }
  }
  function stepCircles(){
    for(var i=0;i<circles.length;i  ){
      circles[i].step();
    }
  }
  var myimg=new Image();
  myimg.src="images/demo-1.png";
  var timer="";
  setInterval(function(){
    context.drawImage(myimg,0,0);
    timer  ;
    if(timer ==0){
      createCircles();
    }
    paintCircles();
    stepCircles();
  },10);
</script>
<script type="text/javascript">
$(window).ready( function() {
$('#thoughtBubble').thoughtBubble({
text: 'baby,I love you',
font: 'avenir'
});
});
<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>5多个小球往上运动</title>
 <style>
 </style>
 </head>
 <body>
  <div id="d1">
    <canvas id="canvas"></canvas>
  </div>
 </body>
</html>

3、使用气泡效果

图片 1

关键步骤:

实现思路:HTML里只需要一个CANVAS元素,Javascript里操作canvas
1、给canvas里绘制背景图片
2、在绘制半径为0-10px的圆形,x坐标屏幕水平随机,y所标竖直大于屏幕高度。
  圆形背景色可以是随机,那就是各种色彩了!
    利用计时器控制y--

4、这是jquery.thoughtBubblr.js代码

本文实例讲述了javascript实现很浪漫的气泡冒出特效代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

2、在需要使用气泡效果的地方

js代码

以上给大家分享了js气泡效果的关键步骤,代码简单易懂,就没给写过多的文字说明,大家有疑问欢迎给我留言,小编会及时回复大家的,在此小编也非常感谢大家对脚本之家网站的支持!

需要在自己的网站中添加浪漫元素,这不失为一种好的方式,希望大家灵活运用javascript实现气泡冒出特效,谢谢大家的阅读。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src='js/jquery.thoughtBubble.js'></script>

您可能感兴趣的文章:

  • D3.js实现散点图和气泡图的方法详解
  • javascript实现很浪漫的气泡冒出特效
  • JavaScript实现鼠标滑过处生成气泡的方法
  • js由下向上不断上升冒气泡效果实例
  • Jquery插件分享之气泡形提示控件grumble.js
  • JS CSS实现一个气泡提示框
  • jquery.cvtooltip.js 基于jquery的气泡提示插件
  • js 模拟气泡屏保效果代码
  • 使用JS实现气泡跟随鼠标移动的动画效果

1、引入js文件

TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:javascript贯彻很洒脱的气泡冒出特效,纯JS代码完