jquery相片特效

于 2015-08-19 23:45:21 发布
阅读量439 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hellowindowns/article/details/47791871
本文介绍了一个用于录入和展示行驶证相关信息的网页应用。该应用利用HTML、CSS和JavaScript实现了一个用户界面，用于输入车辆的基本信息如车架号、发动机号等，并展示了相关证件图片。同时，该界面还集成了日期选择器插件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!--<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>-->
<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<title>行驶证数据录入</title>
<link rel="stylesheet" href="../../css/public/base.css" />
<link type="text/css" href="../../css/custom-theme/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="../../js/jquery-ui-1.9.2.custom.min.js"></script>
</head>
<style type="text/css">
.user_info_content {
width: 20%;
float: left;
}
.user_info_content span {
/* width: 50%; */
float: right;
line-height: 30px;
margin: 10px 0;
}
.user_info_content span b {
width: 20%;
float: left;
min-width: 60px;
}
.user_info_content span input {
width: 55%;
float: left;
}
input[type="text"] {
height: 25px;
}

.user_info_img {
float: left;
position: relative;
/* width: 75%;
overflow-y: auto;
height: 350px; */
}
/*
.user_info_img img {
width: 300px;
height: 200px;
margin: 2px;
border: 8px solid #E8E9F7;
float: left;
} */

</style>
<style>
body {
/* background: gray;
margin: 20px 0;
font: 12px Verdana, Arial, Tahoma;
text-align: center;
vertical-align: middle;
color: #FFFFFF */
}


img {
border: none
}


.txt_1 {
font: bold 24px Verdana, Tahoma;
color: #fff
}


img.thumb_img {
cursor: pointer;
display: block;
margin-bottom: 10px
}


img#main_img {
cursor: pointer;
display: block;
}


#gotop {
cursor: pointer;
display: block;
}


#gobottom {
cursor: pointer;
display: block;
}


#showArea {
height: 355px;
margin: 10px;
overflow: hidden
}


.info {
color: #666;
font: normal 9px Verdana;
margin-top: 20px
}


.info a:link,.info a:visited {
color: #666;
text-decoration: none
}


.info a:hover {
color: #fff;
text-decoration: none
}
</style>


<body>
<div class="user_info">



<div class="user_info_content">
<form method="post" id="user_info_edit">
<input type="hidden" name="recId" id="recId" value="" />
<input type="hidden" name="hasProced" id="hasProced" value="1" />
<p>
<span>
<b>车架号:</b>
<input type="text" name="vehicleIdNumber" id="vehicleIdNumber" value="" />
</span>

</p>
<br>
<p>
<span>
<b>发动机号:</b>
<input type="text" name="engineNumber" id="engineNumber" value="" />
</span>

</p>
<br>
<p>
<span>
<b>注册日期:</b>
<input type="text" name="registerDate" id="registerDate" value="" class="setdate dateico" readonly="readonly" />
</span>

</p>
<br>

<p>
<span>
<b>保险日期:</b>
<input type="text" name="insuranceDate" id="insuranceDate" value="" class="setdate dateico" readonly="readonly" />
</span>

</p>
<br>
<p>
<span>
<b>年审月份:</b>
<input type="text" name="auditDate" id="auditDate" value="" class="setdate dateico" readonly="readonly" />
</span>
</p>
<br />
</form>
</div>







   <div class="user_info_img">
   
    <table width="740" border="0" align="center" cellpadding="0" cellspacing="5">

<!-- <tr>
<td height="75" colspan="2" align="left" class="txt_1">纵向的JS相册效果</td>
</tr>  -->

<tr>







<td width="95" align="center" valign="top">
    <img src="images/gotop.gif" width="100" height="14" id="gotop" />
<div id="showArea">
<!--

  <img src="images/11.png"  width="80" height="50" border="0" class="thumb_img" /> 
 
   -->
  
</div> 
<img src="images/gobottom.gif" width="100" height="14" id="gobottom" />
 </td>
 
<td width="620" align="center">
 <img src="images/03.jpg"   width="640" height="380" border="0" id="main_img"
rel="images/03.jpg"   />
</td>
 
 
      </tr>
</table>
</div>



</div>
</body>
<script type="text/javascript">
//获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
};
$(function() {
// 日期插件
$(".setdate").datepicker({
defaultDate: "",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onSelect: function(dateText, inst) {
$(this).datepicker("option", null, inst); //"minDate"
},
onClose: function(selectedDate) {
$(this).datepicker("option", null, selectedDate); //"minDate"
}
});
/********* 填充数据/获取图片 **********/
// 获取数据
var recId = getUrlParam("recId");
var vehicleIdNumber = getUrlParam("vehicleIdNumber");
var engineNumber = getUrlParam("engineNumber");
var insuranceDate = getUrlParam("insuranceDate");
var registerDate = getUrlParam("registerDate");
var auditDate = getUrlParam("auditDate");
var storeId = getUrlParam("storeId");
// 清空数据
$("#recId").val("");
$("#vehicleIdNumber").val("");
$("#engineNumber").val("");
$("#insuranceDate").val("");
$("#registerDate").val("");
$("#auditDate").val("");
// 填充数据
if (recId != "undefined") {
$("#recId").val(recId);
}
if (vehicleIdNumber != "undefined") {
$("#vehicleIdNumber").val(vehicleIdNumber);
}
if (engineNumber != "undefined") {
$("#engineNumber").val(engineNumber);
}
if (insuranceDate != "undefined") {
$("#insuranceDate").val(insuranceDate);
}
if (registerDate != "undefined") {
$("#registerDate").val(registerDate);
}
if (auditDate != "undefined") {
$("#auditDate").val(auditDate);
}
// 获取图片
$.ajax({
type: "post",
url: "czbbbApi.action",
data: {
method: "7020",
data: "{'objectId':" + recId + "}"
},
success: function(e) {
var data = JSON.parse(e).data;
var html = "";
console.log(data);
for (var i = 0; i < data.length; i++) {
html += "<img  width='80' height='50' border='0' class='thumb_img' src='/mnt/pics/license/" + storeId + "/" + data[i].imgName + "'/>"
   $("#main_img").attr("src","/mnt/pics/license/" + storeId + "/" + data[i].imgName );
}
$("#showArea").html(html);
}
});
/********* 填充数据/获取图片 **********/
});
</script>

<script type="text/javascript">
/*     function $2(e) {
return document.getElementById(e);
}   */  

  /*  document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b' + cl + '\\b');
var elem = this.getElementsByTagName('*');
for ( var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes))
retnode.push(elem[i]);
}
return retnode;
}     */
var MyMar;
var speed = 1; //速度，越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
var ipath = 'images/'; //图片路径
var thumbs = document.getElementsByClassName('thumb_img');
/* for ( var i = 0; i < thumbs.length; i++) {


//  thumbs[i].onmouseover = function() {
// debugger;
$('main_img').src = this.rel;
// $('main_img').src = this.src;
// $('main_img').link = this.link;
// };  
thumbs[i].onclick = function() {
   //console.log($(this).attr("link"));
//location = this.link
//$('#main_img').src = this.src
debugger;
$('#main_img').attr("src",this.src);
}
}
*/

$('body').on('click',".thumb_img",function(){  ////////////动态生成的标签，获取方法
       $('#main_img').attr("src",this.src);
    });

$('#main_img').onclick = function() {
//location = this.link;
//$('main_img').src = this.src;
//location = this.src;


}
/*   $('#gotop').onmouseover = function() {
  $(this).attr("src",ipath + 'gotop2.gif');
//this.src = ipath + 'gotop2.gif';
MyMar = setInterval(gotop, speed);
}
$('#gotop').onmouseout = function() {
$(this).attr("src",ipath + 'gotop.gif');
//this.src = ipath + 'gotop.gif';
clearInterval(MyMar);
}
*/
/* $('#gobottom').onmouseover = function() {
debugger;
$(this).attr("src",ipath + 'gobottom2.gif');
//this.src = ipath + 'gobottom2.gif';
MyMar = setInterval(gobottom, speed);
} */

$('#gotop').mouseover(function(){
   $(this).attr("src",ipath + 'gotop2.gif');
MyMar = setInterval(gotop, speed);

});

$('#gotop').mouseout(function(){
   $(this).attr("src",ipath + 'gotop.gif');
clearInterval(MyMar);

});
 
              
$('#gobottom').mouseover(function(){
   $(this).attr("src",ipath + 'gobottom2.gif');
MyMar = setInterval(gobottom, speed);

});


$('#gobottom').mouseout(function(){
   $(this).attr("src",ipath + 'gobottom.gif');
clearInterval(MyMar);
});

 
function gotop() {
$('#showArea').scrollTop($('#showArea').scrollTop() -  spec);
}
function gobottom() {
$('#showArea').scrollTop($('#showArea').scrollTop() + spec);
}
 

</script>


</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值