主页 个人前端笔记 jscrollpane插件,水平呈现图片
admin
发表于2012-11-11 19:13:36    只看楼主 楼主
头衔:  精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数:  502
金币数:  186
短消息
<style type="text/css" id="page-css">
/* Styles specific to this particular page */
*{margin:0px;padding:0px;}
#content{margin:0px;padding:0px;width:900px;}
#page{width:900px;}
.scroll-pane
{
width: 100%;
height: 300px;
overflow-x: auto;
overflow-y: hidden;
}
.horizontal-only
{
height: auto;
max-height: 300px;
}
.img
{
float:left;
}

</style>

 <script type="text/javascript" id="sourcecode">
   document.onreadystatechange = function()
     {           
     if (document.readyState == "complete")
      {
document.getElementById("bg").style.display="none";
}
}
   function getWidth()
   {
var w = 0;
$("#imgp img").each(function(){
w += parseInt($(this).css(´width´));
});
//alert(w);
$("img").css(´display´,"block");
$("#imgp").css(´width´,w+2);
   }
$(function()
{
$(´.scroll-pane´).jScrollPane(
{
showArrows: true,
autoReinitialise: true,
horizontalDragMinWidth: 43,
horizontalDragMaxWidth: 43
}
);
});
</script>

代码中调用图片

<p id="imgp" style="20000px;">

<img src="img.php?imgpath=   onload="getWidth();"


生成缩略图程序代码

<?php
$imgsrc = $_GET[´imgpath´];
 
$arr = getimagesize($imgsrc);            
header("Content-type: image/jpg");
// $imgWidth = $imgwidth;
$imgHeight = $arr[1];
$scale=$arr[1]/300;
$imgWidth=$arr[0]*300/$arr[1];
// Create image and define colors
$imgsrc = imagecreatefromjpeg($imgsrc);
$image = imagecreatetruecolor($imgWidth, 300);
imagecopyresampled($image, $imgsrc, 0, 0, 0, 0,$imgWidth,300,$arr[0], $arr[1]);
imagejpeg($image, null, 100);
imagedestroy($image);

?>
 
admin
发表于2012-11-11 19:13:47 1楼
头衔:  精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数:  502
金币数:  186
短消息
上述代码用于个人记忆。

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理