HTML_12_javascript经典效果 _tap切换_图片切换_星星点灯 ...

最新推荐文章于 2022-10-17 16:41:24 发布

weixin_30532759

最新推荐文章于 2022-10-17 16:41:24 发布

阅读量181

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/szm2019/p/7140924.html

版权

1，点星星

<!doctype html>

<head>

<title>Document</title>

</style>

function star(e){

var obj = document.createElement("img");

obj.src="images/xingxing.jpg";

var w=Math.floor(Math.random()*(80)+20);

obj.width=w;//改变大小

var x=e.clientX;

var y=e.clientY;

obj.style.position="absolute";

obj.style.top=y+"px";

obj.style.left=x+"px";//找位置

document.body.appendChild(obj);//将img标签放到body里面

}

</script>

</head>

<body>

</body>

</html>

2，图片切换

<!doctype html>

<head>

<title>Document</title>

div{

border:1px solid red;

width:600px;

}

ul{

float:right;

}

ul li{

list-style:none;

border:1px solid red;

width:22px;

height:22px;

margin:10px;

text-align:center;

line-height:22px;

}

</style>

window.οnlοad=init;

var i=1;

var dingshiqi;//全局变量

function init()

{

//改第一个li背景颜色

var obj=document.getElementById("li1");

obj.style.background="orange";

dingshiqi = window.setInterval("tupian()",1000);

}

function tupian(){

i++;

if(i>6){

i=1;

}//获取img的变量

var obj=document.getElementById("d1");

//修改img的对象的src属性

obj.src="images/d"+i+".jpg";

//修改里标签背景颜色

ys();

var yanse=document.getElementById("li"+i);

yanse.style.background="orange";

}

//鼠标放上去图片停止自动切换函数

function stopTu(){

window.clearInterval(dingshiqi);

}

//鼠标离开去图片自动播放

function startTu(){

dingshiqi = window.setInterval("tupian()",1000);

}

function tingTu(n){

var obj=document.getElementById("d1");

var m=n.innerHTML;//可以把this 换成数字123456，此步骤可以省略

obj.src="images/d"+m+".jpg";

i=m;

ys();

window.clearInterval(dingshiqi);

n.style.background="orange";

}

function ys(){

for(var j=1;j<=6;j++)

{

var obj1=document.getElementById("li"+j);

obj1.style.background="white";

}

//鼠标离开自动切换

function dongTu(){

dingshiqi = window.setInterval("tupian()",1000);

}

</script>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

3，tab切换

<!doctype html>

<head>

<title>Document</title>

margin:0px;

padding:0px;

}

#d1{

border:1px solid red;

width:510px;

height:300px;

}

ul li{

border:1px solid red;

list-style:none;

float:left;

width:100px;

height:50px;

text-align:center;

line-height:50px;

}

ul{

height:50px;

}

#div1,#div2 ,#div3 ,#div4{

display:none;

}

#div1{

display:block;

}

</style>

function showDiv(n,m){

//吧所有div隐藏

for(var i=1;i<=4;i++){

var allDiv=document.getElementById("div"+i);

allDiv.style.display="none";

}

//吧所有li显示

for(var j=1;j<=4;j++){

var allLi=document.getElementById("li"+j);

allLi.style.border="1px solid red";

}

//show

var obj =document.getElementById("div"+n);

obj.style.display="block";

m.style.borderBottom="1px solid white ";

}

</script>

<ul>

</ul>

国际新闻：<br/>

奥巴马——————<br/>

南湖————————

</div>

国内新闻：<br/>

北京——————<br/>

上海——————

</div>

体育新闻：<br/>

女排————————<br/>

男足————————

</div>

娱乐新闻：<br/>

某明星——————<br/>

电影————————

</div>

</head>

<body>

</body>

</html>

转载于:https://www.cnblogs.com/szm2019/p/7140924.html

weixin_30532759

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML_12_javascript经典效果 _tap切换_图片切换_星星点灯 ...

1，点星星<!doctypehtml><htmllang="en"onclick="star(event)"><head> <metacharset="UTF-8"> <metaname="Generator"...
复制链接

扫一扫