仿京东BOE官网 jQuery代码
$(function() {
$("#chanping").mouseenter(function() {
$("#column").slideDown(500, function() {
$("#column").mouseenter(function() {
$("#column").show()
})
});
});
$("#column").mouseleave(function() {
$("#column").slideUp(500);
});
$("#chuanxing").mouseenter(function() {
$("#column2").slideDown(500);
});
$("#column").mouseleave(function() {
$("#column2").slideUp(500);
});
$("#scLeft").hover(function() {
$("#yishang1").animate({
width: "355px",
height: "245px",
})
},
function() {
$("#yishang1").animate({
width: "350px",
height: "240px",
})
});
$("#scCenter").hover(function() {
$("#yishang2").animate({
width: "355px",
height: "245px",
})
},
function() {
$("#yishang2").animate({
width: "350px",
height: "240px",
})
});
$("#scRinght").hover(function() {
$("#yishang3").animate({
width: "355px",
height: "245px",
})
},
function() {
$("#yishang3").animate({
width: "350px",
height: "240px",
})
});
$("#weixin2").hover(function() {
$("#wixin1").show();
$("#winxin3").attr('src', './images/weixin-icon01.png');
},
function() {
$("#wixin1").hide();
$("#winxin3").attr('src', './images/weixin-icon02.png');
})
$("#weibo2").hover(function() {
$("#wibo1").show();
$("#wibo3").attr('src', './images/weibo-icon01.png');
},
function() {
$("#wibo1").hide();
$("#wibo3").attr('src', './images/weibo-icon02.png');
})
$("#in2").hover(function() {
$("#in1").show();
$("#in3").attr('src', './images/yl.png');
},
function() {
$("#in1").hide();
$("#in3").attr('src', './images/yl2.png');
})
$('.a_1').mouseenter(function() {
$('.a_1').animate({
backgroundPositionY: -50,
})
}),
$(".a_1").mouseleave(function() {
$('.a_1').animate({
backgroundPositionY: 0,
})
})
$('.a_2').mouseenter(function() {
$('.a_2').animate({
backgroundPositionY: -190,
})
}),
$(".a_2").mouseleave(function() {
$('.a_2').animate({
backgroundPositionY: -130,
})
})
$('.a_3').mouseenter(function() {
$('.a_3').animate({
backgroundPositionY: -310,
})
}),
$(".a_3").mouseleave(function() {
$('.a_3').animate({
backgroundPositionY: -250,
})
})
$(".xianshi").mouseenter(function() {
$('#column_in1').show()
})
$(".xianshi").mouseleave(function() {
$('#column_in1').hide()
})
$(".chuangan").mouseenter(function() {
$('#column_in2').show()
})
$(".chuangan").mouseleave(function() {
$('#column_in2').hide()
})
$(".jiankang").mouseenter(function() {
$('#column_in3').show()
})
$(".jiankang").mouseleave(function() {
$('#column_in3').hide()
})
$(".fuwu").mouseenter(function() {
$('#column_in4').show()
})
$(".fuwu").mouseleave(function() {
$('#column_in4').hide()
})
});
仿京东BOE官网 jQuery代码的更多相关文章
- 仿京东BOE官网 html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 仿京东BOE官网 JavaScript代码
let items = document.getElementsByClassName('item'); let points = document.getElementsByClassName('p ...
- 仿京东BOE官网 css代码
* { margin: 0; padding: 0; border: 0; list-style: none; } .box { width: 1518px; height: 1300px; marg ...
- 仿京东BOE官网图片链接
- 基于jQuery仿迅雷影音官网幻灯片特效
分享一款基于jQuery仿迅雷影音官网幻灯片特效迅.雷影音官网jQuery幻灯片特效是一款带左右箭头,索引按钮切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html ...
- android 官网处理图片 代码
/** * 获取压缩后的图片 (官网大图片加载对应代码) * * @param res * @param resId * @param reqWidth * 所需图片压缩尺寸最小宽度 * @param ...
- 官网jquery压缩版引用地址:
3.1.1版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 仿智能社官网：原生JS实现简单又酷炫的3D立方体时钟
先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客. 这里默 ...
- Bootstrap--模仿官网写一个页面
本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统.常用CSS样.Javascript插件和部分组件. 以下html代码可以直接复制本地运行: BootstrapPage ...
随机推荐
- lua中 table.getn(t) 、#t、 table.maxn(t) 这三个什么区别？
lua中 table.getn(t) .#t. table.maxn(t) 这三个什么区别? RTlocal t = {1,888,x= 999,b=2,5,nil,6,7,[10]=1,8,{z = ...
- shell 十三问
经典的Shell十三问 摘选整理自:http://bbs.chinaunix.net/thread-218853-1-1.htmlhttps://github.com/wzb56/13_questio ...
- 报错：invalid operands to binary - (have ‘int’ and ‘char *’)
//这个题是输入大写的一串字符,然后按A对应1．．．这个规律求乘积 char a[],b[]; scanf("%s",a); scanf("%s",b); in ...
- 11-21 logging 模块
默认情况下Python的logging模块将日志打印到了标准输出中,且只显示了大于等于WARNING级别的日志, 这说明默认的日志级别设置为WARNING(日志级别等级CRITICAL > ER ...
- MySQL Notifier 缺少根元素解决方法
删除C:\Users(电脑用户名)\AppData\Roaming\Oracle\MySQL Notifier\settings.config文件即可
- Maven 配置编译版本
pom.xml <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</gro ...
- 并发|WEB服务器并发
面试中容易被问到你们服务器的并发是多少?但是这个问题我问过许多人,没有得到一个准确的答案!我总结了一些不错的回答,分享给大家! 面试题: 你们公司的服务器并发是多少? 我的回答: 1.并发这个词,许多 ...
- 【NOI2001】方程的解数 题解（dfs+哈希）
题目描述 已知一个方程 k1*x1^p1+k2*x2^p2……+kn*xn^pn=0. 求解的个数.其中1<=x<=150,1<=p<=6; 答案在int范围内 输入格式 第一 ...
- 线程通讯wait¬ify
目录 相关概念 生产者&消费者模型 相关概念 锁:解决线程间冲突的问题 wait¬ify:解决线程间协作的问题 wait和sleep的区别 wait期间对象锁是释放的,而slee ...
- C#LeetCode刷题-分治算法
分治算法篇 # 题名 刷题 通过率 难度 4 两个排序数组的中位数 C#LeetCode刷题之#4-两个排序数组的中位数(Median of Two Sorted Arrays)-该题未达最优解 30 ...