当前位置:  编程技术>WEB前端
本页文章导读:
    ▪Jquery 自定义动画       animate(params, options)   返回值:jQuery 概述 用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属.........
    ▪js 利用image对象实现图片的预加载      大量采用高解析度的图像的确可以让一个Web站点容光焕发。但同样也会造成站点访问速度下降——图片是文件,文件就要占用带宽,而带宽直接同访问等待时间相关。现在,让我们来学.........
    ▪Javascript:IE打印页面设置,预览,首页设置       1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta content="text/html; charset=utf-8" .........

[1]Jquery 自定义动画
    来源: 互联网  发布时间: 2013-11-19
animate(params, options)   返回值:jQuery 概述

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

参数
paramsOptions

一组包含作为动画属性和终值的样式属性和及其值的集合

optionsOptions

一组包含动画选项的值的集合。

选项
durationString,Number

(默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easingString

(默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

completeFunction

在动画完成时执行的函数

stepCallback

queueBoolean

(默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

示例 描述:

第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始。

HTML 代码:
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代码:
$("#go1").click(function(){
  $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});

$("#go2").click(function(){
  $("#block2").animate( { width: "90%"}, 1000 )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});
描述:

第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完成后,后一个动画才会开始.

HTML 代码:
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代码:
$("#go1").click(function(){
  $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});

$("#go2").click(function(){
  $("#block2").animate( { width: "90%"}, 1000 )
     .animate( { fontSize: '10em' } , 1000 )
     .animate( { borderWidth: 5 }, 1000);
});
描述:

用600毫秒切换段落的高度和透明度

jQuery 代码:
$("p").animate({
   height: 'toggle', opacity: 'toggle'
 }, { duration: "slow" });
描述:

用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)

jQuery 代码:
$("p").animate({
   left: 50, opacity: 'show'
 }, { duration: 500 });
描述:

一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数,这个参数才起作用。

jQuery 代码:
$("p").animate({
   opacity: 'show'
 }, { duration: "slow", easing: "easein" });
作者:guoxuepeng123 发表于2013-3-29 8:45:50 原文链接
阅读:0 评论:0 查看评论

    
[2]js 利用image对象实现图片的预加载
    来源:    发布时间: 2013-11-19

大量采用高解析度的图像的确可以让一个Web站点容光焕发。但同样也会造成站点访问速度下降——图片是文件,文件就要占用带宽,而带宽直接同访问等待时间相关。现在,让我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度。

一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。

Image()对象
最简单的图像预装载办法是使用JavaScript新建一个新的Image()对象,然后将希望预装载的图片URL传递给此对象。假设我们拥有一个名为heavyimagefile.jpg的图片文件,我们希望当用户鼠标指针移动到一张已有的图片上时显示此文件。为了能更快的对此文件进行预装载,我们简单的创建了一个名为heavyImage的新Image() 对象,然后将其通过onLoad()事件句柄同步装载到页面上。

<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='/blog_article/heavyimagefile.jpg'">
<img name="img01" src="/blog_article/justanotherfile.jpg"></a>
</body>
</html>

注意,图片的标签(tag)本身并不处理onMouseOver()以及onMouseOut()事件,这也正是上面示例中的<img>标签被包括在<a>标签中的原因。标签<a>则包括了对这些事件类型的支持。

通过数组(arrays)装载多个图片

在实际情况中,你很有可能需要预装载不止一张的图片;比如,对于包括多个图片的菜单条,或者希望实现平滑的动画效果。要实现这些并不困难,只需要利用JavaScript的数组,如下例所示:

<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=/blog_article/images[i];_br/index.html> }
}
</script>

在上面的例子中,定义了变量i以及名为imageObj的Image()对象。然后定义了新数组images[],每一个数组元素将存储需要预装载图片的地址来源。最后,使用一个for()循环来遍历整个数组,并对每个元素指定Image()对象,以此将图片都预装载到缓存中。


    
[3]Javascript:IE打印页面设置,预览,首页设置
    来源:    发布时间: 2013-11-19
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title>IE打印页面设置 </title>
7 <style type="text/css" media="print">
8 .noprint{
9 display:none;
10 }
11
12 </style>
13 <script language="javascript" type="text/javascript">
14 function printsetup(){
15 // 打印页面设置
16 wb.execwb(8,1);
17 }
18 function printpreview(){
19 // 打印页面预览
20
21 wb.execwb(7,1);
22
23 }
24
25 function printit()
26 {
27 if (confirm('确定打印吗?')) {
28 wb.execwb(6,6)
29 }
30 }
31
32 //页面内要打印的内容加入中间<!--startprint1-->XXXXX<!--endprint1-->
33 function preview(oper)
34 {
35 if (oper < 10){
36 bdhtml=window.document.body.innerHTML;//获取当前页的html代码
37 sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
38 eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
39 prnhtml
    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3