商品详情页中,当鼠标放到小图上时,改变大图的图片为当前小图的图片
2017-04-18 20:42
274 查看
在做商品详情页时,我们会遇到这样的问题,当鼠标移动到小图上的时候,所对应的大图也会随之改变,变成当前鼠标所在位置的小图图片,今天我给大家分享一下我的做法,希望对大家有所帮助,也希望得到大家的指点.
//首先引入jq文件,我用的是tp框架,jq文件是放在根目录Public文件夹下的
<script src="__PUBLIC__/js/jquery-1.10.2.min.js"></script>
$('#J_SmallImgs img').mouseover(function (){
var that = $(this);
//当鼠标移动到小图上的时候,获取到当前小图的图片地址
var newUrl = that.attr('src');
//改变大图的图片地址为当前小图的图片地址
$('#J_BigImg').attr('src',newUrl);
//我们可以同时改变当前所在的小图的透明度,但在此之前,我们可以先设置所有的小图的透明,做到清除上一个被选中的小图的透明度
$('#J_SmallImgs img').css('opacity',0.7);
//改变当前所在小图的透明度,做到被选中的效果
that.css('opacity',1);
});
</script>
//首先引入jq文件,我用的是tp框架,jq文件是放在根目录Public文件夹下的
<script src="__PUBLIC__/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">//首先给小图绑定 mouseover 事件
$('#J_SmallImgs img').mouseover(function (){
var that = $(this);
//当鼠标移动到小图上的时候,获取到当前小图的图片地址
var newUrl = that.attr('src');
//改变大图的图片地址为当前小图的图片地址
$('#J_BigImg').attr('src',newUrl);
//我们可以同时改变当前所在的小图的透明度,但在此之前,我们可以先设置所有的小图的透明,做到清除上一个被选中的小图的透明度
$('#J_SmallImgs img').css('opacity',0.7);
//改变当前所在小图的透明度,做到被选中的效果
that.css('opacity',1);
});
</script>
相关文章推荐
- Ecshop商品相册鼠标经过小图切换显示大图
- 鼠标放到图片上替换图片,改变样式。
- 鼠标放到图片上替换图片,改变样式。
- 代码: 仿淘宝商品详情页左上,图片鼠标浮上去,图片部分区域放大 (页面布局:图片列表)
- 图片滚动并且当鼠标放到图片上时,上面的大图会相应的变化。
- 鼠标悬停改变图片方法
- jQuery获取当前鼠标相对位置坐标和点击图片跳转上一张或下一张功能
- 鼠标移上后改变图片的js
- Visual Studio 2008 鼠标拖拽图片改变大小问题的解决方案
- 鼠标移动到图片上时,图片的样式改变
- JS实现鼠标移上图片显示、大图显示
- 鼠标点击当前行背景变色(附有指示图片)
- 图片大小随鼠标滚动而改变的兼容IE和firefox的代码
- 鼠标滚轮改变图片大小
- js鼠标放图片上图片显示大图(转)
- 图片上传生成缩略图,并使用JQuery实现鼠标移动到缩略图显示相应的大图的例子
- 鼠标移动到图片显示大图的javascript代码
- 图片大小随鼠标滚动而改变的兼容IE和firefox的代码[转]
- DataGrid实现鼠标放到某行改变背景色
- Hoverbox.--鼠标经过图片显示大图