全国咨询热线:18720358503

wordpress应用jQuery调节照片宽高宽比

类别:媒体报道 发布时间:2021-04-08 浏览人次:

今日凉一SEO来谈一谈Wordpress主题风格制作的关键点难题 
一般用的多的方式便是在CSS中应用overflow:hidden 和 max-width:600px 来限定,可是实际效果没理想 
凉一今日共享一下较为极致的方式 
jQuery调节照片宽高宽比 .jpg wordpress应用jQuery调节照片宽高宽比 
等占比调节照片的高和宽 
方式一:jQuery 编码(荐) 
如今大部分分的网站都应用了 jQuery库,因此大家只需加上下边的 jQuery 编码就可以完成 
$(document).ready(function() {
 $('.post img').each(function() {
 var maxWidth = 600; // 照片较大总宽
 var maxHeight = 2000; // 照片较大高宽比
 var ratio = 0; // 放缩占比
 var width = $(this).width(); // 照片具体总宽
 var height = $(this).height(); // 照片具体高宽比
 // 查验照片是不是超宽
 if(width maxWidth){
 ratio = maxWidth / width; // 测算放缩占比
 $(this).css("width", maxWidth); // 设置具体显示信息总宽
 height = height * ratio; // 测算等占比放缩后的高宽比
 $(this).css("height", height * ratio); // 设置等占比放缩后的高宽比
 // 查验照片是不是极高
 if(height maxHeight){
 ratio = maxHeight / height; // 测算放缩占比
 $(this).css("height", maxHeight); // 设置具体显示信息高宽比
 width = width * ratio; // 测算等占比放缩后的高宽比
 $(this).css("width", width * ratio); // 设置等占比放缩后的高宽比
});
二、纯Javascript编码 
 script type="text/javascript" 
function ResizeImage(image, 插画图片较大总宽, 插画图片较大高宽比)
 if (image.className == "Thumbnail")
 w = image.width;
 h = image.height;
 if( w == 0 || h == 0 )
 image.width = maxwidth;
 image.height = maxheight;
 else if (w h)
 if (w maxwidth) image.width = maxwidth;
 else
 if (h maxheight) image.height = maxheight;
 image.className = "ScaledThumbnail";
 /script 
完成实际效果和上边第一种一样,只不过是不用引入jQuery 库 
.jpg
赞 (0) 打赏主播 共享


WordPress添加分页导航菜单源码 WordPress分页查询导航栏莱单是一个网站不可或缺的原素 今日凉一SEO就和大伙儿共享一下应用了好长时间的WordPress编码完成分页查询导航栏的方式 导航栏的实际效果如图所示所显示: WordPress加上分页查询导航栏莱单源代码 完成的方式非常简单来和凉逐一起來瞎折腾吧 第一步  寻找文档functions.php 开启而且加上以下编码function par_pagenavi($range = 9){ global $paged, $wp_query; if ( !$max_page ) {$max_page = $wp_query- max_num_pages;} if($max_page 1){if(!$paged){$paged = 1;} if($paged != 1){echo " a href='" . get_pagenum_link(1) . "' title='自动跳转到' 回到 /a } previous_posts_link(' 上一页 '); if($max_page $range){ if($paged $range){for($i = 1; $i = ($range + 1); $i++){echo " a href='" . get_pagenum_link($i) ."'"; if($i==$paged)echo " ";echo " $i /a }} elseif($paged = ($max_page - ceil(($range/2)))){ for($i = $max_page - $range; $i = $max_page; $i++){echo " a href='" . get_pagenum_link($i) ."'"; if($i==$paged)echo " ";echo " $i /a }} elseif($paged = $range $paged ($max_page - ceil(($range/2)))){ for($i = ($paged - ceil($range/2)); $i = ($paged + ceil(($range/2))); $i++){echo " a href='" . get_pagenum_link($i) ."'";if($i==$paged) echo " ";echo " $i /a }}} else{for($i = 1; $i = $max_page; $i++){echo " a href='" . get_pagenum_link($i) ."'"; if($i==$paged)echo " ";echo " $i /a }} next_posts_link(' 下一页 '); if($paged != $max_page){echo " a href='" . get_pagenum_link($max_page) . "' title='自动跳转到最终一页' 最终一页 /a }}}第二步 加上以下的css款式到你的style.css中里边(自然你还可以自身写css款式,终究凉一喜爱的不意味着每一个人都喜爱) .page_navi{overflow:hidden;width:100%;text-align:center}.page_navi a{height:36px;border:1px solid #DDD;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;color:#888;text-decoration:none;line-height:36px;margin:2px;padding:3px 8px}.page_navi a:hover,.page_navi a.current{border:1px solid #FFBB76;color:#FF7200;font-weight:bolder}第三步 在你必须显示信息的地区(如模板主题风格的index.php、archive.php、category.php、search.php)中加上下边的启用编码就可以  div ?php par_pagenavi(9); ? /div 上边的数据表明较大显示信息两页 你可以以依据自身的要求改动 WordPress加上分页查询导航栏莱单源代码 Wordpress免插件完成五颜六色标识云

推荐阅读

wordpress应用jQuery调节照片宽高宽比

今日凉一SEO来谈一谈Wordpress主题风格制作的关键点难题 一般用的多的方式便是在CSS中应用overflow:hidden 和 max-width:600px 来限定,可是实际效果没理想 凉一今日共享一下较为极致的方式 ...

2021-04-08
延庆企业官网建设中—真的,关于深度神经网络

导语:人力资源資源智能化化化是大伙儿一个十分幸福快乐开心的理想化化,跟星际数据信息信息内容数据信息数据漫游和永世青春年少青春年少青春年少青春不老一样。大家想生产制...

2021-04-08
为何做小程序流程-徽县企业网站建设

11 年潜心 ·徽县 WEBSITE 起源于 2009 - 2020 未来展望将来潜心于设计方案感受,技术专业于处理计划方案 徽县 DEVELOPER 我讲,业内沒有最好的技术性,仅有最赞的技术性开发设计者订制产品...

2021-04-08
企业网站建设素材图片-凡科抠图图片处理:制作

Photoshop相片解决:制作星河情况互连网 公布 创作者:佚名 我想评价本问是有关Photoshop相片解决的一个实例教程,简易把适合情况的相片制作成星河情况。怎样用ps制作水彩造型艺...

2021-04-07
ǭ����建立网站

网页页面设计方案网站SEO提升,多长时间有成效 对于{大城市}宣传单页面网站,我们可以先将网页页面区划为好多个特殊的地区,将每个地区做为一个独自一人的网页页面来提升。为每...

2021-04-07
�佭建立网站

网页页面设计方案网站SEO提升,多长时间有成效 对于{大城市}宣传单页面网站,我们可以先将网页页面区划为好多个特殊的地区,将每个地区做为一个独自一人的网页页面来提升。为每...

2021-04-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信