- 浏览: 231121 次
- 性别:
- 来自: 上海
最新评论
-
uchaoxi:
谢谢作者分享的经验,非常有用!
点击<a>标签,禁止页面自动跳到顶部的解决办法 -
独爱cyjs:
试下用rs.getObject()
有关ResultSet类中getLong方法自动将null转为0的解决方式 -
muyeandmuye:
呃,这里被抄袭了。http://www.myexception ...
CSS3实现红心动态变化效果 -
univasity:
非常不错,很全面。学习了。
javascript,php文件上传详解 -
lord_is_layuping:
...
有关ResultSet类中getLong方法自动将null转为0的解决方式
效果图:
source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> li {list-style:none} #picStore{display:none;} .avs#picShow,.avs#picShow img{width:755px;height:388px;} .avs{position:relative;overflow:hidden;margin:0px;} .avs dt{position:absolute;} .avs#picShow dt a{display:block;height:350px;width:760px;position:absolute;top:0px;z-index:5;line-height:417px;} .avs#picShow dt a img{width:760px;height:300px;border:hidden;} .avs dd{position:absolute;line-height:12px;height:23px;width:297px;bottom:0px;_bottom:-1px;} .avs dd div{float:left;width:35px;height:14px;background:#324C6D;border:#CBCCCE 1px solid;text-align:center;font:10px Arial;padding-top:2px;margin-left:5px;cursor:pointer;color:#fff;} .avs dd ul{float:left;width:200px;} .avs dd ul li{width:14px;height:13px;line-height:10px;font:10px Arial;color:#fff;text-align:center;cursor:pointer;background:#324C6D;float:left;margin-left:4px;padding-top:1px;margin-top:3px;} .avs dd ul li.show{background:#324C6D;width:17px;height:15px;margin-top:0px;padding-top:2px;border:#ccc 1px solid;font-size:12px;font-weight:bold;} .aves td{padding:0px 3px;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function slide_init(){ function pic_slide(source, target, time){ //取“stop”(“play”)标签 var beg=$("#"+target+" dd div")[0]; //时钟对象 var tm; //绑定主导航标签click事件 beg.onclick=function(){ if(beg.check){ beg.check=false; clearInterval(tm); beg.innerHTML="PLAY"; }else{ beg.check=true; clearInterval(tm); xunhuan(); init(); beg.innerHTML="STOP"; } }; //将标签置为选中 beg.check=true; //取所有图片链接 var pics=$("#"+source+" a"); //取所有图片对象 var bimgs=$("#"+source+" img"); //初始化图片index var now=1; //创建新图片对象 var vimg=new Image(); //初始化为图片库首个对象 vimg.src=bimgs[0].src; vimg.alt=bimgs[0].alt; //取图片显示区域的链接节点 var ba=$("#"+target+" dt a")[0]; ba.href=pics[0].href; ba.onfocus=function(){this.blur()}; //在dt中追加新建图片对象 var bt=$("#"+target+" dt")[0]; bt.appendChild(vimg); var curImg=$(bt).find("img")[1]; //取得图片导航控制区 var nav =$("#"+target+" dd ul")[0]; //根据图片数量生成导航项 var len=pics.length; for(var i=0;i<len;i++){ nav.innerHTML+="<li>"+(i+1)+"</li>"; } //初始化第一项为“show”样式 var nav_item=$(nav).children("li"); nav_item[0].className="show"; //定义导航项click绑定操作 function pfn(i){ nav_item[i].onclick=function(){ go(i); if(beg.check){ clearInterval(tm); init(); } else{ clearInterval(tm); } } }; //执行导航项绑定操作 for(var i=0;i<len;i++){ pfn(i); } //定义图片跳转操作 function go(n){ clearInterval(tm); now=n; xunhuan(); init(); }; function xunhuan(){ if(/*@cc_on!@*/false){ curImg.style.filter="progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,motion=forward)"; curImg.filters[0].Apply(); curImg.filters[0].Play(duration=1); } //更新当前图片链接及图片src ba.href=pics[now].href; curImg.src=bimgs[now].src; curImg.alt=bimgs[now].alt; //更新导航控制选择项 for(var i=0;i<len;i++){ nav_item[i].className=""; } nav_item[now].className="show"; //更新下次显示图片下标 (now<len-1)?now++:now=0; }; function init(){ tm=setInterval(xunhuan,time); }; init(); }; pic_slide("picStore","picShow",3000); } </script> </HEAD> <BODY> <div clickname="stickthread_5_data" id="picStore"> <a href="http://www.yoka.com/fashion/starwear/2010/pic1122202684.shtml"> <img alt="经典外套" src="http://img03.taobaocdn.com/tps/i3/T1SV0SXilCXXXXXXXX-770-300.jpg"/> </a> <a href="http://advlog10.yoka.com/ad-24315.html"> <img src="http://img.alimama.cn/bcrm/adboard/picture/2010-11-22/101122110857581.jpg"/> </a> <a href="http://www.yoka.com/star/starwear/2010/pic1122202390.shtml"> <img alt="黄奕街头范潮包加身" src="http://img03.taobaocdn.com/tps/i3/T1EHNSXfxXXXXXXXXX-770-300.jpg"/> </a> </div> <dl class="avs" id="picShow"> <dt> <a> <img src="http://images.yoka.com/pic/deco/2009/0318/a14.gif"/> </a> </dt> <dd> <div>STOP</div> <ul> </ul> </dd> </dl> <script type="text/javascript"> jQuery(document).ready(slide_init); </script> </BODY> </HTML>
注意:执行前,请下载JQuery.js文件,放于此html文件同目录下。
发表评论
-
一个让以各种类型元素为容器的“按钮”都文字居中的方法
2013-06-29 13:05 1333最近在做一个Button控件,这个控件不仅限于使用 ... -
JS类中能模拟出依赖对象本身的可变的私有属性吗?
2012-11-22 16:11 810JS是轻量级语言,在类的概念上没有如Java那样严格意义上私有 ... -
LESS —— 动态样式语言 学习纪要
2012-08-30 18:54 8968学习LESS源于一次分享的要求。之前一直没有使用,是因为使用这 ... -
CSS学习笔记
2012-07-09 22:35 1569使用CSS有些年头了,但是很惭愧从来没有系统的看过一本书,基本 ... -
阶段性总结。。。
2012-05-16 17:29 901自己的空间,不说废话 ... -
页面中包含大比率压缩图片会损耗内存
2011-12-25 23:58 1110最近做了一个类似美丽说的图片分享网站,测试时发现打开某个网页时 ... -
上传图片一直不变的问题 | IE的file无法手动置空
2011-11-19 04:15 1732今天在开发一个图片上传控件的时候,发现在IE8下上传一张 ... -
做一个资源加载进度条
2011-11-14 15:51 5083最近在开发一个工具类的网站,网站的背景和各模块的构建都需要加载 ... -
【Frontend Knowlodge Chart】 学习之安全相关
2011-10-20 19:54 1261安全相关 考查前端及 ... -
【Frontend Knowlodge Chart】 学习之HTTP协议
2011-10-20 19:53 1288HTTP协议 考查HTTP协议的认知程度和基本知识 ... -
【转】Frontend Knowlodge Chart
2011-10-17 16:21 1141转一个牛人总结的前端知识框架图 http://www ... -
我最近新学会的XXX
2011-09-01 18:28 1129最近忙上,忙下,忙里,忙外,活儿做了不少。这里有重复劳动 ... -
【转】Firefox下iframe的onload事件有可能无法触发 作者:zhanglili
2011-05-31 14:29 5652Firefox下,已经load的document,重新open ... -
避免function的循环引用
2011-05-26 16:44 890循环引用 window.onload = functi ... -
如何获取一个dom元素的绝对位置
2011-05-18 12:05 6036应用场景:鼠标滑过某元素时,需要弹出一个信息标签,标签的 ... -
关于CSS Selector的优先级
2011-05-16 15:27 1591用CSS这么些年,从来没从算法级别考虑过它的优先级原理,只是凭 ... -
javascript,php文件上传详解
2011-04-29 19:20 3980今儿说点儿基础但是蛮重要的前端技术——使用file ... -
IE6下left绝对定位诡异错误
2011-04-29 01:44 1780今天开发自己的一个小网站时出现一个诡异的错误:目标 ... -
推荐个学WEBGL的网站
2011-04-12 17:59 840http://learningwebgl.com/blog/? ... -
【转】浅谈跨域WEB攻击
2011-04-08 17:54 994转自http://www.80sec.com/cros ...
相关推荐
【jQuery实现图片幻灯片特效】是一种常见的网页动态效果,用于展示一组图片并自动轮换,为用户带来更丰富的视觉体验。在这个项目中,我们利用jQuery库的强大功能,结合HTML、CSS和JavaScript技术来创建一个自定义的...
有Loading功能的Flash焦点图 开源flash+xml相册组件 7屏大banner广告代码 带缩略图上下滚动幻灯片 腾讯软件中心JS焦点图代码 淘宝商城多格jQuery焦点图 大麦网jquery焦点图代码
在网页设计中,jQuery图片幻灯片是一种常见且实用的元素,它能够为网站增添动态效果,提升用户体验。jQuery库的轻量级和强大的API使其成为实现这种功能的理想选择。本篇文章将深入探讨jQuery图片幻灯片的工作原理、...
本文将深入探讨如何使用名为"kevinSlide"的jQuery插件来实现图片幻灯片功能。 首先,kevinSlide插件是专为创建动态、引人入胜的图片滑动展示而设计的。这种类型的组件常用于网站的首页或产品展示区域,以吸引用户...
在本篇文章中,我们将深入探讨如何使用jQuery实现图片幻灯片展示,并涉及其自动播放和鼠标悬停切换图片的功能。 首先,我们需要理解jQuery的基本用法。jQuery是一个轻量级、高性能的JavaScript库,简化了HTML文档...
标题中的“jQuery实现的幻灯片效果焦点图”是指使用jQuery库来创建一种动态展示图片或内容的交互式用户界面元素,通常称为“幻灯片”或“焦点图”。这种效果允许用户通过自动轮播或者手动点击导航点来浏览一组图片或...
在网页设计中,jQuery 图片轮播幻灯片效果是一种常见的功能,用于展示一组图片或内容,通过动态的左右滚动来吸引用户注意力并提供良好的用户体验。这个效果的实现基于 jQuery JavaScript 库,它简化了 DOM 操作、...
标题中的“jquery实现png透明幻灯片效果”指的是利用JavaScript库jQuery来创建一个具有PNG图片透明过渡效果的幻灯片展示。在网页设计中,幻灯片效果是一种常见的动态展示内容的方式,它允许用户在不手动翻页的情况下...
"jQuery途牛首页定时幻灯片轮播效果"是一个典型的利用JavaScript库jQuery实现的动态展示功能,主要目标是模拟实际生活中幻灯片的切换,让用户在浏览网页时能享受到平滑、自动的图片或内容滚动体验。 首先,jQuery是...
"jQuery图片叠加幻灯片"是一种常见的网页动态效果,它利用JavaScript库jQuery实现图片的动态切换,通过叠加的方式呈现出平滑的过渡效果,为网站增添互动性和吸引力。本文将深入探讨这一技术的实现原理和应用。 首先...
"jQuery 3D幻灯片效果免费下载"是为开发者提供的一种利用jQuery实现的3D视觉体验的幻灯片插件。这个压缩包包含了用于创建独特、引人入胜的3D旋转幻灯片展示所需的所有资源。 首先,jQuery 3D幻灯片效果是一种高级的...
**jQuery图片轮播幻灯片效果详解** 在网页设计中,图片轮播幻灯片是一种常见且实用的元素,能够吸引用户注意力并展示多张图片或内容。本教程将深入探讨如何利用jQuery实现一个兼容IE8以上及火狐、360等主流浏览器的...
"Modernizr HTML5 jQuery 3D图片翻转幻灯片效果下载"是一个利用这些技术创建的资源,旨在帮助开发者实现动态且引人注目的图像展示功能。在本文中,我们将深入探讨Modernizr、HTML5和jQuery这三个关键组件,以及它们...
总结,腾讯的jQuery图片幻灯片效果代码充分利用了jQuery的强大功能,提供了易于使用的幻灯片组件。通过理解并应用这些知识点,开发者可以轻松地在自己的项目中实现类似的动态图片展示效果,提升网站或应用的用户体验...
其次,幻灯片效果通常涉及到定时器和计数器,用于自动播放图片。可以设置一个定时器,每隔一段时间自动更换下一张图片。同时,为了提供用户控制,可以添加前后翻页按钮,使用`next`和`prev`方法来切换图片。 对话框...
这个技术利用了JavaScript库jQuery的强大功能,结合CSS样式和HTML结构,实现了图片在不同屏幕尺寸下自动调整宽度的幻灯片效果。以下是对这一技术的详细解释: 1. jQuery库:jQuery是一个轻量级的JavaScript库,它...
【jQuery百叶窗幻灯片】是一种常见的网页动态展示技术,它通过利用jQuery库和jQuery UI组件,为用户提供了一种独特且吸引人的图片或内容切换方式。这种效果模拟了百叶窗开启的过程,使得内容在切换时呈现出一种渐进...
标题中的“jquery实现banner效果图切换幻灯片效果”是指使用jQuery库来创建一个网页上的轮播图(也称为焦点图)功能。这个功能通常用于网站的首页,展示多个广告、图片或信息,以吸引用户的注意力并提供交互体验。...
**jQuery 实现的功能最强大的幻灯片相册** 在网页设计中,动态的幻灯片相册已经成为一种不可或缺的元素,它能够以吸引人的形式展示大量图片或内容,提升用户体验。jQuery,作为一款广泛使用的JavaScript库,凭借其...
在网页设计中,图片幻灯片是一种常见的交互元素,它能以动态的方式展示多张图片,为用户带来更丰富的视觉体验。"jQuery图片幻灯片切换...在实际项目中,可以根据需求进行定制,打造更加独特和吸引人的图片幻灯片效果。