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 ...
随机推荐
- Yii2 TimestampBehavior行为
<?php /** * @link http://www.yiiframework.com/ * @copyright Copyright (c) 2008 Yii Software LLC * ...
- RH442之Tuned优化方案
系统优化 介绍: Tuned是监控并收集系统组件使用资源的守护进程,可根据收集信息动态调整系统,可调整CPU和网络资源的使用来提高活跃设备性能与不活跃设备电能消耗.通过tuned-adm中提供优化案例 ...
- 学习笔记:暴力破解WIFI小软件
小弟 自己的学习笔记,做练习的 ,缺陷还很多,做到无法解决速度问题就不想做下去了,如果要看的话 主要是思路问题,获取句柄,控制句柄而已,代码比较简单.大神勿喷啊 破解DEMO源码:http://dow ...
- Mysql性能优化之缓存参数优化
数据库属于 IO 密集型的应用程序,其主要职责就是数据的管理及存储工作.而我们知道,从内存中读取一个数据库的时间是微秒级别,而从一块普通硬盘上读取一个IO是在毫秒级别,二者相差3个数量级.所以,要优化 ...
- javascript默认中文(汉字/标点)长度均为1的解决
javascript默认中文(汉字/标点)长度均为1 与后台(java)不一致, function calculate(str) { //var str="你好,哈哈哈000111lll&q ...
- cocos2d-x jsb 防止触摸事件传递
在游戏中要实现消息弹窗,让用户点击确认,其他区域产生遮罩,阻挡下层的事件被点击到,这是个很常用的功能,在cocos2d-x中,可以通过为layer添加事件代理来实现: pDirector->ge ...
- System Address Map Initialization in x86/x64 Architecture Part 2: PCI Express-Based Systems
原文 http://resources.infosecinstitute.com/system-address-map-initialization-x86x64-architecture-pa ...
- cocos2d-x 开发中的小问题 在xcode4环境下
转自:http://hi.baidu.com/baby_66_/item/302353174f19521cd0d66df2 1.如果你在想怎么去搞定程序的开始运行的背景一闪而过的大图 以及icon想换 ...
- [转]BeagleBone Black USB一线通(2)
接上篇 BeagleBone Black USB 一线通(1) 三.网络与ssh终端 通过串口终端我们可以看到启动的过程,也能做一些交互操作,比如我们看到了网络接口的状况.其中的usb0已经在随板的 ...
- UIPickerView(选择器)
UIPickerView也是一个选择器控件,它比UIDatePicker更加通用,它可以生成单列的选择器,也可生成多列的选择器,而且开发者完全可以自定义选择项的外观,因此用法非常灵活. UIPicke ...