1 JavaScript屏幕弹球
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>碰撞的小球</title>
<meta http-equiv="content-type" content="text/html;charset=utf-"/>
<style type="text/css">
#ball{
position: absolute;
background-color: lightblue;
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>
</head>
<body style="background: #bebebe;">
<input type="button" value="点击增加小球" onclick="addBall()">
<div id="ball" style="">
</div>
<script type="text/javascript">
//定义局部变量
var directX=10;//定义x轴方向
var directY=10;//定义y轴方向
var ballX=10;//定义x轴坐标
var ballY=10;//定义y轴坐标
var speed=2;//定义一个速度
var divs=[];
function addBall(){
var div = document.createElement("div");
div.style.backgroundColor = getColor();
var xMax = window.innerWidth;
var yMax = window.innerHeight;
div.style.top = Math.random()*(yMax-50)+"px";
div.style.left = Math.random()*(xMax-50)+"px";
div.yFlag = true;
div.xFlag = true;
div.impact = false;
div.impact = false;
divs.push(div);
document.body.appendChild(div);
}
var myball=document.getElementById("ball");
function ballMove(){
ballX=ballX+directX*speed;
ballY=ballY+directY*speed;
//改变div的left,top的值
myball.style.left=ballX+"px";
myball.style.top=ballY+"px";
//clientWidth浏览器不带滚动条的宽度;clientHeight浏览器不带工具栏菜单栏以及滚动条等的高度
//offsetWidth可以返回一个对象的实际宽度(不带单位)offsetHeight类同
//判断x轴什么时候转向
if(ballX+myball.offsetWidth>=document.documentElement.clientWidth || ballX<=0){
directX=-directX;
setInterval("changeBgcolor()",100);
}
//判断y轴何时转向
if(ballY+myball.offsetHeight>=document.documentElement.clientHeight || ballY<=0){
directY=-directY;
document.getElementById("ball").style.backgroundColor=getColor().hexVal;
}
}
//开始进行小球的运动
setInterval("ballMove()",80);
//改变div的背景色
function changeBgcolor(){
document.getElementById("ball").style.backgroundColor=getColor().hexVal;
}
function getColor() {
var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
var color = new Array(6);
var rand = Number((Math.random() * 0xffffff).toFixed(0));
var rand1 = rand;
//15 为 1111 ，255 为 1111 1111
for(var i = 5; i >= 0; i--) {
//将每四个二进制未转化为16进制放入数组
color[i] = arr[rand & 15];
rand >>>= 4;
}
var rgb = "";
rgb += (rand1 >>> 16 & 255) + ",";
rgb += (rand1 >>> 8 & 255) + ",";
rgb += rand1 & 255;
color = color.join("");
return {
hexVal: "#" + color,
rgbVal: rgb
};
}
</script>
</body>
</html>
2 json实现三级菜单导航
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
.nav,.nav ul,.two li> ul{
margin: 0px;
padding: 0px;
list-style: none;
}
.nav ul{
width: 250px;
}
.nav li,.two li> ul li{
width: 150px;
margin-left: 0px;
margin-top: 5px;
text-align: center;
padding-top: 10px;
}
.nav> li{
background-color: #555555;
float: left;
margin: 10px 10px;
}
.nav> li > ul li{
width: 140px;
float: left;
margin-left: 10px;
background-color: #666666;
}
.nav> li > ul li>ul li{
float: left;
width: 130px;
margin-left: 10px;
background-color: #A0A0A0;
}
a{
text-decoration: none;
color: #edecec;
}
.noneUl>ul{
display: none;/*隐藏二级菜单*/
}
.blockUl>ul{/*显示二级菜单*/
display: block;
}
</style>
</head>
<body>
<ul id="nav" class="nav">
</ul>
</body>
<!--<script type="text/javascript" src="jquery.js"></script>-->
<script type="text/javascript">
function navJson() {
var nav = [
{
"title": "主页",
"url": "#"
},
{
"title": "会员管理",
"url": "#",
"sub": [
{
"title": "会员列表",
"url": "#",
"sub":[
{
"title": "会员1",
"url": "vipShow.html",
"sub":null
} ,
{
"title": "会员2",
"url": "vipShow.html",
"sub":null
} ,
{
"title": "会员3",
"url": "vipShow.html",
"sub":null
}
]
},
{
"title": "模块接入",
"url": "file_manager.html"
},
{
"title": "jqGrid",
"url": "table_jqgrid.html"
},
{
"title": "Foo Tables",
"url": "table_foo_table.html"
}
]
},
{
"title": "系统设置", //一级导航名称
"url": "#", //一级导航链接
"sub": [ //一级导航子级
{
"title": "导航管理", //二级导航名称
"url": "#", //二级导航链接
"sub": [ //二级导航子级
{
"title": "联系我们", //三级导航名称
"url": "nav/show.html", //三级导航链接
"sub":null
},
{
"title": "导航管理员", //三级导航名称
"url": "nav/show.html", //三级导航链接
"sub":null
}
]
}, {
"title": "模块管理",
"url": "#",
"sub": [
{
"title": "模块列表",
"url": "module/show.html",
"sub":null
}
]
},
]
}
];
return nav;
}
//调用生成菜单
createNav();
//点击关隐藏 和显示
function noneUl_blockUl(lis,eve){//负责子级显示隐藏
eve.stopPropagation();//阻止点击事件向上冒泡 阻止父级事件
if(lis.getAttribute("class")=='noneUl' ){
lis.setAttribute("class","blockUl");
}else if(lis.getAttribute("class")=='blockUl'){
lis.setAttribute("class","noneUl");
}
}
//生成菜单
function createNav(){
//获得最外层
var first=document.getElementById("nav");
//获得json
var navValue=navJson();
//给ul添加内容
first.innerHTML=createLi(navValue);
}
/**
* 生成子菜单ul
* @param {Object} subValue
*/
function createUl(subValue){
var htmlUl="<ul >";
htmlUl+=createLi(subValue);
htmlUl+="</ul>";
return htmlUl;
}
/**
* 创建li
* @param {Object} navValue
*/
function createLi(navValue) {
//html 内容记录
var htmlLi ="";
//循环所有元素
for(var i = 0; i<navValue.length; i++){
htmlLi+="<li class='noneUl' οnclick='noneUl_blockUl(this,event)'><a href='"
+navValue[i].url+"'>"+navValue[i].title+"</a>";
//判断该元素是否有子集
if(navValue[i].sub!=null && navValue[i].sub.length>0){
//获得子集元素 利用子集生成新的ul
htmlLi += createUl(navValue[i].sub);
}
//li结束
htmlLi+='</li>';
}
return htmlLi;
}
</script>
</html>
运行结果：
3 jQuery实现图片轮播
注意：导入相同版本的js文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery轮播效果图</title>
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<style type="text/css">
ul {
list-style: outside none none;
}
.slider {
width: 400px;
height: 400px;
text-align: center;
margin: 30px auto;
position: relative;
}
.slider-panel, .slider-nav{
position: absolute;
z-index: 8;
}
.slider-panel {
position: absolute;
}
.slider-panel img {
width: 400px;
height: 400px;
border: none;
}
.slider-extra {
width: 400px;
height: 400px;
position: relative;
}
.slider-nav {
margin-left: -51px;
position: absolute;
left: 50%;
bottom: 4px;
}
.slider-nav li {
background: #3e3e3e;
border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 2px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-nav .slider-item-selected {
background: blue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已经开始轮播
t = 1000; //轮播时间间隔
length = $('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});
//向前翻页
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
//向后翻页
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
//开始轮播
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
//停止轮播
function stop() {
clearInterval(interval);
hasStarted = false;
}
//开始轮播
start();
});
</script>
</head>
<body>
<div class="slider">
<ul class="slider-main">
<li class="slider-panel">
<img alt="1-2" title="1-2" src="img/1-2.jpg">
</li>
<li class="slider-panel">
<img alt="2-3" title="2-3" src="img/2-3.jpg">
</li>
<li class="slider-panel">
<img alt="3-4" title="3-4" src="img/3-4.jpg">
</li>
<li class="slider-panel">
<img alt="5-6" title="5-6" src="img/5-6.jpg">
</li>
</ul>
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
</ul>
</div>
</div>
</body>
</html>
结果：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
