jquery左侧图片与右侧图片以及放大镜和图片的放大的图片和产品的隐藏的效果

服装商城的信息图片

HTML代码部分

 <div class="pro_detail"><div class="pro_detail_left"><div class="jqzoom"><img src="data:images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg" /></div><span><a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox"><img alt="点击看大图" src="data:images/look.gif" /></a></span><ul class="imgList"><li><img src="data:images/pro_img/blue_one.jpg" alt="" /></li><li><img src="data:images/pro_img/blue_two.jpg" alt="" /></li><li><img src="data:images/pro_img/blue_three.jpg" alt="" /></li></ul><div class="tab"><div class="tab_menu"><ul><li class="selected">产品属性</li><li>产品尺码表</li><li>产品介绍</li></ul></div><div class="tab_box"><div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。</div><div class="hide">来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。</div><div class="hide">世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。</div></div></div></div><div class="pro_detail_right"><h4>免烫高支棉条纹衬衣</h4><p>全新精品高支棉衬衫再次提升品质，精选100%新疆长绒棉织造而成，平整度好，短绒少； 80-100高支双股经纬交织，带来无与伦比的舒适享受；而且面料反光效果好，具有漂亮的光泽，质感上佳，有利于免烫效果的维持。※不仅如此，深受消费者欢迎的经典款式使精品高支棉衬衫更贴合东方人身型气质，多款衬衫还采用简单且个性鲜明条纹元素，利用最为单纯的几何线条，透过条纹的粗细、宽窄间的重组，带出令人耳目一新的时尚气息，更显出俊朗男士的挺拔身型！</p><p><strong>现价：200元  <del>原价：300元</del></strong></p><p><strong>编号：33313993</strong></p><div class="color_change">颜色：<strong>蓝白</strong><ul><li><img src="data:images/pro_img/blue.jpg" alt="蓝白" /></li><li><img src="data:images/pro_img/yellow.jpg" alt="黄白" /></li><li><img src="data:images/pro_img/green.jpg" alt="粉绿" /></li></ul></div>

左侧图片与右侧图片的效果：

js代码部分

$(funtion(){
//左侧小图点击//小图的图片li img点击事件//live:jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。//live进行绑定事件$(".pro_detail_left ul li img").live("click",function () {//获取图片的src属性var Src = $(this).attr("src");//获取图片的最后的属性//lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。var img_i = Src.lastIndexOf(".");//substring() 方法用于提取字符串中介于两个指定下标之间的字符。var src_unit = Src.substring(img_i);var Src = Src.substring(0, img_i);//小图片的同辈级var small = Src + "_small" + src_unit;//大图片的同辈级//attr:获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性var big = Src + "_big" + src_unit;$("#bigImg").attr({ "src": small, "jqimg": big });$("#thickImg").attr("href", big);});//右侧产品衣服颜色切换//div的img点击事件$(".color_change ul li img").click(function () {//当前图片的srcvar img_src = $(this).attr("src");//图片的最后元素var i = img_src.lastIndexOf(".");//元素的同辈var unit = img_src.substring(i);//元素的同辈从零开始var img_src = img_src.substring(0, i);//放大镜的图片var img_small = img_src + "_one_small" + unit;var img_big = img_src + "_one_big" + unit;//放大镜图片$("#bigImg").attr({ "src": img_small, "jqimg": img_big });//放大图片$("#thickImg").attr("href", img_big);//div的颜色文字选择$(".color_change strong").text($(this).attr("alt"));var url = img_src + ".html";//empty():删除匹配的元素集合中所有的子节点。//load():载入远程 HTML 文件代码并插入至 DOM 中$(".imgList").empty().load(url);});});

$(funtion(){
//产品属性隐藏切换//获取li的产品属性var $product = $(".tab_menu ul li");//li产品属性的点击事件$product.click(function () {//siblings():取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。//为当前事件获取一个追加class的属性并获取同辈元素之后移出class属性$(this).addClass("selected").siblings().removeClass("selected");//获取当前事件的索引var index = $product.index(this);//>:匹配所有紧接在 prev 元素后的 next 元素//获取文字class的下一个div元素所有同辈级元素，显示隐藏$(".tab_box>div").eq(index).show().siblings().hide();//鼠标移上去颜色的hover}).hover(function () {$(this).addClass("hover");}, function () {$(this).removeClass("hover");});});

产品属性隐藏切换图片的效果：

jquery左侧图片与右侧图片以及放大镜和图片的放大的图片和产品的隐藏的效果相关推荐

html 图片放大缩小轮播,jQuery左右滚动支持图片放大缩略图图片轮播代码分享
本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播 ...
Jquery鼠标滚轮放大缩小图片
使用Jquery鼠标点击图片,划动鼠标滚轮放大缩小图片. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
ajax实现简单的点击左侧菜单，右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 图片.png 原 ...
Android商城开发----点击左侧分类列表右侧更新对应列表内容
Android商城开发----点击左侧分类列表右侧更新对应列表内容目录 Android商城开发----点击左侧分类列表右侧更新对应列表内容一.首先说布局: 二.主要说一下,布局完成后实现点击左侧类 ...
抖音上css照片动态旋转怎么做,抖音里单张图片平移视频怎么制作？影音制作实现一张图片从左到右滑动视频效果...
今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...
php图片滑动怎么做,抖音里单张图片平移视频怎么制作？影音制作实现一张图片从左到右滑动视频效果...
今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...
html 左边固定右边自动,css经典布局之左侧固定大小右侧自动适应
本文作者:IMWeb 赛冷思未经同意,禁止转载最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家 ...
html添加表格内添加背景图片,如何在Excel2013表格中为数据区域添加背景图片的方法...
为了美化Excel2013工作表,输入数据后,用户可以为工作表添加背景图片.在默认情况下,插人的背景图片是以平铺的方式占满整个工作表,如果需要背景图片只在数据区域中显示,可以使用下面介绍的方法来操作. ...
图片尺寸修改工具有哪些？这几种修改图片尺寸的方法分享给你
平时在使用图片的时候,不知道大家是否注意过图片尺寸,对于做电商的小伙伴来说肯定是注意过的,因为在使用图片做店铺宣传的时候,图片尺寸超过一定数值以后会有图片放大镜效果. 那么图片尺寸是越大越好吗?其实并 ...
JS实现鼠标滚轮缩小放大拖动图片代码
Jquery,JS实现鼠标滚轮缩小放大拖动图片代码直接上代码:可以直接使用: <!doctype html public "-//W3C//DTD XHTML 1.0 Transit ...

jquery左侧图片与右侧图片以及放大镜和图片的放大的图片和产品的隐藏的效果

jquery左侧图片与右侧图片以及放大镜和图片的放大的图片和产品的隐藏的效果相关推荐

最新文章

热门文章