 |
|
ผมทำภาพวิ่งโดยเอาโค๊ดมาจาก เว็บ dynamicdrive ครับ เป็นสคริป ลองดึงภาพ แบบธรรมดา โดยไม่ใช้คำสั่ง php ภาพโชว์และวิ่งปกติครับ แต่พอแทรกคำสั่ง phpเข้าไปภาพไม่โชว์ครับ...แต่เอาคำสั่ง php อันเดียวกัน ไป วางไว้นอก แท็กที่ทำภาพวิ่ง แล้วภาพก็โชว์ครับ..รบกวนดูโค๊ดให้ด้วยครับ..มีสองไฟล์นะครับ
1 ไฟล์แรกเป็นคำสั่ง js ครับ
2 ไฟล์ที่สอง เป็นหน้าแสดงผลครับ..
**********ไฟล์แรก js ครับ*********
/* Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
///////////////// DO NOT EDIT /////////////////
function marqueeInit(config){
if(!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function(){
if(!document.createElement) return;
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0, tTRE = [new RegExp('^\\s*$'), new RegExp('^\\s*'), new RegExp('\\s*$')],
req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = new RegExp('(-(.))');
String.prototype.encamel = function(s, m){
s = this;
while((m = s.match(dash)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
@end @*/
if(!ie5){
dash = new RegExp('-(.)', 'g');
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
}
if(ie && iever < 8){
marqueeInit.table = [];
window.attachEvent('onload', function(){
marqueeInit.OK = true;
for(var i = 0; i < marqueeInit.table.length; ++i)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el){
while((el = el.parentNode))
if(el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id){
if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
marqueeInit.table.push(id);
return;
}
if(!document.getElementById(id))
setTimeout(function(){marqueeInit.run(id);}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag){
var r = [], i = 0, e;
while((e = tag.firstChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while((e = tag.lastChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if((e = tag.firstChild) && e.nodeType == 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if((e = tag.lastChild) && e.nodeType == 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse == 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete == 'boolean' && ims[i].complete && !window.opera)
ic++;
else {
ims[i].onload = function(){
if(++ic == ims.length)
cObj.setup();
};
}
if(ic == ims.length)
this.setup();
}
}
else this.setup()
}
Marq.prototype.setup = function(){
if(this.mq.setup) return;
this.mq.setup = this;
var s, cObj = this;
if(this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if(this.mq.mouse == 'cursor driven'){
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
if(this.mq.moveatleast){
this.mq.inc = this.mq.moveatleast;
if(this.mq.savedirection){
if(this.mq.savedirection == 'reverse'){
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction == 'right'? 'left' : 'right';};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;};
}
} else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
}
else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s)
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function(){
var cObj = this;
if(this.mq.inc){
this.mq.inc -= 1;
this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
}
}
Marq.prototype.runit = function(){
var cObj = this, d = this.mq.direction == 'right'? 1 : -1;
if(this.mq.stopped || this.mq.stopMarquee){
setTimeout(function(){cObj.runit();}, 300);
return;
}
if(this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if(d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if(d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e){
e = e || window.event;
if(this.timer) clearTimeout(this.timer);
var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX == 'number'?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2, rb = (w + this.r) / 2;
while((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb? 'left' : 'right';
this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e){
if(e && e.relatedTarget){var c = e.relatedTarget; if(c == this.c) return true;
while ((c = c.parentNode)) if(c == this.c) return true;}
return false;
}
function resize(){
for(var s, m, i = 0; i < marqueeInit.ar.length; ++i){
if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
while(m.c.offsetWidth > m.w - s)
m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
if (window.addEventListener)
window.addEventListener('resize', resize, false);
else if (window.attachEvent)
window.attachEvent('onresize', resize);
})();
-------------------------------------------------------------------------------------------------------------------------------------
*************ไฟล์ที่สอง เป็นไฟล์สำหรับแสดงผลครับ*********************************
<script type="text/javascript" src="../js/crawler.js">
/*
Text and/or Image Crawler Script ?2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>
<style type="text/css">
<!--
.bottom-menu {color: #ffffff;font-size: 12px;}
.bottom-menu a{color: #ffffff;text-decoration: none;}
.bottom-menu a:hover {color: #FF0000;}
.body_txt {
color: #000000;
text-align: justify;
vertical-align: top;
padding-top: 6px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
font-family: Tahoma, Arial;
font-size: 12px;
}
-->
</style>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<?
$host = "localhost";
$user = "root";
$pwd = "";
$db = "testpicture";
$connect=@mysql_connect($host,$user,$pwd)or die ("ติดต่อฐานข้อมูลไม่ได้");
@mysql_select_db($db,$connect) or die ("เลือกฐานข้อมูลไม่ได้");
?>
<div class="marquee" id="mycrawler">
<? /*
$query_picture = @mysql_query("select * from tb_products where tb_product_status ='1' order by tb_product_id asc");
while($fetch_picture = @mysql_fetch_array($query_picture)){
<a href="products.php?tb_product_id=<? echo $fetch_picture['tb_product_id'];?>"><img src="../file_products/<? echo $fetch_picture['tb_product_image'];?>" width="100" height="100" border="0" /></a>
<?
}*/
?>
<a href="products.php?tb_product_id=1">
<img src="../file_products/product_1020090525092849.jpg" height="100"></a>
<a href="products.php?tb_product_id=2">
<img src="../file_products/product_1320090528120705.jpg" height="100"></a>
<a href="products.php?tb_product_id=3">
<img src="../file_products/product_1420090516050451.JPG" height="100"></a>
<a href="products.php?tb_product_id=4">
<img src="../file_products/product_1520090516041341.JPG" height="100"></a>
<a href="products.php?tb_product_id=5">
<img src="../file_products/product_1720090416010900.jpg" height="100"></a>
<a href="products.php?tb_product_id=6">
<img src="../file_products/product_1820090528084525.jpg" height="100"></a>
<a href="products.php?tb_product_id=7">
<img src="../file_products/product_1920090523023013.JPG" height="100"></a>
<a href="products.php?tb_product_id=8">
<img src="../file_products/product_1920090527014847.jpg" height="100"></a>
<a href="products.php?tb_product_id=9">
<img src="../file_products/product_2120090520035146.jpg" height="100"></a>
<a href="products.php?tb_product_id=10">
<img src="../file_products/product_2320090519050857.jpg" height="100"></a>
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '999px',
'background': 'lightyellow',
'border': '1px solid #CC3300'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true
});
</script>
<?
$query_picture = @mysql_query("select * from tb_products where tb_product_status ='1' order by tb_product_id asc");
while($fetch_picture = @mysql_fetch_array($query_picture)){
?>
<a href="products.php?tb_product_id=<? echo $fetch_picture['tb_product_id'];?>"><img src="../file_products/<? echo $fetch_picture['tb_product_image'];?>" width="100" height="100" border="0" /></a>
<?
}
?>
</td>
</tr>
</table>
-------------------------------------------------------
คำสั่ง php ที่ มาร์คไว้คือคำสั่งที่ต้องการดึงภาพจากแฟ้มแล้วโชว์ในแท็ก div ครับ (แต่ภาพไม่โชว์ออกมา )แต่พอดึงภาพจากแฟ้มโดยตรง แล้วภาพกับโชว์ปกติ พอลองเอาคำสั่งเดียวกัน มาวางนอกแท็ก ก็ภาพก็โชว์ครับ...รบกวนด้วยครับ..
Tag : - - - -
|
|
|
 |
 |
 |
 |
| Date :
2009-08-31 10:27:32 |
By :
slingxer1156 |
View :
1390 |
Reply :
0 |
|
 |
 |
 |
 |
|
|
|
|
 |
