<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
//进入后将checkbox全部设为未选中,防止刷新后还有选中的现象
$('.photoBox .imageover .photoCheck').attr("checked",false);
$('.photoBox').mouseover(function(){
$(this).children('.imagestate').hide();
$(this).children('.imageover').show();
$(this).children('.imagevisited').hide();
});
$('.photoBox').mouseout(function(){
if($(this).children().children('.photoCheck').attr('checked')==true){
$(this).children('.imageover').hide();
$(this).children('.imagestate').hide();
$(this).children('.imagevisited').show();
}else{
$(this).children('.imageover').hide();
$(this).children('.imagestate').show();
$(this).children('.imagevisited').hide();
}
});
});
var clickMe=-1;
//防止事件冒泡
function setClickMe(){
// $(".photoBox .imageover .photoCheck").attr("clickMe","1");
clickMe=1;
}
//打开浏览图片页
function viewPhoto(url){
//var clickMe=$(".photoBox .imageover .photoCheck").attr("clickMe");
//alert(clickMe);
if(clickMe==undefined || clickMe==-1){
alert(url);
//location.href = url;
}else{
clickMe=-1;
// $(".photoBox .imageover .photoCheck").attr("clickMe","-1");
}
}
//取选中图片的ID
function getPhotoIds(){
var ids="";
$('.photoBox').children('.imagevisited').each(function(){
if($(this).css("display")=="block"){
if(ids!=="")
ids=ids+","+$(this).children('.photoImg').attr('photoId');
else
ids=ids+$(this).children('.photoImg').attr('photoId');
}
});
alert(ids);
}
</script>
</head>
<body>
<!--
<div class="imagestate"><a href="#"><img src="1.gif" width="80" height="80" border="0" /></a></div>
<div class="imageover"><input type="checkbox" name="checkbox" id="checkbox" /></div>
<div class="imagevisited"><img src="visited.gif" width="15" height="15" /></div>
-->
<div class="photoBox">
<div class="imagestate" style="float:left; height:80px; width:80px; cursor:pointer;">
<img src="1.gif" width="80" height="80" border="0" />
</div>
<div class="imageover" onclick="viewPhoto('http://www.baidu.com');" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
<input onclick="setClickMe();" class="photoCheck" type="checkbox" name="checkbox" />
</div>
<div class="imagevisited" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
<img class="photoImg" src="visited.gif" width="15" height="15" photoId="1001" />
</div>
</div>
<div class="photoBox">
<div class="imagestate" style="float:left; height:80px; width:80px; cursor:pointer;">
<img src="1.gif" width="80" height="80" border="0" />
</div>
<div class="imageover" onclick="viewPhoto('http://www.baidu.com');" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
<input onclick="setClickMe();" class="photoCheck" type="checkbox" name="checkbox" />
</div>
<div class="imagevisited" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
<img class="photoImg" src="visited.gif" width="15" height="15" photoId="1002" />
</div>
</div>
<div class="photoBox">
<div class="imagestate" style="float:left; height:80px; width:80px; cursor:pointer;">
<img src="1.gif" width="80" height="80" border="0" />
</div>
<div class="imageover" onclick="viewPhoto('http://www.baidu.com');" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
<input onclick="setClickMe();" class="photoCheck" type="checkbox" name="checkbox" />
</div>
<div class="imagevisited" style="display:none; background:url(1.gif) no-repeat; float:left; height:80px; width:80px; text-align:left; cursor:pointer;">
<img class="photoImg" src="visited.gif" width="15" height="15" photoId="1003" />
</div>
</div>
<div onclick="getPhotoIds();">显示选中的图片ID</div>
</body>
</html>
分享到：
相关推荐
使用这个插件时，首先需要在页面中引入jQuery库和插件的相关文件。这包括在标签内添加对jQuery库的引用，如`<script src="https://code.jquery.com/jquery-3.x.y.min.js"></script>`，以及引入插件的JS和CSS文件，...
在这个“jquery多图3D旋转图片轮播和checkbox美化.zip”压缩包中，包含的是两个核心功能：一个基于jQuery实现的3D图片轮播效果，以及对checkbox样式的美化。 首先，我们来探讨jQuery 3D旋转图片轮播特效。这种特效...
为了进一步提升用户体验，我们可以用图片或图标字体（如Font Awesome）替换原始的复选框和单选按钮。使用`content`伪元素和`before`或`after`，可以将自定义图标插入元素内。在jQuery事件处理中，我们根据元素的选中...
在IT行业中，尤其是在前端开发领域，"checkbox 图片 兼容 JQ"的主题涉及到的是如何在网页中使用图片替换默认的checkbox复选框，并确保这种替换在不同的浏览器，特别是老版本的Internet Explorer（IE）中也能正常工作...
开发者可以将这个图片作为背景图应用到CheckBox上，通过CSS控制其显示和隐藏，如： ```css input[type="checkbox"] { background-image: url(1.gif); background-position: center; background-repeat: no-repeat...
这些图片通过CSS引用，并在页面上呈现。在某些情况下，开发者可能需要替换这些图像以符合品牌形象。 `js`文件夹则包含了核心的JavaScript代码，这是整个插件的灵魂所在。通常，这个文件会定义一个函数或对象，用于...
在这份文档中，我们首先要了解的是使用jQuery库和图片来美化HTML中的checkbox和radio控件的方法。这不仅可以改善用户界面的美观性，还能提供更加友好的用户体验。 首先，jQuery是一个快速、小巧、功能丰富的...
本教程将探讨如何使用纯CSS和jQuery来创建一个相册，其中的图片可以被选中和取消选中，就像常见的文件选择器中的“打对勾”效果。这个功能常见于上传图片的界面，让用户能够方便地标记他们想要操作的图片。 首先，...
在这个例子中，JQuery将被用来添加选中图片的打勾效果。以下是一个简单的JQuery实现： ```javascript $(document).ready(function() { // 当点击图片旁边的复选框时 $('#imageList .voteCheckbox').click...
你可以根据需要调整这段代码，例如，用 CSS3 动画来增强用户体验，或者使用自定义的背景图片来呈现选中/未选中状态。 3. **样式美化**： 要达到自定义效果，我们需要在 CSS 中设置 label 的样式。例如，我们可以...
在JavaScript部分，我们使用jQuery来监听`checkbox`的点击事件，根据`checkbox`是否被选中来切换图片的源。这里需要注意的是，使用`siblings()`选择器时，应避免使用多层次的选择器，如`siblings(".box2>img")`，而...
若要实现图标效果，可以在`.custom-checkbox`元素中内联设置背景图片，或者使用图标字体库（如Font Awesome）。选中和未选中状态时，通过改变背景位置或更改图标类来展示不同的图标。 ```css .custom-checkbox {...
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面...为某dom元素应用某css样式可以使用jQuery中的addClass方法，例如:将id为tt的div元素应用.bt样式，可用些语句：$("#tt").addClass("color","red");
4. `jquery.bgiframe.js`：这是一个jQuery插件，主要用于解决在IE6和IE7下浮动元素与背景图片重叠的问题，确保多选框在这些旧版浏览器中的正确显示。 5. `前端页面.text`：这个文件很可能包含了一个或多个示例页面...
本案例聚焦于自定义`checkbox`样式的实现，通过结合CSS（层叠样式表）和jQuery库，可以创造出独特且具有视觉吸引力的交互效果。`checkbox`是HTML中的一个基本元素，通常用于用户进行选择或确认操作。默认样式往往...
18.jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19.jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20.jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21.jquery定时自动切换banner...
本教程将聚焦于如何利用jQuery和layui库来实现这样的功能。jQuery是一个强大的JavaScript库，它简化了DOM操作，事件处理，动画效果以及Ajax交互。而layui是一款优秀的前端UI框架，提供了丰富的组件和美观的样式，...
**jQuery高性能带复选框的树形结构插件——highchecktree** 在Web开发中，树形结构常常用于展示层级关系的数据，例如组织结构、文件系统等。`highchecktree`是一个专门针对这种情况设计的jQuery插件，它能高效地...
之后无论我们如何修改，checkbox的状态都不会改变，这通常是由于属性（attr）和属性（prop）在使用上的差异造成的。 在jQuery中，`attr()`和`prop()`都是用来设置或获取DOM元素的属性和值的方法，但它们在处理HTML...