1.JQ广告弹窗

<div id="flo">

    <img src="image.jpeg">

</div>

<script>

var flo = document.getElementById('flo');

var open = document.getElementById('open');

var max_left = document.documentElement.clientWidth - flo.offsetWidth; //可视区宽度减去div本身的宽度

var max_top = document.documentElement.clientHeight - flo.offsetHeight //可视区高度减去div本身的高度

var t = 1,

    l = 1;

function flao() {

    var old_left = flo.offsetLeft;

    var old_top = flo.offsetTop;

    //新的left 和 top

    var new_left = old_left + l;

    var new_top = old_top + t;

    flo.style.left = new_left + 'px';

    flo.style.top = new_top + 'px';

    if (new_top == max_top || new_top == 0) {

        // alert('daodile')

        t = -1 * t;

    }

    if (new_left == max_left || new_left == 0) {

        l = -1 * l;

    }

}

var timer = setInterval(flao, 10);

flo.onmousemove = function() {

    clearInterval(timer)

}

flo.onmouseout = function() {

    timer = setInterval(flao, 10);

}

window.onresize = function() {

    max_left = document.documentElement.clientWidth - flo.offsetWidth; //可视区宽度减去div本身的宽度

    max_top = document.documentElement.clientHeight - flo.offsetHeight //可视区高度减去div本身的高度

    flo.style.left = 0 + 'px';

    flo.style.top = 0 + 'px';

    t = 1, l = 1;

}

</script>

使用了JQ+JS。实现简单的浮游弹窗效果。

2.随机抽奖

		<style>

			.content {

			width:456px;

			margin:0 auto;

			text-align:center;

			font-weight:800;

		}

		.kuai {

			width:150px;

			height:150px;

			float:left;

			line-height:150px;

			border:1px solid #666;

		}

		.button {

			width:456px;

			margin:0 auto;

			text-align:center;

		}

		.choujiang {

			border:none;

			color:#fff;

			background-color:#5cb85c;

			border-radius:4px;

			font-size:20px;

			padding:5px 20px;

			margin-top:20px;

			cursor:pointer;

		}

		.choujiang:hover {

			background-color:red;

		}

		</style>

		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

		<script>

			//请在此段代码前引用jq,否则代码无效

		$(document).ready(function() {

		    var name = ['五等奖', '一等奖', '谢谢参与', '三等奖', '四等奖', '谢谢参与', '六等奖', '谢谢参与', '二等奖']

		    for (var i = 1; i <= name.length; i++) {

		        $(".content").append('<div id="' + i + '" class="kuai">' + name[i - 1] + '</div>');

		    }

		    $('.choujiang').on('click', function() {

		        $(this).attr("disabled", true); //点击按钮后,按钮进入不可编辑状态

		        var sum = name.length;

		        var le = 3 //设置滚动多轮

		        var hh = sum * le;

		        var y = 1;

		        var x = hh;

		        var times = 12; //调节滚动速度

		        var rand = parseInt(Math.random() * (x - y + 1) + y); //获取随机数

		        var i = Math.ceil(rand / sum); //向上取整

		        for (var i = i; i < le; i++) {

		            rand = rand + sum

		        }

		        time(1, rand, times, sum, times) //点击按钮后触发time事件

		    })

		});

		function time(shu, sums, tie, sum, tis) { //倒计时

		    var tie = tie + tis //滚动速度

		    setTimeout(function() {

		        if (shu <= sums) {

		            $('.kuai').css({

		                'background-color': '',

		                'color': ''

		            }) //清除css

		            $('#' + shu + '').css({

		                'background-color': 'red',

		                'color': '#fff'

		            }) //添加css样式

		            if (shu == sum) {

		                sums = sums - shu

		                shu = 0;

		            }

		            shu++

		            text(shu, sums, tie, sum, tis)

		        } else {

		            $('.choujiang').attr("disabled", false); //抽奖完毕,按钮重新进入可编辑状态

		        }

		    }, tie);

		}

		function text(shu, sums, tie, sum, tis) {

		    time(shu, sums, tie, sum, tis) //执行time事件

		}

		</script>

	</head>

	<body>

		<div class="content">

		</div>

		<div class="button">

		    <button type="button" class="choujiang">抽奖</button>

		</div>

	</body>

使用JS+JQ,浅显易懂。

后面还有一些其他小domo会陆续发的

JQ广告弹窗&随机抽奖————JQ的更多相关文章

  1. js广告弹窗

    生活中我们经常遇到一些烦人的广告页面,比方说弹窗,悬浮等等各种广告.有的同事甚至都下一个屏蔽广告插件到浏览器上.这样就防止了广告的干扰. 但是我们学前端的必须是要知道广告弹窗这个做的过程,甚至是它的原 ...

  2. C#实现随机抽奖和冒泡排序

    随机抽奖程序 string[] s = new string[] { "A", "B", "C", "D", " ...

  3. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  4. jQuery实现广告弹窗

    首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...

  5. jquery.cookie广告弹窗点击关闭后一天弹一次

    jquery.cookie广告弹窗点击关闭后一天弹一次 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  6. 原生Js_实现广告弹窗

    广告样式当页面加载后5s刷新在右下角 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

  8. 一个好玩的jq+php实现转盘抽奖程序

    前台页面: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <met ...

  9. jq动画设置图片抽奖(修改效果版)

    效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...

随机推荐

  1. Kvm --01 虚拟化基础概念

    目录 1. 虚拟化基础概念 01. 什么是虚拟化? 02. 为什么要用虚拟化? 03. 虚拟化在企业中的应用场景? 04. 虚拟化软件介绍 05. Kvm介绍 2. 安装部署Kvm 3. Kvm虚拟机 ...

  2. python常用函数 F

    filter(callable, list/tuple) 接收一个函数和一个序列,完成元素过滤. 例子: fnmatch(str,str) 使用底层操作系统的大小写敏感规则来匹配模式. 例子: fnm ...

  3. Linux 下源码安装ngnix

    版本说明: NGINX 版本1.12.0 pcre-8.40 zlib-1.2.11 openssl-1.1.0i   安装过程 # ./configure  --prefix=/usr/ngnix  ...

  4. procixx地址

    \\192.168.35.7\Download\Builds\procixx_psoc

  5. gitlab私钥配置

    一.Linux版 1).首先打开linux服务器,输入命令:ls -al ~/.ssh,检查是否显示有id_rsa.pub或者id_dsa.pub存在,如果存在请直接跳至第3步. 2).在bash中输 ...

  6. vue 字符串长度控制显示的字数超出显示省略号

    1. html <p class="index__Feature-list-itemlist-title newline"> {{item.name| ellipsis ...

  7. 注意！黑客可以通过CSS3功能攻击浏览器

    随着通过HTML5和CSS3引入的惊人数量的功能,浏览器的攻击面也相应增长.因此,这些功能之间的交互可能会导致意外行为影响用户的安全,这并不奇怪.在这篇文章中,中国知名黑客安全组织东方联盟描述了这样一 ...

  8. Autodesk Maya 2019 for Mac(三维动画软件)最新功能介绍

    Autodesk Maya是美国Autodesk公司出品的世界顶级的三维动画软件,应用对象是专业的影视广告,角色动画,电影特技等.Maya功能完善,工作灵活,易学易用,制作效率极高,渲染真实感极强,是 ...

  9. php min()函数 语法

    php min()函数 语法 作用:从所有参数中找到最小数 语法:min(X,Y,Z) 或者min(array(X,Y,Z)) 参数:min函数中参数至少一个,可以多个参数,也可以是数组. 说明:如果 ...

  10. Equivalent Prefixes

    题目链接 题意:给你两个数组a,b,大小为n,让你寻找一个数p (1<= p <= n) ,使之在 1~p 任意一个区间中a,b数组的最小值下标相同. 思路:看到用线段树去写的我也是服了. ...