效果预览图片： 大家可以下载demo看完整效果，下面介绍制作过程。 1.首先创建一个html页面，html结构如下： 代码如下:<div id="slider"> <div id="viewer"> <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" /> <img id="image2" src="img/atari.jpg" alt="Atari TT030" /> <img id="image3" src="img/commodore16.jpg" alt="Commodore 64" /> <img id="image4" src="img/commodore128.jpg" alt="Commodore 128...
jquery动画 有意思的地方见效果图： 思想： 将图片设置分割div的背景图片，控制div的属性，可以现实有趣的滤镜效果，本例中展示了一种，感兴趣的朋友可以尝试其他滤镜的实现。 本例其余动画部分，主要是利用jquery中提供animate和delay实现。 animate：这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性。 delay：设置一个延时来推迟执行队列中之后的项目。 实例效果： jquery ...
代码如下:<!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 src="http://demo.jb51.net/jslib/jquery/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#panel").css("opacity", "0.1");//设置透明度 $("#panel"...
代码如下:<%@ page contentType="text/html; charset=GBK" language="java"%> <%@ page import="com.jstrd.mm.business.sysmgr.monitor.logic.MMStock2BudgetLogic" %> <% String query = request.getParameter("query"); MMStock2BudgetLogic bean = new MMStock2BudgetLogic(); String xmldata = bean.statStock2Budget(); %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <META HTTP-EQUI...
图片的左右移动，动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (smer == 1) step++; else step--; } if (x >= xk) { x = xk; smer = -1; } if (x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
不过随着新版本的升级, 体积也慢慢变大了.24KB, Minified and Gzipped 155KB, Uncompressed Code压缩并gzip输出24K, 也不小了.如果页面上一个简单的效果,一个简单的动画就没必要载入这么大的库.看下面这个图片渐变效果, 其实纯js不到20行就可以搞定了.body {padding:0; margin:0;} #main {margin: 50px auto;border: 1px solid #ccc;width:700px} #main img {padding:0 20px; border:none; display:none}(function() {var imgs = d...
感应鼠标的图片遮罩动画效果 html, body, div,ul, li { margin: 0; padding: 0; } div.examples_body { width: 750px; margin: 0px auto; clear: both; overflow: hidden; } .bannerHolder { width: 726px; margin: 20px 0 15px 0; padding: 20px 10px 20px 10px; background-color: #f7f7f7; border: 1px solid #eee; overflow: hidden; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:...
因为要求是动态的，我就想到了应该是位置的变化，想到之前用过的JQuery，把里边的效果全试了试，最后选用了animate自定义，代码如下： 代码如下:<html> <head> <title>testAnimate</title> <script type="text/javascript"> function changeNum(n) { //n设为想要改成的数字 $(function () { $("counter").animate({ top: +=20px, opacity: 0 }, "slow", function () { //让数字向下移动并消失，top为元素距网页顶部距离，opacity为...
实现的功能:移动,暂停,恢复,停止. 未实现的功能:无法实现单位换算,不能实现颜色渐变(还有很多,有待完善...) 代码中的使用方法如下: 代码如下:var $m = $M("divAnimate"); _("btnAnimate").onclick = function(){ this.disabled = true; var that = this; $m.animate({left:"300px",top:"100px",width:"300px", height:"200px",opacity:0.3},{duration:5000,easing:Tween.Back.easeInOut}).delay(200) .animate({left:"50px",top:"...
设计图如下:1.xhml 代码如下:<div id="mometer"> <div id="hot"></div> <span> <div id="Hgheader">0℃</div> <div id="Hg"></div> </span> </div> <input name="aa" type="text" value="请输入0-100的数值" id="num"/> <input name="" type="button" id="Risk" value="查看度数" /> 2.css 代码如下:#num{color:#999;} #mometer{position:relative; height:100px;width:15px;background-color:#CCC;margin:50px;} span{position...
还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果， 下面就开始我们的代码编写吧 html是比较简单的 代码 代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TITLE>myjquerydirection</TITLE> <META http-equiv=content-type content="text/html; charset=gb2312"> <link rel="stylesheet" type="text/css" href="css/dirction.css"> <script langua...
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“...
js_打开层关闭层效果_脚本之家 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:block; color:#547BC9; float:left; text-decoration:none; margin-top:2px; } a.od:link{ background:#EEF1F8; } a.od:visited{ ...
DOM_text01 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:block; color:#547BC9; float:left; text-decoration:none; margin-top:2px; } a.od:link{ background:#EEF1F8; } a.od:visited{ background:#EEF1F8...
慢慢来，这次实现了向任意方向扩展！ 代码如下:<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #apDiv1 { position:absolute; left:300px...