×

js特效怎么做

js特效怎么做(如何用js做翻页效果)

admin admin 发表于2023-01-02 01:51:55 浏览33 评论0

抢沙发发表评论

本文目录

如何用js做翻页效果


参考代码如下:

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》
    《html xmlns=“http://www.w3.org/1999/xhtml“ 》
    《head》
    《title》《/title》
    《script type=“text/javascript“ language=“javascript“ src=“http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js“》《/script》
    《script type=“text/javascript“ language=“javascript“》
    $(function() {
    $(“#right“).click(function() {
    var roll = $(“《div》《/div》“, { css: { position: “absolute“, border: “solid 1px #999“, left:    “806px“, top: “10px“, height: “494px“, width: “1px“, background:                     “#fff“}}).appendTo($(“#book“).parent());
    $(roll).animate({
    left: “10px“,
    width: “398px“
    }, 1000, function() {
    $(“#left“).css({“background“:“#fff“});
    $(roll).fadeOut(300, function() {
    $(roll).remove();
    })
    });
    });
    });
    《/script》
    《/head》
    《body style=“padding:5px;margin:0;“》
    《div id=“book“ style=“width:797px;height:494px;background:#ccc;border:solid 6px #ccc;“》
    《div id=“left“ style=“width:398px;height:494px;float:left;background:url(http://www.codefans.net/jscss/demoimg/201011/PLh.png) no-repeat top left;cursor:pointer;“》《/div》
    《div id=“right“ style=“width:398px;height:494px;float:left;background:#fff;cursor:pointer;margin-left:1px;text-align:right;“》《p style=“margin-top:470px;font-size:12px;color:#999;“》点这翻页  《/p》《/div》
    《/div》
    《/body》
    《/html》

怎么用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;i《provinceArray.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(id》0){
var
j=id-1;
var
i;
var
countrys
=
new
Array();
countrys
=
provinceArray[j].country;
city.options
=
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
=
new
Option(’不限’,’’);
town.options
=
new
Option(’不限’,’’);
for
(i=0;i

towns.length;
i++){
var
tname
=
towns[i]
town.options[town.length]
=
new
Option(tname,tname);
}
town.options
=
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特效怎么做,就是那种滑到顶部会固定在顶部,下面的继续滑动的特效


判断一下浏览器滚动高度和要固定在顶部的那个元素距离文档顶部的距离,然后监听滚动事件,获取滚动的高度,判断滚动高度和获取到的元素距顶部距离,如果相等的时候,让元素固定定位。这样就好了。
写代码太繁琐,原理是这样,你自己试试。
另外,避免出现元素固定定位时,因为突然固定,不占高度导致的页面会跳动一下的问题。可以在固定定位的同时,给后边的元素加上等同于固定定位元素高度的margin-top或者padding-top
另外。再多说一句。个人感觉。网站特效,就是用js控制css,从而得到一些单纯用css写不能实现的效果。所以,遇到类似的效果,可以自己尝试想一下思路,把思路写出来,然后再根据思路,找到自己需要了解的知识点,然后慢慢的效果就出来了

javascript特效是怎么做的


特效并不是单独针对js,还需要CSS,html
如果想要自学的话,建议先从最基础的javascript学起,吃透,要稳,不要贪快,一个例子要反复练习,甚至要从一个例子中进行推一反三或反N
基础打好之后,自己就可以写一些基本的特效了,比如简单的移动,变换了等等。
最后再去研究精简代码,改良代码,再多参考一些其它的js框架或者是演示什么的。
纯手打~~!