其实下面的内容是我从凤凰网图片新闻里截取出来的。我要弄个类似的图片管理。
大家也可以看下凤凰网里的效果:http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494480_0.shtml。我就想要下面有小图片预览的区域。我截取出来,但是不能滚动和点击。请高手看看
tpshow.htm<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<link href="x_img/cssphoto.css" rel="stylesheet" type="text/css">
</head><body>
<SCRIPT type=text/javascript src="x_img/slide.hd.js"></SCRIPT>
<DIV class=photoList>
<DIV class=before><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/14/14504677_0.shtml"
target=_blank><IMG
src="x_img/test/11.jpg"
width=106 height=70></A>
<P><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/14/14504677_0.shtml"
target=_blank><< 上一图集</A></P></DIV>
<DIV class=picList>
<DIV class=l1><IMG id=scrollleft
src="x_img/icon_28.gif" width=22 height=58></DIV>
<DIV class=l2>
<DIV style="POSITION: relative" class=listM>
<UL style="POSITION: absolute; WIDTH: 1180px; LEFT: 0px" id=scrollcontent>
<LI><A href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_0.shtml"><IMG
src="x_img/test/1.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_1.shtml"><IMG
src="x_img/test/2.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_2.shtml"><IMG
src="x_img/test/3.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_3.shtml"><IMG
src="x_img/test/4.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_4.shtml"><IMG
src="x_img/test/5.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_5.shtml"><IMG
src="x_img/test/6.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_6.shtml"><IMG
src="x_img/test/7.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_7.shtml"><IMG
src="x_img/test/8.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_8.shtml"><IMG
src="x_img/test/9.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_9.shtml"><IMG
src="x_img/test/10.jpg"
width=106 height=70></A> </LI></UL></DIV>
<DIV class=scrollBar>
<DIV style="VISIBILITY: visible; LEFT: 0px" id=scrollbar class=drag><IMG
src="x_img/icon_39.gif" width=162 height=19></DIV></DIV></DIV>
<DIV class=l3><IMG id=scrollright
src="x_img/icon_31.gif" width=22
height=58></DIV></DIV>
<DIV class=after><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494480_0.shtml"
target=_blank><IMG
src="x_img/test/15.jpg"
width=106 height=70></A>
<P><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494480_0.shtml"
target=_blank>下一图集 >></A></P></DIV>
<DIV class=clear></DIV></DIV>
</body></html>slide.hd.jsvar Drag={
obj: null,
leftTime: null,
rightTime: null,
init: function (o,minX,maxX,btnRight,btnLeft) {
o.onmousedown=Drag.start;
o.hmode=true;
if(o.hmode&&isNaN(parseInt(o.style.left))) { o.style.left="0px"; }
if(!o.hmode&&isNaN(parseInt(o.style.right))) { o.style.right="0px"; }
o.minX=typeof minX!='undefined'?minX:null;
o.maxX=typeof maxX!='undefined'?maxX:null;
o.onDragStart=new Function();
o.onDragEnd=new Function();
o.onDrag=new Function();
btnLeft.onmousedown=Drag.startLeft;
btnRight.onmousedown=Drag.startRight;
btnLeft.onmouseup=Drag.stopLeft;
btnRight.onmouseup=Drag.stopRight;
},
start: function (e) {
var o=Drag.obj=this;
e=Drag.fixE(e);
var x=parseInt(o.hmode?o.style.left:o.style.right);
o.onDragStart(x);
o.lastMouseX=e.clientX;
if(o.hmode) {
if(o.minX!=null) { o.minMouseX=e.clientX-x+o.minX; }
if(o.maxX!=null) { o.maxMouseX=o.minMouseX+o.maxX-o.minX; }
} else {
if(o.minX!=null) { o.maxMouseX= -o.minX+e.clientX+x; }
if(o.maxX!=null) { o.minMouseX= -o.maxX+e.clientX+x; }
}
document.onmousemove=Drag.drag;
document.onmouseup=Drag.end;
return false;
},
drag: function (e) {
e=Drag.fixE(e);
var o=Drag.obj;
var ex=e.clientX;
var x=parseInt(o.hmode?o.style.left:o.style.right);
var nx;
if(o.minX!=null) { ex=o.hmode?Math.max(ex,o.minMouseX):Math.min(ex,o.maxMouseX); }
if(o.maxX!=null) { ex=o.hmode?Math.min(ex,o.maxMouseX):Math.max(ex,o.minMouseX); }
nx=x+((ex-o.lastMouseX)*(o.hmode?1:-1));
$("scrollcontent").style[o.hmode?"left":"right"]=(-nx*barUnitWidth)+"px";
Drag.obj.style[o.hmode?"left":"right"]=nx+"px";
Drag.obj.lastMouseX=ex;
Drag.obj.onDrag(nx);
return false;
},
startLeft: function () {
Drag.leftTime=setInterval("Drag.scrollLeft()",1);
},
scrollLeft: function () {
var c=$("scrollcontent");
var o=$("scrollbar");
if((parseInt(o.style.left.replace("px",""))<(590-162-10))&&(parseInt(o.style.left.replace("px",""))>=0)) {
o.style.left=(parseInt(o.style.left.replace("px",""))+1)+"px";
c.style.left=(-(parseInt(o.style.left.replace("px",""))+1)*barUnitWidth)+"px";
} else {
Drag.stopLeft();
}
},
stopLeft: function () {
clearInterval(Drag.leftTime);
},
startRight: function () {
Drag.rightTime=setInterval("Drag.scrollRight()",1);
},
scrollRight: function () {
var c=$("scrollcontent");
var o=$("scrollbar");
if((parseInt(o.style.left.replace("px",""))<=(590-162-10))&&(parseInt(o.style.left.replace("px",""))>0)) {
o.style.left=(parseInt(o.style.left.replace("px",""))-1)+"px";
c.style.left=(-(parseInt(o.style.left.replace("px",""))-1)*barUnitWidth)+"px";
} else {
Drag.stopRight();
}
},
stopRight: function () {
clearInterval(Drag.rightTime);
},
end: function () {
document.onmousemove=null;
document.onmouseup=null;
Drag.obj.onDragEnd(parseInt(Drag.obj.style[Drag.obj.hmode?"left":"right"]));
Drag.obj=null;
},
fixE: function (e) {
if(typeof e=='undefined') { e=window.event; }
if(typeof e.layerX=='undefined') { e.layerX=e.offsetX; }
return e;
}
};
var scrollbar = $('scrollbar');
var scrollleft = $('scrollleft');
var scrollright = $('scrollright');
if(scrollbar&&scrollright){
Drag.init(scrollbar,0,418,scrollleft,scrollright);
}
function hideRecommended() {
($("tab").style.display=="none")?($("tab").style.display=""):($("tab").style.display="none");
($("tab").style.display=="none")?($("hidebar").style.backgroundImage="url(http://img.ifeng.com/hdslide/icon_46.gif)"):($("hidebar").style.backgroundImage="url(http://img.ifeng.com/hdslide/icon_47.gif)");
}
大家也可以看下凤凰网里的效果:http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494480_0.shtml。我就想要下面有小图片预览的区域。我截取出来,但是不能滚动和点击。请高手看看
tpshow.htm<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<link href="x_img/cssphoto.css" rel="stylesheet" type="text/css">
</head><body>
<SCRIPT type=text/javascript src="x_img/slide.hd.js"></SCRIPT>
<DIV class=photoList>
<DIV class=before><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/14/14504677_0.shtml"
target=_blank><IMG
src="x_img/test/11.jpg"
width=106 height=70></A>
<P><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/14/14504677_0.shtml"
target=_blank><< 上一图集</A></P></DIV>
<DIV class=picList>
<DIV class=l1><IMG id=scrollleft
src="x_img/icon_28.gif" width=22 height=58></DIV>
<DIV class=l2>
<DIV style="POSITION: relative" class=listM>
<UL style="POSITION: absolute; WIDTH: 1180px; LEFT: 0px" id=scrollcontent>
<LI><A href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_0.shtml"><IMG
src="x_img/test/1.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_1.shtml"><IMG
src="x_img/test/2.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_2.shtml"><IMG
src="x_img/test/3.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_3.shtml"><IMG
src="x_img/test/4.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_4.shtml"><IMG
src="x_img/test/5.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_5.shtml"><IMG
src="x_img/test/6.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_6.shtml"><IMG
src="x_img/test/7.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_7.shtml"><IMG
src="x_img/test/8.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_8.shtml"><IMG
src="x_img/test/9.jpg"
width=106 height=70></A></LI>
<LI><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494551_9.shtml"><IMG
src="x_img/test/10.jpg"
width=106 height=70></A> </LI></UL></DIV>
<DIV class=scrollBar>
<DIV style="VISIBILITY: visible; LEFT: 0px" id=scrollbar class=drag><IMG
src="x_img/icon_39.gif" width=162 height=19></DIV></DIV></DIV>
<DIV class=l3><IMG id=scrollright
src="x_img/icon_31.gif" width=22
height=58></DIV></DIV>
<DIV class=after><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494480_0.shtml"
target=_blank><IMG
src="x_img/test/15.jpg"
width=106 height=70></A>
<P><A
href="http://news.ifeng.com/photo/hdnews/detail_2012_05/13/14494480_0.shtml"
target=_blank>下一图集 >></A></P></DIV>
<DIV class=clear></DIV></DIV>
</body></html>slide.hd.jsvar Drag={
obj: null,
leftTime: null,
rightTime: null,
init: function (o,minX,maxX,btnRight,btnLeft) {
o.onmousedown=Drag.start;
o.hmode=true;
if(o.hmode&&isNaN(parseInt(o.style.left))) { o.style.left="0px"; }
if(!o.hmode&&isNaN(parseInt(o.style.right))) { o.style.right="0px"; }
o.minX=typeof minX!='undefined'?minX:null;
o.maxX=typeof maxX!='undefined'?maxX:null;
o.onDragStart=new Function();
o.onDragEnd=new Function();
o.onDrag=new Function();
btnLeft.onmousedown=Drag.startLeft;
btnRight.onmousedown=Drag.startRight;
btnLeft.onmouseup=Drag.stopLeft;
btnRight.onmouseup=Drag.stopRight;
},
start: function (e) {
var o=Drag.obj=this;
e=Drag.fixE(e);
var x=parseInt(o.hmode?o.style.left:o.style.right);
o.onDragStart(x);
o.lastMouseX=e.clientX;
if(o.hmode) {
if(o.minX!=null) { o.minMouseX=e.clientX-x+o.minX; }
if(o.maxX!=null) { o.maxMouseX=o.minMouseX+o.maxX-o.minX; }
} else {
if(o.minX!=null) { o.maxMouseX= -o.minX+e.clientX+x; }
if(o.maxX!=null) { o.minMouseX= -o.maxX+e.clientX+x; }
}
document.onmousemove=Drag.drag;
document.onmouseup=Drag.end;
return false;
},
drag: function (e) {
e=Drag.fixE(e);
var o=Drag.obj;
var ex=e.clientX;
var x=parseInt(o.hmode?o.style.left:o.style.right);
var nx;
if(o.minX!=null) { ex=o.hmode?Math.max(ex,o.minMouseX):Math.min(ex,o.maxMouseX); }
if(o.maxX!=null) { ex=o.hmode?Math.min(ex,o.maxMouseX):Math.max(ex,o.minMouseX); }
nx=x+((ex-o.lastMouseX)*(o.hmode?1:-1));
$("scrollcontent").style[o.hmode?"left":"right"]=(-nx*barUnitWidth)+"px";
Drag.obj.style[o.hmode?"left":"right"]=nx+"px";
Drag.obj.lastMouseX=ex;
Drag.obj.onDrag(nx);
return false;
},
startLeft: function () {
Drag.leftTime=setInterval("Drag.scrollLeft()",1);
},
scrollLeft: function () {
var c=$("scrollcontent");
var o=$("scrollbar");
if((parseInt(o.style.left.replace("px",""))<(590-162-10))&&(parseInt(o.style.left.replace("px",""))>=0)) {
o.style.left=(parseInt(o.style.left.replace("px",""))+1)+"px";
c.style.left=(-(parseInt(o.style.left.replace("px",""))+1)*barUnitWidth)+"px";
} else {
Drag.stopLeft();
}
},
stopLeft: function () {
clearInterval(Drag.leftTime);
},
startRight: function () {
Drag.rightTime=setInterval("Drag.scrollRight()",1);
},
scrollRight: function () {
var c=$("scrollcontent");
var o=$("scrollbar");
if((parseInt(o.style.left.replace("px",""))<=(590-162-10))&&(parseInt(o.style.left.replace("px",""))>0)) {
o.style.left=(parseInt(o.style.left.replace("px",""))-1)+"px";
c.style.left=(-(parseInt(o.style.left.replace("px",""))-1)*barUnitWidth)+"px";
} else {
Drag.stopRight();
}
},
stopRight: function () {
clearInterval(Drag.rightTime);
},
end: function () {
document.onmousemove=null;
document.onmouseup=null;
Drag.obj.onDragEnd(parseInt(Drag.obj.style[Drag.obj.hmode?"left":"right"]));
Drag.obj=null;
},
fixE: function (e) {
if(typeof e=='undefined') { e=window.event; }
if(typeof e.layerX=='undefined') { e.layerX=e.offsetX; }
return e;
}
};
var scrollbar = $('scrollbar');
var scrollleft = $('scrollleft');
var scrollright = $('scrollright');
if(scrollbar&&scrollright){
Drag.init(scrollbar,0,418,scrollleft,scrollright);
}
function hideRecommended() {
($("tab").style.display=="none")?($("tab").style.display=""):($("tab").style.display="none");
($("tab").style.display=="none")?($("hidebar").style.backgroundImage="url(http://img.ifeng.com/hdslide/icon_46.gif)"):($("hidebar").style.backgroundImage="url(http://img.ifeng.com/hdslide/icon_47.gif)");
}
解决方案 »
- 急~~~~~~~~求助两个iframe之间传值问题
- JS 字体放大缩小
- 如何使用javascript与cookie保存层的拖动后位置??
- js问题如何触发<input type=file>控件选择路径操作完毕的事件
- 如何用javascript创建表单结点?
- 判断某个html控件是否为checkbox,应该用什么函数
- js特效如何实现tab切换啊
- 一个Microsoft.XMLHTTP的问题 把下面这段代码存为html文件 双击就可以正常运行,放于IIS下以域名来访问就不行 始终报错怎么回事?
- 各位高手请看下面的代码如何添加到asp的代码中?谢谢!!!
- 父子窗口问题???先谢谢解答
- 怎么让DIV失去焦点后隐藏自身
- 问个js的canvas的问题
你不能只截js文件,其对应的CSS文件也需要的.
http://www.lanrentuku.com/js/xiangce.html