- 浏览: 443878 次
- 性别:
- 来自: 苏州
文章分类
最新评论
-
cbo365:
叁陆伍视讯公司的网络摄像机支持RTMP协议,可自定义流媒体服务 ...
nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器 -
藏在心底:
用HTML5canvas绘制一个圆环形的进度表示 -
mdqy195905:
Java 代码:
package com.wing;
imp ...
JSR356标准Java WebSocket -
redstarofsleep:
dwangel 写道好像可以直接用 apt-get insta ...
ubuntu14.04安装ffmpeg -
dwangel:
好像可以直接用 apt-get install吧
ubuntu14.04安装ffmpeg
CSS代码:
回帖的问的比较多,解释一下,CSS中的两个Width,*width是针对IE的,因为IE的width是包括边框border的,而其它浏览器是不包括的,所以IE的width比其它的多2个像素.
.main { width:400px;height:300px;border:0px solid #0F0F0F;overflow:hidden; } .parent { height:300px;width:1600px;position:relative; } .sub { width:398px; *width:400px; height:298px;border:1px solid #00FFFF;float:left; }
Javascript代码:
function slideleft() { $('#parent>div:first').animate({width:'0px'},2000,callback); } function callback() { $('#parent>div:last').after($('#parent>div:first')); $('#parent>div:last').css('width', '398px'); }
HTML代码:
<div class="main"> <div id="parent" class="parent"> <div id="sub1" class="sub" style="background:#00FF00;"></div> <div id="sub2" class="sub" style="background:#0000FF;"></div> <div id="sub3" class="sub" style="background:#00FFFF;"></div> <div id="sub3" class="sub" style="background:#FF0000;"></div> </div> </div> <input type="button" onclick="slideleft();" value="slide"></input>
评论
22 楼
redstarofsleep
2011-04-26
hjiuokpl1314 写道
貌似IE7下有问题
厄...我试过IE6和IE8
IE7下有问题吗?哪里不对
21 楼
hjiuokpl1314
2011-04-26
貌似IE7下有问题
20 楼
georgezeng
2011-04-25
redstarofsleep 写道
georgezeng 写道
redstarofsleep 写道
georgezeng 写道
JQuery 本身就提供了slide左右的代码,就一句话啊。。。
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
这个direction 是指什么?
direction指的是滑动的方向
我试了,不行啊.....
除了JQuery核心库,是不是还要导什么JS?
官方文档上也没有找到找到这种用法啊
sorry,我忘记说了,这个是需要使用ui的js的,以下是例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script src="jquery-1.4.4.min.js"></script> <script src="jquery-ui-1.8.9.min.js"></script> </HEAD> <BODY> <div id="test" style="width: 500px; background-color: red; height: 500px;"></div> <script> $("#test").show( "slide", { direction: "left" } ); </script> </BODY> </HTML>
19 楼
redstarofsleep
2011-04-24
georgezeng 写道
redstarofsleep 写道
georgezeng 写道
JQuery 本身就提供了slide左右的代码,就一句话啊。。。
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
这个direction 是指什么?
direction指的是滑动的方向
我试了,不行啊.....
除了JQuery核心库,是不是还要导什么JS?
官方文档上也没有找到找到这种用法啊
18 楼
georgezeng
2011-04-24
redstarofsleep 写道
georgezeng 写道
JQuery 本身就提供了slide左右的代码,就一句话啊。。。
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
这个direction 是指什么?
direction指的是滑动的方向
17 楼
redstarofsleep
2011-04-23
georgezeng 写道
JQuery 本身就提供了slide左右的代码,就一句话啊。。。
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
这个direction 是指什么?
16 楼
georgezeng
2011-04-22
JQuery 本身就提供了slide左右的代码,就一句话啊。。。
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
$(node).show("slide", {
direction : "left" // "right", "up", "down"
}, 1000); // specific the animation time
see, so easy.....
15 楼
redstarofsleep
2011-04-10
yuqihui 写道
firefox 下不成啊
不可能啊,我在FireFox和IE8下都试过..
14 楼
yuqihui
2011-04-09
firefox 下不成啊
13 楼
hejinxiqq
2011-04-08
redstarofsleep 写道
stoneskin 写道
css 里的 *width:400px;
那个 "*"有什么忒别作用吗?
那个 "*"有什么忒别作用吗?
这个是针对IE的
IE里width包括了边线,其它浏览器是不包括边线的,所以IE的Width要多2个像素.
做出自动的也是很简单的啊
12 楼
redstarofsleep
2011-04-07
stoneskin 写道
css 里的 *width:400px;
那个 "*"有什么忒别作用吗?
那个 "*"有什么忒别作用吗?
这个是针对IE的
IE里width包括了边线,其它浏览器是不包括边线的,所以IE的Width要多2个像素.
11 楼
redstarofsleep
2011-04-07
happy175 写道
这是做成可自动切换的就好了
自动切换简单啊,setInterval里调slideleft就可以了啊
10 楼
yangguo
2011-04-07
思路很好啊,厉害!
9 楼
happy175
2011-04-07
这是做成可自动切换的就好了
8 楼
kill_all
2011-04-07
<div class="quote_title">redstarofsleep 写道</div>
<div class="quote_div">
<p>CSS代码:</p>
<pre name="code" class="CSS">.main {
width:400px;height:300px;border:0px solid #0F0F0F;overflow:hidden;
}
.parent {
height:300px;width:1600px;position:relative;
}
.sub {
width:398px;
*width:400px;
height:298px;border:1px solid #00FFFF;float:left;
}</pre>
<p> Javascript代码:</p>
<pre name="code" class="js">function slideleft() {
$('#parent>div:first').animate({width:'0px'},2000,callback);
}
function callback() {
$('#parent>div:last').after($('#parent>div:first'));
$('#parent>div:last').css('width', '398px');
}</pre>
<p> HTML代码:</p>
<pre name="code" class="html"> <div class="main">
<div id="parent" class="parent">
<div id="sub1" class="sub" style="background:#00FF00;"></div>
<div id="sub2" class="sub" style="background:#0000FF;"></div>
<div id="sub3" class="sub" style="background:#00FFFF;"></div>
<div id="sub3" class="sub" style="background:#FF0000;"></div>
</div>
</div>
<input type="button" onclick="slideleft();" value="slide"></input></pre>
</div>
<p> </p>
<div class="quote_div">
<p>CSS代码:</p>
<pre name="code" class="CSS">.main {
width:400px;height:300px;border:0px solid #0F0F0F;overflow:hidden;
}
.parent {
height:300px;width:1600px;position:relative;
}
.sub {
width:398px;
*width:400px;
height:298px;border:1px solid #00FFFF;float:left;
}</pre>
<p> Javascript代码:</p>
<pre name="code" class="js">function slideleft() {
$('#parent>div:first').animate({width:'0px'},2000,callback);
}
function callback() {
$('#parent>div:last').after($('#parent>div:first'));
$('#parent>div:last').css('width', '398px');
}</pre>
<p> HTML代码:</p>
<pre name="code" class="html"> <div class="main">
<div id="parent" class="parent">
<div id="sub1" class="sub" style="background:#00FF00;"></div>
<div id="sub2" class="sub" style="background:#0000FF;"></div>
<div id="sub3" class="sub" style="background:#00FFFF;"></div>
<div id="sub3" class="sub" style="background:#FF0000;"></div>
</div>
</div>
<input type="button" onclick="slideleft();" value="slide"></input></pre>
</div>
<p> </p>
7 楼
redalx
2011-04-07
IE6下是不正确的
6 楼
taogejava
2011-04-07
很好!那个*是什么意思?
5 楼
huangheyuan1229
2011-04-07
hack手法
4 楼
287854442
2011-04-07
287854442 写道
stoneskin 写道
css 里的 *width:400px;
那个 "*"有什么忒别作用吗?
那个 "*"有什么忒别作用吗?
同感,楼主解释一下*width是什么意思?
网上搜索了一下,只有ie浏览器才能识别*号,应该是针对ie的hack。
3 楼
287854442
2011-04-07
stoneskin 写道
css 里的 *width:400px;
那个 "*"有什么忒别作用吗?
那个 "*"有什么忒别作用吗?
同感,楼主解释一下*width是什么意思?
发表评论
-
JSR356标准Java WebSocket
2013-11-14 11:16 15439文章搬至CSDN, 最新内容请访问: http://blo ... -
用HTML5canvas绘制一个圆环形的进度表示
2013-08-02 10:05 21731文章搬至CSDN, 最新内 ... -
Javascript面向对象之:一.创建类
2012-05-09 16:53 1117Javascript语言到目前为止,本身并没有提供类似于cla ... -
知识点整理之Java的Cookie操作
2012-05-07 10:17 3511创建Cookie // new一个Cookie对象,键值对为 ... -
基于Tomcat的WebSocket(5月8日更新)
2012-04-17 17:05 600372014年2月更新: 此API为Tomcat私有,当时Ja ... -
表格表头固定,内容多时滚动内容(2)[改进版]
2011-12-31 15:52 2572之前写过一个,把表头的固定,内容多时滚动内容:http://r ... -
HTML5 WebSocket做聊天室(服务器端基于Jetty8)
2011-12-13 08:33 27132早就厌倦了Ajax轮询,一直想试试Web Socket.这次终 ... -
引入CSS 的两种方式:link和@import的区别[转]
2011-09-20 09:43 1425引入css 外部文件的两种方法为在html页面通过link ... -
纯JS网页上的动态折线图
2011-07-03 23:05 7868用Javascript写了一个网页 ... -
JS画线,虽然很原始,但是兼容所有浏览器
2011-06-29 10:31 14890用Javascript画线的方法很多,有SVG,VML、can ... -
表格表头固定,内容多时滚动内容
2011-04-20 22:13 14175不多写废话了,都在代码注释中 <html> ... -
JQuery选择器总结(3)
2011-03-27 22:13 0继续筛选,过滤选择器 过滤选择器 (1) :head 标 ... -
JQuery选择器总结(2) 基础过滤选择器
2011-03-06 17:12 4699上一次总结了JQuery的一些基础选择器(http://red ... -
JQuery选择器总结(1)基础篇
2011-02-25 23:29 9219一个优秀的Javascript库必定要有一个强大的选择器,强大 ... -
CSS3圆角,阴影,透明
2011-02-15 21:35 22723CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用 ... -
JQuery的Ajax学习(2)
2011-01-01 23:42 3790上一次主要学习了JQuery的Ajax的几个上层方法(http ... -
JQuery的Ajax学习(1)
2010-12-28 22:06 4644Jquery提供了Ajax的前端封 ... -
HTML实体字符
2010-12-09 08:42 1220显示结果 描述 实体名称 实体编号 ... -
AJAX处理以XML返回的响应
2010-12-03 16:40 5253Ajax请求,服务器端返回XML形式的数据,在页面上用Java ... -
谷歌字体(Google Font)初探 [翻译自Google官方文档]
2010-12-02 22:24 5283这个指南解释了如何使用Google Font的API,把网络字 ...
相关推荐
总的来说,jQuery鼠标经过图片背景滑动切换效果是一个结合了jQuery事件处理和CSS3过渡效果的实用技巧。它不仅可以增强网页的视觉体验,而且代码实现也相对简单,适合初学者学习和实践。通过熟练掌握这些基础知识,...
在本文中,我们将深入探讨如何使用jQuery库来实现按钮的滑动切换效果。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务,使得开发者能够更高效地创建交互式的网页应用。 ...
综上所述,基于JQuery的Banner大图片横向切换效果涉及到的选择、操作、动画、事件处理和响应式设计等多个方面,是Web前端开发中一个典型的实践案例,有助于提升网页的互动性和美观度。通过学习和实践这个案例,...
在本项目中,"jQuery左侧图片右侧文字滑动切换代码.zip" 提供了一个实用的JavaScript效果,用于创建一种交互式的图片展示方式。这种效果常见于网站的相册或产品展示部分,可以提升用户体验,使内容更生动吸引人。...
通过以上介绍,我们可以看出"jquery层叠图片横向平滑移动轮播切换效果"是一个结合了jQuery动画技术、用户交互和页面响应性的高级网页设计实践。这个项目的源代码(texiao7896_1560681074)包含了实现这一功能的具体...
在本文中,我们将深入探讨如何使用jQuery实现列表图片的滑动切换效果,这是一种常见的网页动态交互功能,可以提升用户体验,使网站更具吸引力。jQuery库以其简洁的API和强大的功能,使得这种效果的实现变得相对简单...
【标题】"94、jQuery左右滑动切换图片代码"涉及到的是使用JavaScript库jQuery实现的一种交互效果,即图片轮播或幻灯片展示。在网页设计中,这种功能经常用于展示一组图片,允许用户通过左右滑动来切换不同的图片。...
这种效果通常是通过JQuery库,一个轻量级、高性能的JavaScript库,来实现图片的无缝滑动和自动切换,同时提供用户交互功能,如手动左右切换。 JQuery 提供了丰富的DOM操作、事件处理和动画效果,使得开发者可以轻松...
总的来说,这个代码示例展示了如何结合HTML、CSS和jQuery实现一个基本的图片滑动切换功能。通过学习和理解这段代码,开发者可以进一步扩展其功能,如增加自动轮播、添加指示器、支持触屏滑动等,从而为网站或应用...
JQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,而`jquery.cycle.all.min.js`插件是jQuery的一个扩展,专门用于实现各种类型的轮播(Banner)切换效果。本文将深入探讨如何利用...
"jQuery带遮罩高亮图片滑动切换代码"就是一种实现这种效果的技术,它巧妙地结合了jQuery库与CSS3动画,为用户呈现出一个具有遮罩高亮效果的图片轮播组件。本文将深入探讨这一技术的实现原理和关键代码,帮助读者理解...
这个"jQuery+HTML5页面整屏滑动切换代码"的压缩包提供了一个实现这种效果的示例。以下是关于这个主题的核心知识点: 1. **jQuery**:jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、...
总的来说,“jQuery横向动态滑动导航菜单插件”是一个强大且灵活的工具,能够帮助开发者创建引人入胜的网页导航体验。通过理解和应用这个插件,你可以提升网站的专业性,同时增强用户与网站的互动。无论你是新手还是...
本项目“jQuery选项卡标签滑动切换效果”旨在实现一个常见的用户界面功能,即选项卡式导航,其中各个标签页内容可以平滑地进行滑动切换。这种效果能提升用户体验,使得大量信息组织得更加有序且易于浏览。 首先,...
【jQuery经典特效26】:jQuery动画背景滑动切换效果是一...文件列表中的`Jquery特效资源分享.txt`可能包含更多相关资源和代码示例,而`201`可能是另一个相关文件,如CSS或JavaScript文件,用于实现这个特效的具体细节。
本教程将深入探讨如何使用jQuery实现一个带箭头的图片滑动切换代码,帮助开发者创建出具有左右箭头和索引按钮切换功能的幻灯片特效。 首先,我们需要理解jQuery的基本结构和核心概念。jQuery是一个轻量级的...
在本项目中,"jQuery+css3手机触屏滑动切换图片列表代码"是一个利用jQuery和CSS3技术实现的响应式图像展示方案,特别适用于移动设备。以下是该项目涉及的主要知识点和详细说明: 1. **jQuery**:jQuery是一个快速、...
总的来说,这个"jquery横向平滑移动轮播切换效果"涵盖了jQuery动画、CSS定位、事件监听、浏览器兼容性等多个方面的知识点,是学习网页动态效果和交互设计的一个很好的实践案例。通过研究这个项目,开发者可以提升...
5. 动画优化:为了提供更好的用户体验,可以使用jQuery的动画函数`animate()`来平滑地过渡到下一个图片,而不是立即改变图片的位置。此外,还可以添加箭头按钮来手动切换图片,或者自动播放功能。 四、进一步优化 1...
总的来说,“jquery宽屏图片滑动切换效果代码”是一个实用的网页组件,它结合了jQuery的便捷性和CSS3的动画效果,提供了美观且响应式的图片切换体验。对于网页设计师和开发者来说,理解和应用此类代码可以帮助他们...