JS特效(js特效素材网)
求 js 特效，鼠标滑过，显示浮层
首先随便找一个地方新建一个div 并且隐藏。例如
div id='showTip' style="background-color: white; width:200px; height:200px;position: absolute; display: none; "
/div
然后在链接那边写个onmouseover 属性加个触发方法 如showDiv()具体方法如下
function showDiv(e){
$("#showTip").html("这里可以写一些html的内容，如图片文字");
$("#showTip").css("top",e.clientY);//这里可以根据情况适当调整
$("#showTip").css("left",e.clientX);
$("#showTip").show();
}
还要在链接那边加上 onmouseout属性触发方法如下:
function hideDiv(){
$("#showTip").hide();
}
以上需要引入jquery支持
怎么用js做一个地区选择控件的特效啊
1.
首先写一个js文件，areaLocation.js:
var
provinceArray=
new
Array();
provinceArray=[
{"pname":"江苏",
"country":[
{
"cname":"南京市",
"town":["玄武区","白下区","秦淮区","建邺区","雨花台","江宁区",
"六合区","溧水县","高淳县"]},
{
"cname":"南通市",
"town":["崇川区","港闸区","启东市","如皋市","通州市","海门市","海安县","如东县"]
},
{
"cname":"苏州市",
"town":["金阊区","沧浪区","平江区","虎丘区","吴中区","张家港","昆山市","吴江市","太仓市"]
}
]
},
{"pname":"上海",
"country":[
{
"cname":"上海市",
"town":["徐汇区","普陀区","杨浦区","虹口区","卢湾区","浦东区","黄浦区","长宁区","闸北区","静安区","闵行区","松江区"]
}
]
}
];
function
areaInitialize(){
province.length=1;
for(var
i
=
0;iprovinceArray.length;i++){
var
pro
=
provinceArray[i].pname;
province.options[province.length]
=
new
Option(pro,pro);
}
}
function
changeCLocation(id,city){
//alert(id);
city.length
=
0;
if(id0){
var
j=id-1;
var
i;
var
countrys
=
new
Array();
countrys
=
provinceArray[j].country;
city.options[0]
=
new
Option('不限','');
for
(i=0;i
countrys.length;
i++){
var
cname
=
countrys[i].cname
city.options[city.length]
=
new
Option(cname,
cname);
}
changeTLocation(id,1,town);
}else
if(id==0){
city.length
=
0;
town.length
=
0;
city.options[city.length]
=
new
Option('不限','');
town.options[town.length]
=
new
Option('不限','');
}
}
function
changeTLocation(pid,cid,town){
//alert(cid);
var
countrys
=
new
Array();
var
towns
=
new
Array();
town.length
=
0;
var
i;
countrys
=
provinceArray[pid-1].country;
areaId
=
countrys[cid-1].areaId;
towns
=
countrys[cid-1].town
city.options[0]
=
new
Option('不限','');
town.options[0]
=
new
Option('不限','');
for
(i=0;i
towns.length;
i++){
var
tname
=
towns[i]
town.options[town.length]
=
new
Option(tname,tname);
}
town.options[0]
=
new
Option('不限','');
}
2.
再写一个html页面：
!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN"
html
head
script
type="text/javascript"
/script
script
type="text/javascript"
window.onload=areaInitialize();
/script
/head
body
select
size="1"
option
value=0
selected--请选择--/option
/select
select
size="1"
option
value=0
selected--请选择--/option
/select
select
size=1
option
value=0
selected--请选择--/option
/select
/body
/html
JS写幻灯片特效
新建一个文件夹dome,
在文件下新建一个文件夹img 放入5张名称为1,2,3,4,5 格式为“.jpg”的图片文件。
在新建一个dome.html 文件 内容如下：
html
head
meta charset="UTF-8"/
title/title
style type="text/css"
*{margin: 0;padding: 0;}
#a1{
width: 600px;
height: 500px;
border: 10px silver solid;
animation:backgroundImg 5s infinite ;
-webkit-animation:backgroundImg 5s ?infinite;
}
@keyframes backgroundImg{
0%{background-color: #0000FF;}
25%{background-color: #0099FF;}
50%{background-color: #00FFFF;}
75%{background-color: #99FFFF;}
100%{background-color: #FFFFFF;}
}
@-webkit-keyframes backgroundImg{
0%{background-color: #0000FF;}
25%{background-color: #0099FF;}
50%{background-color: #00FFFF;}
75%{background-color: #99FFFF;}
100%{background-color: #FFFF00;}
}
#backImg{
width: 500px;
height: 490px;
/*border: 5px red solid;*/
margin-left:45px ;
z-index: 100;
background-size:100% 100%;
}
a:hover{
background-color:#0000FF;
border: 5px springgreen solid;
width: 20px;
}
a{
display: block;
z-index: ;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
color: beige;
font-weight: 300;
border-radius:50% ;
font-size: 2em;
background-color:#0099FF;
position: absolute;
top: 255px;
box-shadow: none;
}
#right{
left:580px;
}
span{
display: block;
width: 50px;
height: 10px;
background-color: #99FFFF;
float: right;
margin-left: 20px;
position: relative;
bottom: 50px;
right: 100px;
}
#show{
width: 200px;
height: 100px;
border: 1px red solid;
position: absolute;
bottom: 230px;
right: 150px;
background-size:100% 100% ;
}
/style
/head
body
div id="a1"
a id="left"lt;/a
a id="right"gt;/a
div id="backImg"/div
div id="foot"/div
/div
script type="text/javascript"
var div=document.getElementById("a1");
var backImg=document.getElementById("backImg");
var a_left=document.getElementById("left");
var a_right=document.getElementById("right");
var i=0;
function backImage(){
i++;
backImg.style.backgroundImage="url(img/" +i+".jpg)";
setTimeout(backImage,7000);
if(i=5){
i=0;
}
}
backImage();
a_left.onclick=function(){
i--;
if(i=0||i5){
i=5;
}
backImg.style.backgroundImage="url(img/" +i+".jpg)";
}
a_right.onclick=function(){
i++;
if(i=0||i5){
i=1;
}
backImg.style.backgroundImage="url(img/" +i+".jpg)";
}
for (var j = 0; j 3; j++) {
var span=document.createElement("span");
span.id="span_"+j;
div.appendChild(span);
span.onmouseover=function(){
show(event);
}
}
function show(e) {
backImg.style.opacity="0.5";
var span = e.target;
var div = document.createElement("div");
div.id = "show";
span.parentNode.appendChild(div);
console.log(span.id);
if(span.id=="span_2"){
i-=1;
console.log(i);
if(i=0||i5){
i=5;
}
div.style.backgroundImage="url(img/" +i+".jpg)";
}else if(span.id=="span_1"){
div.style.backgroundImage="url(img/" +i+".jpg)";
}else if(span.id=="span_0"){
i+=1;
if(i=0||i5){
i=1;
}
div.style.backgroundImage="url(img/" +i+".jpg)";
}
span.onmouseout = function() {
backImg.style.opacity="initial";
this.parentNode.removeChild(div);
}
span.onclick=function(){
backImg.style.backgroundImage="url(img/" +i+".jpg)";
}
}
/script
/body
/html
在一个网页中如何实现两个JS特效
你不是写了2个function呢，元素的事件调用你想要调用的function不就可以了么？
script type="text/javascrtip
function A{……}
function B{……}
/script
例如：btn1的onclick事件触发A，btn2的onclick事件触发B。。。这样就可以咯~~~