jquery实现类似以前凡客诚品右侧图文切换结合效果
2019独角兽企业重金招聘Python工程师标准>>>
终于公司的新闻发布会弄好了,据说反响不错,70多家媒体,排场蛮大的。
现在又得重新回到开发中,新版的商城需要改版,已经实现各大版块的,样式结构,浏览器兼容已经搞定,虽然有纠结的IE6,可是依然拿下,没有办法,你懂的,过程很苦逼。
明天再整个图文结合的javascript效果就可以了,这让jquery博客想到上个版本上用到的类似凡客诚品图文切换效果来着。
$(function(){
$(".recommend .info #tabnav li").each(function(index){
$(this).hover(function(){
$("#tabcon > li:visible").hide();
$("#tabcon > li:eq(" + index + ")").show();
$(this).addClass("on").siblings().removeClass("on");
})
})
//goComment
$("#goComment").click(function(){
$("html,body").animate({scrollTop: $(".goods-comment").offset().top}, 10);
})
$("ul.list-shows em.ico:gt(8)").css({"text-indent":"3px","font-size":"10px","-webkit-text-size-adjust":"none"});
//list-shows
$(".list-shows li").hover(function(){
$(this).addClass("on").siblings().removeClass("on");
})
$(".sift-goods-list ul.fix li").click(function(){
$(this).addClass("on").siblings().removeClass("on");
});
var otherGoods = $(".sift-goods-con .other");
$(".sift-goods-btn a").toggle(function(){
otherGoods.slideUp(300);
$(this).removeClass("up").text("更多")
},function(){
otherGoods.slideDown(300);
$(this).addClass("up").text("收起")
})
//goods-property
var m=$('.goods-property p img').is("img");
if(m==true){
$(".goods-property img").parent("p").css("padding","0")
}
//tag-tynn-con
$(".tag-tynn-con dt.on").next("dd").find("ol").show();
$(".tag-tynn-con dl dt").click(function(){
$(this).toggleClass("on").next().find("ol").slideToggle(300)
});
$(".tag-tynn-con dl dt a").click(function(e){
e.stopPropagation();
});
//goods-info
$(".option-dl dt.option-dt.normal").addClass("on");
$(".option-dl dt.option-dt:not(.normal)").click(function(){
$(this).toggleClass("on");
if( !$(this).next(".option-dd").is(":animated") ){
$(this).next(".option-dd").slideToggle(300);
}
});
var $cur = 1;
var $i = 5;
var $len = $('#img-list-con>ul.fix>li').length;
var $pages = Math.ceil($len / $i);
var $w = $('.goods-main #img-list-con').width();//取得展示区外围宽度
var $showbox = $('#img-list-con>ul.fix');
var $pre = $('#img-list .go-left');
var $next = $('#img-list .go-right');
$pre.click(function(){
if (!$showbox.is(':animated')) {
if ($cur == 1) {
}
else {
$showbox.animate({
left: '+=' + $w
}, 500);
$cur--;
}
}
});
$next.click(function(){
if (!$showbox.is(':animated')) { //判断展示区是否动画
if ($cur == $pages) {
}
else {
$showbox.animate({
left: '-=' + $w
}, 500);//改变left值,切换显示版面
$cur++; //版面数累加
}
}
});
//goods-main imgShow end
$(".no-pinglun").click(function(){
$("#pinglun").slideUp(300)
});
$(".want-ask").click(function(){
$(".product_zixun").slideDown(300)
})
$(".no-zixun").click(function(){
$(".product_zixun").slideUp(300)
});
$(".pay-append dd ").hide();
$("table.data .a-share").click(function(){
$(this).parents("tr").find(".bubble").toggle();
$(this).parents("tr").siblings("tr").find(".bubble").hide();
$("body").one('click', function() {
$(".bubble").hide();
});
return false;
});
$(".bubble").click(function(){
stopPropagation()
});
$(".comment-main .info .product_zonghe a.no-re").click(function(){
$(this).parents(".product_zonghe").slideUp();
});
/* x-15 */
function SaveClass()
{
var temClassArry = new Array()
$("#UserStart > li").each(function(i){
temClassArry[i] = $(this).attr("class");
})
return temClassArry;
}
$(document).ready(function(){
var temparray = SaveClass();
$("#UserStart > li").mousemove(
function(){
var currentCount=0;
currentCount = $("#UserStart > li").index($(this)[0])
$("#UserStart > li").each(function(i){if(i<=currentCount)
{
$(this).removeClass();
$(this).addClass("lv1");
}
else{
$(this).removeClass();
$(this).addClass("lv2");
}})
})
.click(function(){
temparray = SaveClass();
})
.mouseout(function(){
$("#UserStart > li").each(function(i){
$(this).removeClass();
$(this).addClass(temparray[i]);
})
})
});
});
function SelectPay(value)
{
if(value==4)
{
$(".pay-way").slideDown(300);
}
else
{
$(".pay-way").slideUp(300);
}
}
function SelectOpenClosed(obj)
{
var objName=$("#"+obj);
if(obj=="one")
{
var openclass=objName.attr("class");
if(openclass.indexOf("on")>-1)
{
objName.css("background-position","8px -1122px");
objName.next("dd").slideUp(300);
objName.removeClass("on");
}
else
{
objName.css("background-position","8px -1103px");
objName.next("dd").slideDown(300);
objName.addClass("on");
}
}
if(obj=="two")
{
var openclass=objName.attr("class");
if(openclass.indexOf("on")>-1)
{
objName.css("background-position","8px -1122px");
objName.next("dd").slideUp(300);
objName.removeClass("on");
}
else
{
objName.css("background-position","8px -1103px");
objName.next("dd").slideDown(300);
objName.addClass("on");
}
}
if(obj=="three")
{
var openclass=objName.attr("class");
if(openclass.indexOf("on")>-1)
{
objName.css("background-position","8px -1122px");
objName.next("dd").slideUp(300);
objName.removeClass("on");
}
else
{
objName.css("background-position","8px -1103px");
objName.next("dd").slideDown(300);
objName.addClass("on");
}
}
}
代码有点长 先放点js实现代码,还有的看下面吧。
在线效果DEMO
转自 jquery效果 http://www.jqueryba.com/355.html
转载于:https://my.oschina.net/jqueryba/blog/80985
jquery实现类似以前凡客诚品右侧图文切换结合效果相关推荐
- jQuery实现的向下推送图文信息滚动效果
WEB页面需要展示网站最新信息,如微博动态.余票信息.路况监控等项目中常见的实时数据滚动效果,我们可以用jQuery来实现前端信息滚动效果.本文我们将结合实例为大家讲解如何使用jQuery来实现图文信 ...
- jQuery实现类似淘宝轮播图
jQuery实现类似淘宝轮播图 本周的作业是写一个类似淘宝首页的jQuery轮播图,这里做出记录. 如有错误,欢迎批评指证. html实现静态的布局 静态布局分析 一个轮播图静态的部分分为三个 展示区 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)...
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- banner特效php,jQuery自适应通栏宽屏banner幻灯片切换特效
jQuery自适应通栏宽屏banner幻灯片切换特效 这是一款代码简洁的jQuery自适应通栏宽屏banner幻灯片切换特效,jQuery自适应全屏BANNER焦点图代码. js代码 $(" ...
- html5内容切换特效,html5+jQuery图片和文字内容同时左右切换特效
html5+jQuery图片和文字内容同时左右切换特效,点击图片或者点击左右按钮进行切换,图片转动以及文字内容动画效果切换. 查看演示 下载资源: 22 次 下载资源 下载积分: 20 积分 js代码 ...
- html圆形图片切换,jQuery和CSS3炫酷圆形图片切换特效
这是一款效果非常酷的jQuery和CSS3圆形图片切换特效.该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画.可以任意设置多张图片进行来回翻转.旋转切换,效果堪称一流. 使用 ...
- html怎么做到滚动鼠标转换,js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)...
本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: wheel var currentShowPageIndex = 0; v ...
- 探探php模板下载,C3+H5+jQuery仿探探APP手机滑动切换特效
C3+H5+jQuery仿探探APP手机滑动切换特效 这是一款很不错的jQuery仿探探APP手机滑动切换特效,手机端网页滑动翻页上一页下一页切换代码 /*移动动画*/ animateMove:fun ...
- jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效
原文:jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效 源代码下载地址:http://www.zuidaima.com/share/1607128309009408.htm
- 创新实训-python爬虫多线程|解决中文乱码问题|卡片向上浮动效果|图文切换
创新实训-python爬虫多线程|乱码问题|前端样式重新修改 考完毛概,把上周的工作总结一下.爬虫在第一周的时候只爬了一个就业指导这一个模块,这一次又加了招聘服务模块,所以就用了两个线程.前端首页一开 ...
最新文章
- max_connect_error的说明
- 学号20175313 《实现Linux下cp XXX1 XXX2的功能(一)》第九周
- Ubuntu安装VLC播放器
- 机械加工工艺师手册_机械加工工艺师——机床应用篇
- java fileupload 文件_java用Commons fileupload 文件的上传
- 如果在iTerm2中复制命令特别卡,就跟慢动作似的,怎么办?
- 关于sublime-text-2的Package Control组件安装方法,自动和手动
- 关于怎么获取jsp的web站点的目录问题
- git cherry-pick 复制其他分支内容到当前分支
- MCU_ZigBee协议栈相关函数总结
- Win7各正式版下载地址和SHA验证
- 手机计算机无法使用,用数据线把手机连接电脑,电脑无法识别,怎么回事?
- 微博html5版打不开,电脑新浪微博页面打不开怎么办|电脑微博无法打开的解决方法...
- VC中自定义打印调试信息函数,打印调试信息到DebugView上
- 虚拟机登录MySQL
- 6 怎么选公司?面试3大招,离职都有哪些事宜要注意--绝密,程序员大厂面试求职大揭秘!
- 计算机网络——以太网的信道利用率
- 正版方舟建服务器,《方块方舟》玩家自建服务器教程
- html微信怎么转发,微信朋友圈怎么转发
- 软考access机考什么_软考程序员考试是机考还是笔试