- 浏览: 440033 次
- 性别:
- 来自: 苏州
文章分类
最新评论
-
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 15336文章搬至CSDN, 最新内容请访问: http://blo ... -
用HTML5canvas绘制一个圆环形的进度表示
2013-08-02 10:05 21633文章搬至CSDN, 最新内 ... -
Javascript面向对象之:一.创建类
2012-05-09 16:53 1058Javascript语言到目前为止,本身并没有提供类似于cla ... -
知识点整理之Java的Cookie操作
2012-05-07 10:17 3450创建Cookie // new一个Cookie对象,键值对为 ... -
基于Tomcat的WebSocket(5月8日更新)
2012-04-17 17:05 598582014年2月更新: 此API为Tomcat私有,当时Ja ... -
表格表头固定,内容多时滚动内容(2)[改进版]
2011-12-31 15:52 2513之前写过一个,把表头的固定,内容多时滚动内容:http://r ... -
HTML5 WebSocket做聊天室(服务器端基于Jetty8)
2011-12-13 08:33 26966早就厌倦了Ajax轮询,一直想试试Web Socket.这次终 ... -
引入CSS 的两种方式:link和@import的区别[转]
2011-09-20 09:43 1373引入css 外部文件的两种方法为在html页面通过link ... -
纯JS网页上的动态折线图
2011-07-03 23:05 7794用Javascript写了一个网页 ... -
JS画线,虽然很原始,但是兼容所有浏览器
2011-06-29 10:31 14795用Javascript画线的方法很多,有SVG,VML、can ... -
表格表头固定,内容多时滚动内容
2011-04-20 22:13 14105不多写废话了,都在代码注释中 <html> ... -
JQuery选择器总结(3)
2011-03-27 22:13 0继续筛选,过滤选择器 过滤选择器 (1) :head 标 ... -
JQuery选择器总结(2) 基础过滤选择器
2011-03-06 17:12 4625上一次总结了JQuery的一些基础选择器(http://red ... -
JQuery选择器总结(1)基础篇
2011-02-25 23:29 9152一个优秀的Javascript库必定要有一个强大的选择器,强大 ... -
CSS3圆角,阴影,透明
2011-02-15 21:35 22651CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用 ... -
JQuery的Ajax学习(2)
2011-01-01 23:42 3737上一次主要学习了JQuery的Ajax的几个上层方法(http ... -
JQuery的Ajax学习(1)
2010-12-28 22:06 4580Jquery提供了Ajax的前端封 ... -
HTML实体字符
2010-12-09 08:42 1176显示结果 描述 实体名称 实体编号 ... -
AJAX处理以XML返回的响应
2010-12-03 16:40 5192Ajax请求,服务器端返回XML形式的数据,在页面上用Java ... -
谷歌字体(Google Font)初探 [翻译自Google官方文档]
2010-12-02 22:24 5222这个指南解释了如何使用Google Font的API,把网络字 ...
相关推荐
jQuery鼠标经过图片背景滑动切换效果基于jquery1.10.2.js实现,鼠标经过图片滑动切换背景动态效果。
jQuery实现按钮滑动切换
jQuery列表图片控制图片滑动切换代码 jQuery列表图片控制图片滑动切换代码
jQuery左侧图片右侧文字滑动切换代码是一款基于jQuery实现的列表图片控制图片滑动切换代码。
基于JQuery的Banner大图片横向切换效果
基于JQuery的Banner大图片横向切换效果,jquery.cycle.all.min这个插件
jquery鼠标悬停文字滑动切换效果代码 码
基于JQuery的大图片横向切换效果,自动切换,可以左右设置切换方式。
jquery宽屏图片滑动切换效果代码是一款基于jquery实现的banner多个div容器宽屏图片滑动切换效果代码。
jQuery选项卡标签滑动切换效果
jQuery点击右侧按钮图片滑动切换代码
jQuery鼠标经过图片背景滑动切换效果 jQuery鼠标经过图片背景滑动切换效果
【Jquery经典特效26】jQuery动画背景滑动切换效果
jquery banner图片动画切换_图片左右滑动切换轮播代码
94、jQuery左右滑动切换图片代码
jQuery图片重叠滑动切换效果代码是一款5张图片重叠切换效果代码。
jQuery带遮罩高亮图片滑动切换代码是一款带遮罩高亮效果的旋转木马图片切换特效。
【Jquery经典特效16】jQuery鼠标经过图片背景滑动切换效果
jQuery仿腾讯视频图片滑动门切换效果
jQuery+HTML5页面整屏滑动切换代码.zip