鼠标滑过显示在线客服

精选转载

chunzhisu 2014-08-28 10:40:50

文章标签 在线客服潜水 scroll repeat 排污泵 文章分类 jQuery 前端开发

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>潜水自动搅匀排污泵</title>

<style>

*{ margin:0; padding:0;}

.newkefu {

BORDER-BOTTOM: #ccc 0px solid;

BORDER-LEFT: #ccc 0px solid;

BACKGROUND: none transparent scroll repeat 0% 0%;

BORDER-TOP: #ccc 0px solid;

BORDER-RIGHT: #ccc 0px solid

}

#newkefu_right {

POSITION: absolute;

MARGIN: 10px;

WIDTH: 176px;

HEIGHT: auto;

OVERFLOW: hidden;

TOP: 80px;

RIGHT: 3px

}

* {

PADDING-BOTTOM: 0px;

PADDING-LEFT: 0px;

PADDING-RIGHT: 0px;

PADDING-TOP: 0px

}

.kefu {

POSITION: fixed;

TEXT-ALIGN: center;

WIDTH: 176px;

OVERFLOW: hidden;

TOP: 80px;

RIGHT: 3px

}

.newkefu_bar {

FLOAT: right;

MARGIN-LEFT: 1px;

CURSOR: pointer

}

.newkefu_group {

TEXT-ALIGN: center;

WIDTH: 140px;

FLOAT: right;

HEIGHT: auto;

OVERFLOW: hidden

}

.newkefu_group .shouqian_mid {

PADDING-BOTTOM: 5px;

BACKGROUND: url(/p_w_picpaths/kefu-middle.png) repeat-y;

HEIGHT: auto;

OVERFLOW: hidden;

PADDING-TOP: 5px

}

.newkefu_group .shouqian_mid UL {

MARGIN: 0px

}

.newkefu_group .shouqian_mid LI {

LIST-STYLE-TYPE: none;

MARGIN: 5px 0px;

LIST-STYLE-IMAGE: none

}

.newkefu_group .shouhou_mid {

BACKGROUND: url(/p_w_picpaths/kefu-middle.png) repeat-y;

HEIGHT: auto;

OVERFLOW: hidden;

PADDING-TOP: 5px

}

.newkefu_group .shouhou_mid UL {

MARGIN: 0px

}

.newkefu_group .shouhou_mid LI {

LIST-STYLE-TYPE: none;

MARGIN: 5px 0px;

LIST-STYLE-IMAGE: none

}

.newkefu_group .line {

TEXT-ALIGN: left;

MARGIN: 5px 10px 0px 8px;

BORDER-TOP: #ccc 1px dashed

}

.newkefu_group .line SPAN {

MARGIN-TOP: 5px;

DISPLAY: block;

COLOR: #000;

MARGIN-LEFT: 10px;

FONT-SIZE: 13px

}

.newkefu_group .line SPAN STRONG {

BORDER-BOTTOM: medium none;

PADDING-BOTTOM: 0px;

MARGIN-TOP: 0px;

COLOR: #900;

MARGIN-LEFT: 0px;

FONT-SIZE: 13px

}

</style>

</head>

<body>

<DIV>

<DIV id=newkefu_right class=newkefu><IMG id=newkefu_bar class=newkefu_bar

border=0 src="/p_w_picpaths/kefu-right.png" width=33

height=168>

<DIV class=qq_top><IMG src="/p_w_picpaths/kefu-top.png"

width=140 height=28></DIV>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<DIV class=midtop><IMG src="/p_w_picpaths/kefu-midtop.png"

width=140 height=24></DIV>

<DIV class=line><SPAN>24小时客服热线：<BR>

</DIV>

<DIV class=bottom><IMG src="/p_w_picpaths/kefu-bottom.png"

width=140 height=7></DIV>

</DIV>

</DIV>

$(function(){

* -------------------------------------------------------------------------------------

* | key | description | default |

* |---------------|-----------------------------------------------|-------------------|

* | speed | 滚动的间隔毫秒数，数值越小，滚动越快。 | 500 |

* |---------------|-----------------------------------------------|-------------------|

* | offset | 距离滚动顶部的点数（pixels）。 | 0 |

* |---------------|-----------------------------------------------|-------------------|

* | relativeTo | 设置滚动的DIV靠上还是靠下，可以设置为"top"或"bottom" | top |

* |---------------|-----------------------------------------------|-------------------|

* | killSwitch | 开启和取消跟随滚动开关的元素ID，需要jQuery Cookie 插件支持 | "killSwitch" |

* |---------------|-----------------------------------------------|-------------------|

* | onText | 如果启用了跟随滚动，开关显示的文字。 | "Turn Slide Off" |

* |---------------|-----------------------------------------------|-------------------|

* | offText | 如果取消了跟随滚动，开关显示的文字。 | "Turn Slide On" |

* |---------------|-----------------------------------------------|-------------------|

* | delay | 控制滚动延时 | 0 |

* |---------------|-----------------------------------------------|-------------------|

* | container | 滚动范围设置DIV的ID | 框的直接父对象 |

* -------------------------------------------------------------------------------------

$("#newkefu_right").scrollFollow({

speed:500,/* 移动速度 */

offset: 100

});

$("#newkefu_bar").hover(

function()/* 鼠标移入 */{

$("#group_pad").show("slow");

$("#newkefu_bar").attr("src","/p_w_picpaths/kefu-left.png");

function()/* 鼠标移出 */{

$("#newkefu_right").hover(

function()/* 鼠标移入 */{

$("#group_pad").show("slow");

$("#newkefu_bar").attr("src","/p_w_picpaths/kefu-left.png");

function()/* 鼠标移出 */{

$("#group_pad").hide("slow");

$("#newkefu_bar").attr("src","/p_w_picpaths/kefu-right.png");

}

);

}

);

});

</SCRIPT>

</div>

<p>本例所需要的脚本:中看不到效果,请刷新网页,当你在实际使用时不会出现这样的情况<br/>

<a href="/js/jquery-1.4.2.js">jquery-1.4.2.js</a><br/>

<a href="/js/jquery.cookies.2.2.0.min.js">jquery.cookies.2.2.0.min.js</a><br/>

<a href="/js/jquery.scrollfollow.js">jquery.scrollfollow.js</a></p>

</body>

</html>

上一篇：悬浮滚动网站jquery在线客服

下一篇：跟随鼠标的时钟

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

鼠标滑过显示在线客服

鼠标滑过显示在线客服

51CTO博客