jquery仿,jquery仿百度搜索

通过JQuery实现win8一样酷炫的动态磁贴效果

相信大家喜欢这个界面无非也是喜欢它的动态磁贴。刚好今天研究了一下如何通过JQuery在网页上模仿这种效果,就贴出来给大家喷一下。虽然是一些很低级的技术,但是也希望有需要的朋友可以参考下

创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于做网站、成都网站设计、琅琊网络推广、微信小程序、琅琊网络营销、琅琊企业策划、琅琊品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供琅琊建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

我个人表示非常喜欢微软新一代的产品,先不管它产品的成熟与否,但是它带来的是全新的产品。所谓全新,是指在用户体验上,苹果这些年的成功使得所有

产品都在模仿它的界面,包括安卓在内,不知道大家的感觉如何,反正我是对这些圆角矩形产生了审美疲劳(苹果以及安卓的粉丝勿喷,这里仅仅是从界面上评价,

事实上从整体上来说,微软还是有差距的),当年wp的推出让我眼前一亮,马上喜欢上了Metro风格的产品,直至今天wp8以及win8开始越来越成熟。

写的不好,欢迎各位看官指正批评,不欢迎无故猛喷。大神请绕道。

废话少说,进入正题。基本思想是:定

义一个外层div,固定高度(例如本例中的180px)并设置属性overflow:hidden(隐藏超出边框的部分),然后在这个div里面定义一个

内层div,并设置属性position:relative(采用相对布局)。在这个内层div里面,我们定义一张图片,注意要设置它的高度跟外层div

高度一样(如本例中的180px),再定义一个div放文字,该div的高度也和外层div高度一样(如本例中的180px,如果你给了一个

padding,则高度相应减小,以达到整个div是180px的高度)。布局代码如下所示

html:

复制代码

代码如下:

div

id="outside"

div

id="inside"

img

width="180px"

height="180px"

src="图片地址"

/

div

id="text"

span通过JQuery实现win8一样酷炫的动态磁贴效果/span

p林宇/p

p我个人表示非常喜欢微软新一代的产品……/p

/div

/div

/div

css:

复制代码

代码如下:

#outside

{

height:180px;

overflow:hidden;

}

#inside

{

position:relative;

}

#text

{

width:160px;

height:160px;

background:#0000ff;

padding:10px;

color:#fff;

}

剩下来的就是JQuery的事情了。首先先理解一下这个“动态磁贴”的动作:一开始显示一张图片,然后向上滑动显示文字,停留一会,再向下滑动显示图片,如此循环。我们先定义一个函数:

复制代码

代码如下:

function

go(id,

d1,

px1,

val1,

d2,

px2,

val2)

{

$(id).delay(d1);

$(id).animate({

bottom:

px1

},

val1,

function

()

{

$(id).delay(d2);

$(id).animate({

bottom:

px2

},

val2);

});

}

里有7个参数,id是内层div也就是要滑动的div的id,d1是内层div滑上去以后停留的时间,px1是内层div要向上滑动的相对位置,默认当前

位置为0px,val1是内层div的完成向上滑动动作所需要的时间,d2是向下滑动div后停留的时间,px2是向下滑动的相对位置,这里依然是以原来

的位置为0px,val2是完成向下滑动所需的时间。

然后我们在页面加载完成的时候设置一个定时器,来执行我们定义的go函数:

复制代码

代码如下:

$(function

()

{

timer1

=

setInterval(function

()

{

go("#inside",

1500,

"180px",

1200,

1000,

"0px",

2000);

},

3000);

});

这里的参数可以根据需要进行修改,这里我们让定时器每3秒执行一次go函数。

源码基本都贴出来了,有需要源文件的童鞋可以猛击这里下载。

jquery仿淘宝网拖动滑块验证码 怎么用

滑块验证选中最左边,鼠标放着不要放,一直往右拉到底 就会显示验证通过了的。

jQuery点击改变Class,仿刷新

选择的时候给li后面的a的href加一个参数,进来的时候获取参数的值来赋值

jQuery("#demo li").click(function () {

jQuery(this).addClass("on").siblings().removeClass("on");

var selectId = $(this).index();

$("a", jQuery(this)).attr("href", "a" + "?selectId=" + selectId);

});

function RequestByName(ParameterName) {

var Url = window.location.href;

var IndexOfString = "?";

var LastIndex = Url.lastIndexOf(IndexOfString);

if (LastIndex -1) {

var ParametersString = Url.substring(LastIndex + IndexOfString.length).replace(/(^\s*)|(\s*$)/g, "");

var ParameterS = ParametersString.split('');

for (var i = 0; i ParameterS.length; i++) {

var Parameter = ParameterS[i].split('=');

if (Parameter[0] == ParameterName) {

ParameterValue = decodeURIComponent(Parameter[1]);

return ParameterValue;

};

};

};

};

var selectId = RequestByName("selectId");

if (selectId != undefined) {

jQuery("#demo li").eq(parseInt(selectId)).click();

};

JQUERY仿百度网盘的鼠标经过弹出事件代码

!DOCTYPE HTML

html

head

meta charset=UTF-8 /

titleNothing/title

style type="text/css"

.bbb {

height: 37px;

width: 37px;

margin-left: 255px;

}

.ccc {

height: 200px;

width: 200px;

margin-left: 109px;

display: none;

}

/style

script type="text/javascript" src="jquery-1.4.2.js"/script

script

$ (function ()

{

$ ('div.bbb').hover (function ()

{

$('div.ccc').toggle();    

});

})

/script

/head

body

div class="bbb"

img src="bbb.jpg" /

/div

div class="ccc"

img src="ccc.png" /

/div

/body

/html

jQuery仿confirm遇到的问题

modal()本身就是显示个对话框而已,任何js都无法模拟出真正的模态对话框的效果,你这个地方还是用异步实现吧

// 提示对话框

function modal(func) {

var modal = $("#modal");

modal.fadeIn(); // 显示对话框

modal.find('button[value="ok"]').click(function() { // 选择 OK

modal.fadeOut();

func();

});

// ---------------------------------------------------------------------------

modal.find('button[value="cancel"]').click(function() { // 选择 取消

modal.fadeOut();

});

}

// 点击网页的删除时调用modal((函数

$('#dialog-add').find('button[value="del"]').click(function() {

modal(function(){$('form').submit();});

});

这样试试


当前标题:jquery仿,jquery仿百度搜索
分享URL:http://pwwzsj.com/article/dsdojpo.html