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 ...
随机推荐
- 用Natvis定制C++对象在Visual Studio调试时如何显示
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Natvis定制C++对象在Visual Studio调试时如何显示.
- 在HTTP响应标题中隐藏ASP.NET MVC的版本
在默认情况下,ASP.NET MVC网站会在HTTP响应标题(Response Header)中动态添加目前使用的ASP.NET MVC版本编号.如果使用Fiddler Web Debugger工具查 ...
- 阿里云ONS而微软Azure Service Bus体系结构和功能比较
阿里云ONS而微软Azure Service bus体系结构和功能比较 版权所有所有,转载请注明出处http://blog.csdn.net/yangzhenping.谢谢! 阿里云的开放消息服务: ...
- js 获取浏览器版本号
1.在web开发中,会常常让你推断当前使用的是那个浏览器及浏览器的那个版本号,依据浏览器版本号来调整CSS的样式, 使在web界面在各个浏览器展现达到最佳的效果,以下是获取当前浏览器的代码: getB ...
- Android内存、性能是程序永恒的话题
内存.性能是程序永恒的话题,实际开发中关于卡顿.OOM也经常是打不完的两只老虎,关于卡顿.OOM的定位方法和工具比较多,这篇文章也不打算赘述了,本章主要是来整理一下JVM的内存模型以及Java对象的生 ...
- Redis学习手册(虚拟内存)
一.简介: 和大多NoSQL数据库一样,Redis同样遵循了Key/Value数据存储模型.在有些情况下,Redis会将Keys/Values保存在内存中以提高数据查询和数据修改的效率,然而这样的做法 ...
- [分享]Ubuntu12.04安装基础教程(图文)
[分享]Ubuntu12.04安装基础教程(图文) 原文地址: http://teliute.org/linux/Ubsetup/lesson21/lesson21.html 1.进入 live cd ...
- QVariant与自定义数据类型转换的方法
在使用VC.Delphi编写用户界面程序的时候,经常会把对象与控件的data域进行绑定,便于程序运行中读写提高效率.然而在Qt编程中怎么实现这个功能呢?比如将一个用户自定义的结构体与QComboB ...
- iOS 网络编程:NSURLSession
NSURLSession类和相关的类提供很多API来下载HTTP的内容.这些API提供多种delegate协议来支持验证和执行后台下载任务. 1 URL Session 设计概念 Session中的任 ...
- IDispose(), Finalize()
C# using 用法: 1. 作为指令,用于为命名空间创建别名或导入其他命名空间中定义的类型.(见例1-1) 2. 作为语句,用于定义一个范围,在此范围的末尾将释放对象.(见例1-2) (例子1- ...