jquery相片特效
2015-08-19 23:45
721 查看
<!--<%@ 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>
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery 选择器和事件
- jQuery xml字符串的解析 及 读xml并search
- jQuery——选择器的
- JQuery基础 2015-8-19(第97天)
- 创建报表饼图而 基于jquery.flot.js
- Jquery 插件
- 报表制作一 基于jquery.flot.js制作一个动态报表
- 用jquery实现小火箭到页面顶部的效果
- jquery实现简单轮播
- JQuery validate验证规则
- JQuery中$.ajax()方法参数详解
- jquery 动态增加，减少input表单的方法
- jquery的几个重要的对象关系逻辑
- 利用jquery使对象在页面做曲线运动
- Jquery的$.ajax和$.post,$.get的用法总结
- JQuery开发权威指南——学习笔记
- jquery.webcam进行摄像头拍照
- js jQuery 动态校验表单输入框内容
- js以字符串方式创建DOM（原生js，jquery，extjs）
- 贴近用户体验的Jquery日期、时间选择插件