jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码 V2.0
把代码做成js网站进行统一调用
if (typeof jQuery == 'undefined') {
document.writeln('<script type="text/javascript" src="../jquery.js"></script>'); }
else {
// jQuery 已加载
}
//泰山压顶主要js代码
document.writeln('<script type="text/javascript" src="../top.js"></script>');
top.js代码为:
document.writeln('<div class="advbox" style="text-align: center;">');
document.writeln('<div class="dt_small" style="display:none;">');
document.writeln('<div class="dt_toBig" style="display:none;"></div>');
document.writeln('<a href="#" target="_blank"><img src="../images/Small.jpg" width="984" height="130" alt="图片缩略图" /></a> </div>');
document.writeln('<div class="dt_big">');
document.writeln('<div class="dt_toSmall"></div>');
document.writeln('<a href="#" target="_blank"><img id="actionimg" src="../images/big.jpg" width="986" height="283" alt="图片大图" /></a> </div>');
document.writeln('</div>');
function AdvClick(){
var a=1500;
var b=3*1000;
$(".dt_toSmall").click(function(){
$(".dt_small").delay(a).slideDown(a);
$(".dt_big").stop().slideUp(a);
$(".dt_toSmall").stop().fadeOut(0);
$(".dt_toBig").delay(a*2).fadeIn(0)
});$
(".dt_toBig").click(function(){
$(".dt_big").delay(a).slideDown(a);
$(".dt_small").stop().slideUp(a);
$(".dt_toBig").stop().fadeOut(0);
$(".dt_toSmall").delay(a*2).fadeIn(0)
})
}
function AdvAuto(){
if($(".dt_big").length>0){
var a=1500;
var b=3*1000;
$(".dt_big").delay(b).slideUp(a,function(){
$(".dt_small").slideDown(a);
$(".dt_toBig").delay(a).fadeIn(0)
});
$(".dt_toSmall").delay(b).fadeOut(0)
}
}
$(document).ready(function(){
AdvClick();
});
//顶部通览可展开收起效果
if($("#actionimg").length>0){
$("#actionimg").onload=AdvAuto();
}
jquery实现可展开收缩的首页大图广告展示方式 泰山压顶代码 V2.0的更多相关文章
- jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
- jquery层居中,点击小图查看大图,弹出层居中代码
1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <hea ...
- jQuery展开收缩2
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- jquery展开收缩列表
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- SlickGrid example 5:带子项的展开收缩
带子项的展开收缩. 代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...
- WordPress文章页添加展开/收缩功能
很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...
- max-height实现任意高度元素的展开收缩动画
http://dobinspark.com.cn/ 前言: 在说到实现元素的展开收缩,通常的想法是通过控制display的元素属性和none之间的切换,虽然说功能可以实现,但是这种展开是没有任何动画的 ...
- jQuery文本段落展开和折叠效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
随机推荐
- 微软的.NET示例代码放在Github上了
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:微软的.NET示例代码放在Github上了.
- (二 )VMware workstation 部署虚拟集群实践——并行批量操作环境部署
在上一篇博客中,已经介绍了安装虚拟集群的过程和需要注意的细节问题. 这篇主要是介绍如何批量登陆远程主机和配置,这个过程中是在没有部署并行处理工具或者集群管理工具的前进行的. ------------首 ...
- CentOS 修改IP地址, DNS, 网关
一.CentOS 修改IP地址 修改对应网卡的IP地址的配置文件# vi /etc/sysconfig/network-scripts/ifcfg-eth0 修改以下内容DEVICE=eth0 #描述 ...
- linux学习之八---Linux进程基础知识
一.linux进程 linux是一个多用户多任务的操作系统. 多用户是指多个用户能够在同一时间使用计算机. 多任务是指linux能够同一时候运行几个任务. 进程简单来说就是执行中的程序,Linux系统 ...
- E: Sub-process /usr/bin/dpkg returned an error code (1)
E: Sub-process /usr/bin/dpkg returned an error code (1) 错误描述 dpkg: error processing archive /var/cac ...
- Nginx高性能服务器安装、配置、运维 (5) —— Nginx虚拟主机配置
六.Nginx虚拟主机配置 建立基于域名的虚拟主机: (1)建立基于域名的虚拟主机配置文件(以abc.com为例): (2)更改虚拟主机配置文件: 更改配置如下(更改部分即可): server { l ...
- node.js 访问sql server的 node_modules “msnodesql"的安装编译方法
http://stackoverflow.com/questions/19661811/unable-to-download-msnodesql-0-2-1-v0-10-x64-msi 首先要满足以下 ...
- 四、使用Maven和使用Eclipse构建javaWeb项目
环境前边已经搭建过了,我们就再弄了. 1.使用Maven构建javaWeb项目 (1).键入以下命令: $ mvn archetype:generate -DgroupId=com.holytax.w ...
- JavaScript高级程序设计(二):在HTML中使用JavaScript
一.使用<script>元素 1.<script>元素定义了6个属性: async:可选.表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本 ...
- OC加强-day04
#pragma mark 00知识回顾 //定义一个函数 函数没有返回值函数有一个参数:返回值是double 参数是两个int的block void test(int a); void test(do ...