如何把js特效添加在自己做的网页中?_IT百科

当要把JavaScript代码插入HTML页面里面，需要使用 <script>标签（同时使用 type 属性来定义脚本语言）。

这样，<script type="text/javascript">和 </script>就可以告诉浏览器 JavaScript 从何处开始，到何处结束。

例如：xxxx字段是JavaScript代码效果执行，用来向页面写入输出。

把xxxx命令输入到 <script type="text/javascript">与</script>之间后，浏览器就会把它当作一条 JavaScript 命令来执行。这样浏览器就会向页面写入 "wwww"。

<html><body><script type="text/javascript">document.write("wwww")</script></body></html>

最后的结果就会在页面上显示“wwww”效果，从而实现JS特效在页面上的插入。

采用Jquery实现的列表数据动态更新效果，更新的数据可以是ajax请求的数据。

CSS:

.main

{

width:

100%

margin-top:

100px

text-align:

center

font-size:

12.5px

}

th,

{

border:

1px

solid

#ccc

line-height:

40px

padding-left:

5px

}

.item:hover

{

background-color:

#efefef

}

.item:nth-child(2n)

{

background-color:

#efefef

}

.ListView

{

width:

600px

overflow:

hidden

margin:

auto

padding:

10px

height:372px

border:

1px

solid

#dddddd

}

.ListView

{

width:

1200px

margin:

auto

border-collapse:

collapse

}

.Item

{

border-bottom:

1px

dashed

#dddddd

padding:

10px

overflow:

hidden

margin-left:600px

}

.Item

span

{

float:

left

text-align:

left

}

.Item

span:first-child

{

color:

#6AA8E8

}

.Item

span:last-child

{

text-align:

center

}

HTML

<div

class="main">

<div

class="ListView">

<div

class="c">

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

style="text-align:center"><a

href="javascript:void(0)"

onClick="ListView.Update()">刷新数据</a></p>

<script

type="text/javascript"

src="/js/jquery-1.8.0.min.js"></script>

<script

type="text/javascript">

$(function(){

ListView.Init()

})

var

ListView={

Init:function(){

$(".Item

span").css("width",$(".ListView").width()/4+"px")

for(var

i=0i<$(".Item").lengthi++){

var

target=$(".Item")[i]

$(target).animate({marginLeft:"0px"},300+i*100)

}

Update:function(){

$(".ListView

.Item").remove()

for(var

i=0i<10i++){

var

newItem=$("<div

class=\"Item\">

</div>")

$(newItem).find("span").css("width",$(".ListView").width()/4+"px")

$(".ListView

.c").append(newItem)

$(newItem).animate({marginLeft:"0px"},300+i*100)

}

</script>

附上演示效果

http://demo.jb51.net/js/2015/jquery-dtlb

效果是不是非常棒呢，接下来我们再来看看瀑布流的实现思路和js控制动态加载的代码

下面的代码主要是控制滚动条下拉时的加载事件的

在下面代码说明出，写上你的 *** 作即可，无论是加载图片还是加载记录数据

都可以

别忘了引用jquery类库

$(window).scroll(function

()

{

var

scrollTop

$(this).scrollTop()

var

scrollHeight

$(document).height()

var

windowHeight

$(this).height()

(scrollTop

windowHeight

scrollHeight)

{

//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的 *** 作

//var

page

Number($("#redgiftNextPage").attr('currentpage'))

//redgiftList(page)

//$("#redgiftNextPage").attr('currentpage',

page

}

})

解析：

判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop

clientHeight

scrollHeight。（兼容不同的浏览器）。

<tr>

<table>

<tr>

<td>

<option value="1">VALUE1</option>

<option value="2">VALUE2</option>

<option value="3">VALUE3</option>

<option value="4">VALUE4</option>

</select>

</td>

<td>

<a href="#" onclick="addSort()" style="height:20pxborder: 1px solid #99BBE8margin:autopadding:0pxtext-align:center

width:30pxdisplay:blockbackground-image:url(${ctx}/images/button.gif)

text-decoration:nonefont-size:14pxcolor:#282523padding-top:4px">添加</a>

<a href="#" onclick="deleteSort()" style="height:20pxborder: 1px solid #99BBE8margin:autopadding:0pxtext-align:center

width:30pxdisplay:blockbackground-image:url(${ctx}/images/button.gif)

text-decoration:nonefont-size:14pxcolor:#282523padding-top:4px">移除</a>

</td>

<td>

</select>

</td>

</tr>

</table>

</td>

</tr>

<script

type="text/javascript">

function addSort(){

var src = document.getElementById('srcList')

var dest = document.getElementById('destList')

for (var i = 0i <src.options.lengthi++)

{

if (src.options[i].selected)

{

var exist = false

for (var j = 0j <dest.options.lengthj++)

{

if (dest.options[j].value == src.options[i].value)

{

exist = true

break

}

if (!exist)

{

var opt = document.createElement('OPTION')

opt.value = src.options[i].value

opt.text = src.options[i].text

dest.options.add(opt)

}

/** 删除分类 */

function deleteSort(){

var dest = document.getElementById('destList')

for (var i = dest.options.length - 1i >= 0 i--)

{

if (dest.options[i].selected)

{

dest.options[i] = null

}

</script>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11468726.html

如何把js特效添加在自己做的网页中?

发表评论

评论列表（0条）