- 浏览: 53138 次
- 性别:
- 来自: 北京
文章分类
最新评论
核心代码:
1.css:16sucai.css
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
a {outline: none;}
img{ border:0;}
a img {vertical-align: top;}
a img.last {margin-right: 0; }
.box {
width: 850px;
height: auto;
overflow: hidden;
background: #666;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
padding-top: 10px;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
}
.box ul {
margin: 0px;
padding: 0px;
float: left;
list-style-type: none;
}
.box li {
width: 150px;
height: 100px;
float: left;
cursor: pointer;
display: inline;
margin: 0 10px 10px 0;
border: 5px solid #333;
}
#bg {
width: 100%;
height: 898px;
position: absolute;
left: 0px;
top: 0px;
background: #000;
filter: alpha(opacity : 50);
opacity: 0.5;
display: none;
}
#bg1 {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background: #000;
filter: alpha(opacity : 50);
opacity: 0.5;
display: none;
}
#bottom {
width: 215px;
height: 50px;
position: absolute;
left: 50%;
bottom: 0px;
margin: 0 0 0 -107px;
border: 1px solid #232323;
background: #444;
padding: 1px;
z-index: 1;
display: none;
}
#bottom ul {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
background: #000;
}
#bottom li {
background: url(../images/ico.jpg) no-repeat;
float: left;
display: inline;
margin: 8px 0 0 18px;
cursor: pointer;
}
#bottom li.prev {
width: 30px;
height: 33px;
background-position: 0 0;
}
#bottom li.next {
width: 30px;
height: 33px;
background-position: -35px 0;
}
#bottom li.img {
width: 30px;
height: 33px;
background-position: -106px 0;
}
#bottom li.close {
width: 31px;
height: 33px;
background-position: -70px 0;
}
#frame {
background: #fff;
padding: 3px;
position: absolute;
z-index: 2;
display: none;
filter: alpha(opacity : 0);
opacity: 0;
text-align: center;
}
#bottom1 {
width: 215px;
height: 50px;
position: absolute;
left: 50%;
bottom: 0px;
margin: 0 0 0 -107px;
border: 1px solid #232323;
background: #444;
padding: 1px;
z-index: 1;
display: none;
}
#bottom1 ul {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
list-style-type: none;
background: #000;
}
#bottom1 li {
background: url(../../images/ico.jpg) no-repeat;
float: left;
display: inline;
margin: 8px 0 0 18px;
cursor: pointer;
}
#bottom1 li.prev {
width: 30px;
height: 33px;
background-position: 0 0;
}
#bottom1 li.next {
width: 30px;
height: 33px;
background-position: -35px 0;
}
#bottom1 li.img {
width: 30px;
height: 33px;
background-position: -106px 0;
}
#bottom1 li.close {
width: 31px;
height: 33px;
background-position: -70px 0;
}
#frame1 {
background: #fff;
padding: 3px;
position: absolute;
z-index: 2;
display: none;
filter: alpha(opacity : 0);
opacity: 0;
text-align: center;
}
/
html,body {
height: 100%;
margin: 0px;
font-size: 12px;
}
.mydiv {
background-color: #FFCC66;
background:url(../images/loginbg.png) no-repeat;
border: 0px solid #f00;
overflow-y:auto;
overflow-x:auto;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index: 999;
width: 434px;
height: 238px;
left: 50%;
top: 50%;
margin-left: -200px !important; /*FF IE7 该值为本身宽的一半 */
margin-top: -80px !important; /*FF IE7 该值为本身高的一半*/
margin-top: 0px;
position: fixed !important; /* FF IE7*/
position: absolute; /*IE6*/
_top: expression(eval(document . compatMode &&
document . compatMode == 'CSS1Compat') ?
documentElement . scrollTop + ( document .
documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
document . body . scrollTop + ( document . body .
clientHeight - this . clientHeight )/ 2 ); /*IE5 IE5.5*/
}
.mydiv1 {
background-color: #FFCC66;
border: 0px solid #f00;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
overflow-y:auto;
overflow-x:auto;
z-index: 999;
width: 434px;
height: 238px;
left: 50%;
top: 50%;
margin-left: -200px !important; /*FF IE7 该值为本身宽的一半 */
margin-top: -80px !important; /*FF IE7 该值为本身高的一半*/
margin-top: 0px;
position: fixed !important; /* FF IE7*/
position: absolute; /*IE6*/
_top: expression(eval(document . compatMode &&
document . compatMode == 'CSS1Compat') ?
documentElement . scrollTop + ( document .
documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
document . body . scrollTop + ( document . body .
clientHeight - this . clientHeight )/ 2 ); /*IE5 IE5.5*/
}
.bg,.popIframe {
background-color: #666;
display: none;
width: 100%;
height: 100%;
left: 0;
top: 0; /*FF IE7*/
filter: alpha(opacity = 50); /*IE*/
opacity: 0.5; /*FF*/
z-index: 1;
position: fixed !important; /*FF IE7*/
position: absolute; /*IE6*/
_top: expression(eval(document . compatMode &&
document . compatMode == 'CSS1Compat') ?
documentElement . scrollTop + ( document .
documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
document . body . scrollTop + ( document . body .
clientHeight - this . clientHeight )/ 2 );
}
.popIframe {
filter: alpha(opacity = 0); /*IE*/
opacity: 0; /*FF*/
}
2.js事件:
<link rel="stylesheet" type="text/css" href="<%=path%>/css/16sucai.css" />
<script type="text/javascript">
function aa(id){
var ID = id.substring(1,2);
var obj2 = document.getElementById(ID);
showPigDyt(obj2);
}
function showInfo(id)
{
document.getElementById(id).style.display = "block";
}
function hiddenInfo(id)
{
document.getElementById(id).style.display = "none";
}
</script>
<script language="javascript">
//首页点击查看景点热门照片
function showPigDyt(obj2) {
var srcPath = obj2.name;
var ID= obj2.id;
var oBox = document.getElementById("con");
var oBg = document.getElementById("bg");
var oBot = document.getElementById("bottom");
var aBli = oBot.getElementsByTagName("li");
var oFrame = document.getElementById("frame");
//var aLi = oBox.getElementsByTagName("li");
var aLi=$("li[class='conn']");//获取所有a标签的li标签(集合)
//var aImg = oBox.getElementsByTagName("img");
var aImg=$("img[class='conn']");//获取所有a标签里的img标签(集合)
//alert(aImg);
var i = iNow = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onclick = function () {
with (oFrame.style) {
display = "block", top = this.offsetTop + "px", left = this.offsetLeft + "px", width = this.offsetWidth + "px", height = this.offsetHeight + "px";
}
//alert(srcPath);
oFrame.innerHTML = "<img id=\"" + ID + "\" onmouseover='upNext(this)' src=\"" + (srcPath) + "\" />";
var oImg = oFrame.getElementsByTagName("img")[0];
var iWidth;
var iHeight;
if(oImg.width < 600 || oImg.width == 0){
iWidth = 600;
}else{
iWidth = oImg.width;
}
if(oImg.width < 425 || oImg.height == 0){
iHeight = 425;
}else{
iHeight = oImg.height;
}
var iLeft = parseInt((document.documentElement.clientWidth / 2) - (iWidth / 2));
var iTop = parseInt((document.documentElement.clientHeight / 2) - (iHeight / 2) - 50);
with (oImg.style) {
height = width = "100%";
}
startMove(oFrame, {opacity:100, left:iLeft, top:iTop, width:iWidth, height:iHeight});
oBg.style.display = "block";
oBot.style.display = "block";
iNow = this.index + 1;
};
}
document.onmousedown = function () {
return false;
};
aBli[0].onclick = function () { //箭头向左事件触发
if(ID == 0){
ID = aLi.length;
}
ID--;
var pathImg = document.getElementById(ID).name;
oFrame.innerHTML = "<img id=\"" + ID + "\" onmouseover='upNext(this)' src=\"" + pathImg + "\" width=\"100%\" height=\"100%\" />";
};
aBli[1].onclick = function () {
oFrame.style.cursor = "move";
oFrame.onmousedown = function (e) {
var oEvent = e || event;
var X = oEvent.clientX - oFrame.offsetLeft;
var Y = oEvent.clientY - oFrame.offsetTop;
document.onmousemove = function (e) {
var oEvent = e || event;
var L = oEvent.clientX - X;
var T = oEvent.clientY - Y;
if (L < 0) {
L = 0;
} else {
if (L > document.documentElement.clientWidth - oFrame.offsetWidth) {
L = document.documentElement.clientWidth - oFrame.offsetWidth;
}
}
if (T < 0) {
T = 0;
} else {
if (T > document.documentElement.clientHeight - oFrame.offsetHeight) {
T = document.documentElement.clientHeight - oFrame.offsetHeight;
}
}
oFrame.style.left = L + "px";
oFrame.style.top = T + "px";
oFrame.style.margin = 0;
return false;
};
document.onmouseup = function () {
document.onmouseup = null;
document.onmousemove = null;
};
return false;
};
};
aBli[2].onclick = function () { //箭头向右事件触发
if(ID == (aLi.length-1)){
ID = -1;
}
ID++;
var pathImg = document.getElementById(ID).name;
oFrame.innerHTML = "<img id=\"" + ID + "\" onmouseover='upNext(this)' src=\"" + pathImg + "\" width=\"100%\" height=\"100%\" />";
};
aBli[3].onclick = function () { //箭头关闭事件触发
//alert("32" + iNow - 1);
//alert("32" + aImg[iNow - 1].offsetTop);
startMove(oFrame, {opacity:0, left:aImg[iNow - 1].offsetLeft, top:aImg[iNow - 1].offsetTop, width:150, height:100}, function () {
oFrame.style.display = "none";
oBg.style.display = "none";
oBot.style.display = "none";
oFrame.onmousedown = null;
oFrame.style.cursor = "auto";
});
};
}
function upNext(bigimg){
var oBox = document.getElementById("con");
//var aLi = oBox.getElementsByTagName("li");
var aLi=$("li[class='conn']");//获取所有a标签的li标签
var ID = bigimg.id;
var leftId;
var rightId;
if(ID == 0){
leftId = aLi.length;
rightId = 1;
}else if(ID == (aLi.length-1)){
leftId = (aLi.length-1);
rightId = 0;
}else{
var leftId = ID++;
var rightId = ID--;
}
var leftpath = document.getElementById(--leftId).name;
var rightpath = document.getElementById(rightId).name;
var lefturl = "<img id=\"" + leftId + "\" onmouseover='upNext(this)' src=\"" + leftpath + "\" width=\"100%\" height=\"100%\" />";
var righturl = "<img id=\"" + rightId + "\" onmouseover='upNext(this)' src=\"" + rightpath + "\" width=\"100%\" height=\"100%\" />";
var width = bigimg.width;
var height = bigimg.height;
var imgurl = righturl;
var oFrame = document.getElementById("frame");
bigimg.onmousemove=function(){
if(event.offsetX<width/2){
bigimg.style.cursor = 'url(images/arr_left.cur),auto';
imgurl = lefturl;
}else{
bigimg.style.cursor = 'url(images/arr_right.cur),auto';
imgurl = righturl;
}
}
bigimg.onmouseup=function(){
if(event.offsetX < width/2){
oFrame.innerHTML = lefturl;
}else{
oFrame.innerHTML = righturl;
}
}
}
function startMove(obj, json, onEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
doMove(obj, json, onEnd);
}, 30);
}
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function doMove(obj, json, onEnd) {
var attr = "";
var bStop = true;
for (attr in json) {
var iCur = 0;
if (attr == "opacity") {
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
}
var iSpeed = (json[attr] - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (json[attr] != iCur) {
bStop = false;
}
if (attr == "opacity") {
obj.style.filter = "alpha(opacity:" + (iCur + iSpeed) + ")";
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + "px";
}
}
if (bStop) {
clearInterval(obj.timer);
if (onEnd) {
onEnd();
}
}
}
</javascript>
3.页面div布局:
- <li class="conn">
<a onclick="aa(this.id)" id="s${strs.index }">
<img class="conn" id="${strs.index }" style="height: 116px;width: 116px" src="<%=WholeProperties.IMAGE_IMAGE_URL %>/${image.imagePathSmall}" onclick="showPigDyt(this,${image.imagePathMiddle})" name="<%=WholeProperties.IMAGE_IMAGE_URL %>/${image.imagePathMiddle}"/></a>
</li>
<li style="line-height:20px">
<input type="checkbox" id="upPicID" name="upPicID" value="${image.id }" />
<c:choose>
<c:when test="${fn:length(image.imageName) > 6}">
<c:out value="${fn:substring(image.imageName, 0, 6)}..." />
</c:when>
<c:otherwise>
<c:out value="${image.imageName}" />
</c:otherwise>
</c:choose>
</li>
<li style="line-height:20px">上传时间:<c:out value="${fn:substring(image.uploadTime,0,9)}"></c:out></li>
<li style="line-height:20px">图片大小:${image.imageSize }</li>
</td>
</c:forEach>
</tr>
<% } %>
</c:otherwise>
</c:choose>
</table>
<div class="shadow_right"></div>
<div class="pic_right"></div>
<div id="bg"></div>
<div id="bottom">
<li class="prev"></li>
<li class="img"></li>
<li class="next"></li>
<li class="close"></li>
</div>
<div id="frame"></div>
发表评论
-
JS--事件
2012-04-09 11:37 9581.js退出当前页面,一般常用于做系统登录的退出: c ... -
JS前端验证(验证页面属性格式)
2012-03-19 10:11 910@param:做验证的正则表达式 /^([a-zA-Z0- ... -
jQuery datatables使用 ( 封装类实现前台分页 二 续...)
2011-10-12 10:58 2924封装的公用分页的工具 ... -
jQuery datatables使用 ( 封装类实现前台分页 二 续...)
2011-10-12 10:57 0封装的公用分页的工具 ... -
Dom与JavaScript
2011-10-10 11:01 7901.javaScript 基本概念: Ja ... -
jQuery datatables使用 ( 前台页面实现分页 简单案例一 未完待续...)
2011-09-29 14:37 2853<%@ page language="java ... -
jQuery datatables使用 ( 前台页面实现分页 )
2011-09-29 14:37 1<%@ page language="java ... -
JQuery验证jsp页面属性是否为空
2011-09-21 14:08 1047说明:验证是否为空的前提首先要保证是在提交form之前验证的, ... -
HTML页面的select标签
2011-08-17 15:27 821<select name="dep" ... -
HTML页面的select标签
2011-08-17 15:26 659<select name="dep" ... -
JS比较Date日期时间的大小
2011-08-09 09:10 1274Date.parse("2010-10-10 12: ... -
js字母与ASC2值的转化
2011-08-05 10:44 1173alert(String.fromCharCode(65)); ...
相关推荐
本篇文章主要是对页面图片浮动左右滑动效果的简单实现案例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
网页上图片浮动效果,javascript,效果一般
jQuery CSS图片浮动层效果
js 图片广告可以左浮动 右浮动 底部浮动 底部浮动是一直置于底部
NULL 博文链接:https://luanxiyuan.iteye.com/blog/1694302
本资源是关于网页图片的浮动实现,主要有两种实现方式:1)z字形实现 2)反弹实现;
jQuery鼠标滚动条到页面底部浮动层滑动弹出信息 jQuery鼠标滚动条到页面底部浮动层滑动弹出信息
js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现js浮动广告实现
当一个浮动layout的滑动到顶部时,这个浮动layout就悬停下来,当屏幕往下滑动时,浮动layout也跟着往下移动
左右广告 浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告浮动广告 左右广告
实现左右滑动菜单功能,可自定义界面——SlidingMenu
这是一款使用jQuery和css3制作的鼠标滑过图片效果。该鼠标滑过效果中所有图片被放到网格中,鼠标hover其中一张图片时,相邻的图片也会浮动起来,效果十分炫酷。
jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示
根据滚动条移动的多层浮动效果,实现页面广告效果。
通过学院展示网站介绍目前流行的flex布局技术、float浮动技术以及postion定位技术以及使用jq库实现图片轮播放大等效果。压缩包里面包括ppt、案例、项目源码等资料齐全。可用于简单的网页制作课程答辩等
jQuery+CSS图片浮动层效果图片缩图浮动属专题图片代码
我也是在学习的过程在网上找的 找了半天才找到 希望对你们有用
jquery div页面图片浮动层鼠标拖动效果代码.zip