jquery实现星星闪烁功能

实现星星闪烁功能，其实很简单，来看一下完整的代码实现吧！

<style>*{margin:0;padding:0;}#box{width:700px;height:700px;background-color:rgb(0,153,255);position:relative;}#box span{background-image:url(image/1.png);width:16px;height:21px;}
</style>
<body><div id="box"></div>
</body>
<script>$(function(){var len=50;for(var i=0;i<len;i++){var x=Math.floor(Math.random()*$("#box").innerWidth())+"px";//每一颗星星距离图片背景左边的像素值var y=Math.floor(Math.random()*$("#box").innerHeight())+"px";//每一颗星星距离图片背景右边的像素值}hide();//一开始全部隐藏$("#box").append("<span style='left:"+x+";top:"+y+";'></span>");//随机添加这50颗星星function hide(){$("#box span").animate({opacity:0},20,function(){//透明度为0，即隐藏show();});}function show(){$("#box span").animate({opacity:1},30,function(){//透明度为1，显示hide();});}
})
</script>

喜欢的话记得收藏哦！

jquery实现星星闪烁功能相关推荐

jQuery实现星星评分功能
一.这是我做的调查问卷中的一个功能.(第三方MVC框架) 二.功能说明:1.用户点击星星,将值放到隐藏域中.2.用户可以重新点击星星修改回答. 前台JS代码: <script type=&quo ...
JS实现星星评分功能实例代码(两种方法)
转载自 JS实现星星评分功能实例代码(两种方法) 一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"&g ...
用Ajax+js+jQuery实现无闪烁定时刷新页面定时刷新
本人想在一个JSP页面上显示一个消息模块,这个消息需要定时更新,请问大家如何用Ajax+js+jQuery实现无闪烁定时刷新页面功能.本人使用的js框架是jQuery. 先说思路,那就是在前端用 js ...
jquery实现群星闪烁的效果
jquery实现群星闪烁的效果.代码产生指定数量的星星,位置随机排布.可更换星星图片,修改星星的数量和密集程度.代码量少,兼容各浏览器,效果非常自然. 下载地址: http://download.cs ...
chosen.jquery.js 有搜索功能、多选功能的下拉框插件
chosen.jquery.js 有搜索功能.多选功能的下拉框插件官方源码: https://github.com/harvesthq/chosen 该源码中的样例index.html有该插件的详 ...
从零开始学习jQuery (十) jQueryUI常用功能实战
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
html下拉菜单jq怎么设置,jquery+css实现下拉列表功能
废话不多说了,直接给大家贴代码了,具体代码如下所述: fruit .hide { display: none; } div { float: left; width: 100%; } .selecto ...
Jquery全选单选功能
Jquery全选单选功能 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="W ...
jquery mysql实现加入购物车_使用jQuery实现购物车结算功能
本文实例为大家分享了jQuery实现购物车结算功能展示的具体代码,供大家参考,具体内容如下 /*删除*/ $(function(){ $(".blue").bind("c ...

jquery实现星星闪烁功能

jquery实现星星闪烁功能相关推荐

最新文章

热门文章