- 浏览: 341011 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
1、效果及功能说明
广告图片制作各大商城首页顶部通栏广告图片,默认下滑动展开广告图片大图,之后滑动收起展开广告小图
2、实现原理
定义图片隐藏图片和显示图片的时间1.5秒,在图片右上角的按钮上定义一定点击效果让点击了按钮后实现隐藏效果并在完全隐藏后显示原来图片的缩小版 缩小版全部显示出来后显示出另外一个按钮就是重播 在重播按钮上在定义一个点击效果这个效果是显示图片的效果当点击后原来的小图片会隐藏大图片会显示然后重播按钮隐藏,关闭按钮重新显示出来
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
广告图片制作各大商城首页顶部通栏广告图片,默认下滑动展开广告图片大图,之后滑动收起展开广告小图
2、实现原理
定义图片隐藏图片和显示图片的时间1.5秒,在图片右上角的按钮上定义一定点击效果让点击了按钮后实现隐藏效果并在完全隐藏后显示原来图片的缩小版 缩小版全部显示出来后显示出另外一个按钮就是重播 在重播按钮上在定义一个点击效果这个效果是显示图片的效果当点击后原来的小图片会隐藏大图片会显示然后重播按钮隐藏,关闭按钮重新显示出来
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* advbox */ .advbox{width:990px;margin:0 auto;} .advbox .dt_small{width:990px;} .advbox .dt_big{width:990px;} .advbox .dt_toBig{position:absolute;left:50%;margin:5px 0px 0px 440px;width:49px;height:21px;background:url("images/public_showTL_1201.png");cursor:pointer;} .advbox .dt_toSmall{position:absolute;left:50%;margin:5px 0px 0px 440px;width:49px;height:21px;background:url("images/public_closeTL_1201.png");cursor:pointer;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <div class="advbox"> <div class="dt_small" style="display:none;"> <div class="dt_toBig" style="display:none;"></div> <a href="http://www.17sucai.com/" target="_blank"><img src="images/1325.jpg" width="990" height="60" alt="jquery广告图片缩略图" /></a> </div> <div class="dt_big"> <div class="dt_toSmall"></div> <a href="http://www.17sucai.com/" target="_blank"><img id="actionimg" src="images/sa11.jpg" width="990" height="500" alt="jquery广告图片大图" /></a> </div> </div> <script type="text/javascript"> function AdvClick(){ //定义方法 var a=1500; //点击关闭后的的小图显示出来的时间 $(".dt_toSmall").click(function(){ //定义关闭按钮的点击 $(".dt_small").delay(a).slideDown(a); //定义第二轮的点击关闭按钮以后显示出小图片和显示的时间 $(".dt_big").stop().slideUp(a); //定义第二轮点击关闭按钮大图片向下移动并消失 $(".dt_toBig").delay(a*2).fadeIn(0) //定义显示第二轮的在点击完关闭按钮以后显示出小图片后的小图片的坐上方的重播按钮的显示 }); $(".dt_toBig").click(function(){ //定义重播按钮的事件 $(".dt_big").delay(a).slideDown(a); //定义点击完第二轮的重播按钮让大图片显示出来的效果和时间 $(".dt_small").stop().slideUp(a); //定义点击完第一轮的重播按钮隐藏小图片 }) } </script> <script type="text/javascript"> $(document).ready(function(){ //函数规定当 ready 事件发生时执行的代码 AdvClick(); //实现AdvClick方法 }); </script> </body> </html>
发表评论
-
Zepto
2015-08-15 13:49 1233Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 768//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 579Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 531Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 877首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2737Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 710特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14752流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6262首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1378通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 693一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 912<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7671. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 749一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 540看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 867最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 638最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 434做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 699在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 768<object width="940&qu ...
相关推荐
在本主题中,“jquery图片广告横幅制作类似flash动画广告自定义横幅通栏”涉及的是利用jQuery来创建类似Adobe Flash的动态广告横幅,但无需依赖Flash技术。随着移动设备对Flash的支持逐渐减少,jQuery成为了创建此类...
"jquery通栏全屏广告代码下载.zip" 提供的是一套利用jQuery实现的全屏横幅广告解决方案。这个压缩包可能包含了HTML、CSS、JavaScript文件以及其他必要的资源,用于创建一个吸引用户注意力的视觉效果强烈的广告展示。...
在描述中提到的"jquery广告横幅插件"可能是指一个预封装的解决方案,它集成了常见的广告横幅功能,如轮播、过渡效果、自动播放等。使用这样的插件可以大大减少开发时间,提高效率。例如,我们可以使用`cycle2`或`...
【jQuery通栏Logo切换效果详解】 在网页设计中,吸引用户注意力并提升品牌形象的一个有效手段是采用动态的、富有创意的Logo展示。本资源提供的"jQuery通栏Logo切换效果"正是一款能实现这一目标的优秀代码示例。通过...
这个“Jquery全屏通栏带固定导航通栏广告的全屏单页广告代码”是一个典型的网页设计示例,利用jQuery实现了一种特殊的广告展示效果。以下是关于这个项目的详细知识点: 1. **全屏广告(Full-Screen Ad)**:全屏广告...
jQuery网站通栏广告代码是一种常见的网页交互元素,用于在网站上展示吸引人的动态广告或重要信息。这种代码利用了jQuery库的强大功能,为用户提供了视觉上的吸引力和良好的用户体验。jQuery是一个轻量级、高性能的...
Flexslider 是一个基于 jQuery 的流行滑块插件,它提供了高度可定制的选项,包括全屏、通栏的焦点图轮播效果。在本文中,我们将深入探讨如何使用 Flexslider 实现钱包应用中的自适应宽度全屏通栏广告轮播功能。 ...
QQ2013大气通栏广告jQuery.zip是一个包含前端开发资源的压缩包,主要用于创建具有视觉冲击力的全屏横幅广告。这个项目利用了JavaScript库jQuery,以及HTML5和CSS技术,为用户提供了一种现代且吸引人的广告展示方式。...
本篇文章将深入探讨通栏大banner轮播的设计原理、实现方式以及jQuery在其中的应用。 首先,通栏大banner轮播的设计目的是优化用户体验,它能够在一个有限的空间内展示多张图片或信息。通常,轮播由多个不同的图片或...
该资源是一个基于jQuery库开发的云层浮动背景动画效果,适用于创建引人入胜的通栏广告或网页背景。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。在这个源码中...
这款"网站通栏广告代码.zip"包含了一个具备左右箭头和底部切换按钮的jQuery焦点图实现,旨在为用户提供一种流畅且互动的浏览体验。 jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及...
根据给定的信息,本文将详细解释“淘宝左侧950通栏轮换代码”的相关知识点。这主要包括轮播图的基本概念、实现原理以及代码解析等内容。 ### 一、轮播图基本概念 轮播图(也称为幻灯片、轮播广告等),是一种常见...
标题中的“包含flash的通栏滚动banner的js广告代码.rar”指的是一个JavaScript(JS)代码压缩包,专门用于实现一种包含Flash元素的全屏滚动广告横幅(banner)。这种横幅通常出现在网站顶部,用于展示动态广告或者...
本项目“jQuery实现115网盘首页”便是利用jQuery构建的一个集登录、注册和通栏Banner广告于一体的网页应用。下面我们将详细探讨其中涉及的关键技术和实现方法。 首先,jQuery在页面加载完成后的DOMReady事件处理中...
淘宝首页通栏banner焦点图广告源码是一种常见的电商网站设计元素,用于吸引用户注意力并展示促销活动或新品推荐。在本案例中,我们有四个主要的文件夹和文件:`index.html`、`images`、`js`和`css`,它们分别代表了...
在网页设计中,底部悬浮通栏广告是一种常见的推广方式,它可以始终保持在用户视野范围内,提高广告的曝光率。然而,为了提供更好的用户体验,有时我们需要允许用户关闭这些广告位。下面我们将详细介绍如何实现这样一...
海螺主题首页广告代码: 这个代码建议放在【全站通栏横幅广告】 code <a href="https://www.qsgys.top"><img src=www.dkewl.com" width="100%" height="100"></a> <div class="ggimg"> 图片链接"> 图片...
标题中的“jQuery自适应全屏BANNER焦点图”是指一种基于jQuery库的网页设计技术,用于创建具有全屏展示效果的Banner(横幅)广告或幻灯片切换功能。这种焦点图通常会在网站的首页或者重要的展示区域使用,以吸引用户...