一款jQuery打造的滚动条在底部滑出信息提示层

html源代码:

一款jQuery打造的滚动条在底部滑出信息提示层

18款jquery抽屉式手风琴导航特效代码分享,18款jquery特效代码

 

jquery hover抽屉式导航图片展开收缩代码

图片 1

jQuery仿瑞丽鼠标滑过图片手风琴展开特效

图片 2

jQuery扁平风格的图标导航手风琴切换代码

图片 3

jQuery左右滑动手风琴轮播切换特效

图片 4

jQuery仿AnG无双科技滑动手风琴特效源码

图片 5

jquery图片信息列表选项卡左右切换代码

图片 6

jQuery hover水滴导航切换选项卡栏目代码

图片 7

jquery手风琴菜单制作横向菜单切换手风琴效果代码

图片 8

jquery水平滑动手风琴菜单鼠标点击图片展示手风琴菜单代码

图片 9

jQuery仿艺龙旅行网图片手风琴特效

图片 10

jQuery CSS3水平滑动手风琴文字图片切换特效代码

图片 11

jquery动漫人物网的横向手风琴切换效果

图片 12

CSS3 transition属性制作水平手风琴鼠标点击手风琴展开收起

图片 13

jquery水平手风琴鼠标滑过图片标题水平滑动切换

图片 14

jQuery CSS3圆角水平手风琴折叠菜单切换效果

图片 15

原生js水平手风琴弹性相册图片展示

图片 16

原生js水平手风琴点击标题杂志图片水平自动切换

图片 17

简单的,jquery手风琴插件带标题的水平手风琴图片轮换代码

图片 18

 

jquery hover抽屉式导航图片展开收缩代码
jQuery仿瑞丽鼠标滑过图片手风琴展开特…

jquery实现可关闭的倒计时广告特效代码,jquery特效代码

本文实例讲述了jquery实现可关闭的倒计时广告特效代码。分享给大家供大家参考。具体如下:

这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各主流浏览器,本效果是从门户网站上整理而来。希望大家喜欢。

先来看看运行效果截图:

图片 19

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>js贴片倒计时代码</title>
<style>
*{padding:0;margin:0; font-size:12px;}
ol,ul,li{list-style:none}
img{border:none}
.box{ width:564px; height:361px; margin:20px auto; position:relative; display:none;}
.ad_time{ width:554px; height:351px; background:#000; filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5; padding:5px; position:absolute; top:0; left:0; color:#fff;}
.ad_time span{ font-weight:bold; color:#cc0; padding:0 5px;}
.close{ width:49px; height:20px; background:url(images/close.png) no-repeat; position:absolute; top:0; right:0; cursor:pointer;}
.btn{ width:100px; height:30px; background:#eee; border:1px solid #ddd; font:normal 12px/30px '寰蒋闆呴粦'; text-align:center; margin:20px auto; cursor:pointer;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
function lxfEndtime(){
 $t=$('#t').html();
 if($t!=0){
  $('#t').html($t-1);
  $i=setTimeout("lxfEndtime()",1000);
 }else{  
  $('.box').hide();
  $('.btn').show();
  $('#t').html(6);
  $('.ad_time').css({'width':'554px','height':'351px'});
  clearTimeout($i);
 }
};
$(document).ready(function(){
 $('.btn').live('click',function(){
  $('.box').show();
  $(this).hide(); 
  $('.ad_time').animate({width:110,height:18},'slow');
  lxfEndtime();
 })
 $('.close').click(function(){
  $('.box').hide();
  $('.btn').show();
  $('#t').html(6);
  $('.ad_time').css({'width':'554px','height':'351px'});
  clearTimeout($i);
 })
});
</script>
</head>
<body>
<!--代码开始-->
<div class="box">
 <div class="ad"><a href="#" target="_blank"><img src="images/ad.jpg" /></a></div>
 <div class="ad_time">时间还剩50秒</div>
 <div class="close"></div>
</div>
<div class="btn">点击显示效果</div>
<!--代码结束-->
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

本文实例讲述了jquery实现可关闭的倒计时广告特效代码。分享给大家供大家参考。具…

复制代码 代码如下:

当滚动鼠标滚轮,或者滚动条往下拉的时候,在右下角,弹出一个信息提示框.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>jquery定时滑出可最小化的底部提示层</title><base
target=”_blank” />
<link href=””
rel=”stylesheet” type=”text/css”>
<script type=”text/javascript”
src=”;
</head>

有一点仿的是一个插件工具,就是网页中大家都长用到的友荐。

<body>
<div style=”width:800px;margin:0px auto”>
<span style=”font-size:18px; font-weight:bold; text-align:center;
line-height:25px; color:#000;
width:100%”>jquery定时底部滑出可最小化的提示层特效<br />
<a href=”” target=”_blank”
style=”color:#000″>脚本之家</a>(<a
href=”” style=”color:#000″
target=”_blank”> />
<br />
</span>

这款特效算一款简单实用的jquery特效

当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层。
</div>
<div style=”background-color:Red;
width:100%;height:150px;”>欢迎。</div>
<div style=”height:830px;”></div>
<div style=”background-color:Fuchsia;
width:100%;height:150px;”>jb51</div>
<div style=”height:500px;”></div>

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

<div class=”bottom_box-keleyi-com”>
<div class=”bottom”>
<p>感谢您访问脚本之家网站!<a href=””
target=”_blank”>;
<div class=”ask”><a
href=”;
<a href=”;
<a href=”
AJAX</a>
<a
href=”;
<a
href=”;
<a
href=”;
<a href=”;
<a href=”;
<a href=”;
<a
href=”;
</div>
</div>
<div class=”close”></div>
</div>
<img class=”mini”
src=”” width=”65″
height=”37″ alt=”打开” />
<script type=”text/javascript”>
$(function(){
setTimeout(function(){
$(“.bottom_box-k”+”eleyi-com”).slideDown(“slow”);
},2000);

效果图如下:

$(“.close”).click(function(){
$(“.bottom_box-ke”+”leyi-com”).hide();   
$(“.mini”).show(200);   
})
$(“.mini”).click(function(){
$(this).hide();   
$(“.bottom_box-kele”+”yi-com”).show();   
})
});
</script>
</body>
</html>

图片 20

复制代码 代码如下: !DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“” html
xmlns=”http…

 

特效下载地址:

谢谢大家的关注!


当滚动鼠标滚轮,或者滚动条往下拉的时候,在右下角,弹出一个信息提示框.
有一点仿的…

发表评论

电子邮件地址不会被公开。 必填项已用*标注