css鼠标点击样式
Js-点击图⽚触发事件，分类显⽰信息
1：点击页⾯的图⽚：
点击分类的时候，可以暂时下⾯的图⽚不同类型，
<tr>
<td id="picOutdoor" class="picOutdoor" BrandType="1" >
<a href="javascript:void(0);">  <img src="~/Images/BrandInfo/gemei/Outdoor2.jpg" class="imgso" /> </a>                    </td>
<td id="picOutdoor" class="picOutdoor" BrandType="2" >
<img src="~/Images/BrandInfo/gemei/Lobby2.jpg" class="imgsl" />
</td>
<td id="picOutdoor" class="picOutdoor" BrandType="3" >
<img src="~/Images/BrandInfo/gemei/Room2.jpg" class="imgsr" />
</td>
</tr>
2：这⾥需要点击⼩的图⽚，⼤的图⽚就会重新获取，所以需要⽤到id ：picOutdoor
注意这⾥的：.fullSlide .bd ul    是这样的写法。
点击⽅法js：
$(".picOutdoor").click(function () {
$.ajax({
type: "POST",
url: '@Url.Action("GetBrandInfoPicList", "BrandInfo")',
traditional: true,
data: {
BrandCode:@Model.BrandCode,// '20',
BrandType: $(this).attr("BrandType"),
},
success: function (data) {
console.log($(".fullSlide .bd ul")[0].outerHTML)
$(".fullSlide .bd ul")[0].outerHTML = '<ul></ul>'
for (var i = 0; i < data.lstResult.length; i++) {
$(".fullSlide .bd ul").prepend('<li _src="url(/' + data.lstResult[i].PicPath + ')" > </li>')
}
},
complete: function () {
fullSlideMain();
}
});
});
3：上⾯调⽤了⽅法：fullSlideMain的详细代码
function fullSlideMain() {
$(".fullSlide").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "fold",
autoPlay: true,
autoPage: true,
trigger: "click",
interTime: 20000,
prevCell: ".arrowLeft",
nextCell: ".arrowRight",
startFun: function (i) {
var curLi = jQuery(".fullSlide .bd li").eq(i);
if (!!curLi.attr("_src")) {
curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")                }
var total = $(".bd li").length;
var page = i + 1;
$(".hd ul").html('<span>' + page + ' / ' + total + '</span>');
}
});                                        //document.domain == "126";
}
fullSlideMain();
4：⿏标点击事件：⿏标触发事件，离开事件：
代码： var oImg = ElementsByClassName("imgso")[0];
var oImgs = ElementsByClassName("imgsos")[0];
是如何获取的，如图：就是⼀个img图⽚的class⾥⾯的名称

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。