标签存档: CSS - 第2页

JS放大缩略图并随鼠标移动

作者: 日期: 2017年5月22日 没有评论

CSS:

<style type="text/css">
/* tooltip */
#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}
.img_s{border:none;}
audio{width:250px;margin-top:7px;}
</style>

HTML:

<table class="result-tab" width="100%">
    <tr>
        <th>ID</th>                            
        <th>缩略图</th>                            
        <th>路径</th>                            
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img class="img_s" src="upload/2017/05/22/76411495433869.jpg" height='40' width='250' title="盛开的菊科植物"/>										
        </td>
        <td>
            upload/2017/05/22/76411495433869.jpg
        </td>																							
    </tr>
</table>    

JS:

$(function(){
	var x = 10;
	var y = 20;
	$("img.img_s").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";
		var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
		var tooltip = "<div id='tooltip'><img src='"
						+ this.src 
						+"' alt='预览图' height='500' width='800'/>"
						+imgTitle+"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show(500);	  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
		this.title = this.myTitle;
		$("#tooltip").remove();	 //移除
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			});
	});
})

效果图:://wp.cpxiang.tech/wp-content/uploads/2017/05/@XYCJINXCVH39QJD7_Hjpg-1.jpg

JS实现循环给元素绑定事件

作者: 日期: 2017年5月10日 没有评论

        作为一个前端开发者，如果想对一些元素循环绑定事件的时候总是出现各种问题，尤其是在对闭包没有熟练掌握的时候更是一头雾水。网上一查，果然好多初学者有这个困惑，既然这个问题总是出现，于是在我就总结了以下两个比较好理解的解决方案，分享给大家：（可能有更好的方式我没有发现，请各位分享）。

HTML代码:

<div class="textwidget">  
        <span  class="textwidget">第一个</span>  
        <span  class="textwidget">第二个</span>  
        <span  class="textwidget">第三个</span>  
</div>

JS代码:

window.onload = function()   
{               
      var  spans = document.getElementsByClassName("textwidget");
      for(var i = 1; i < spans.length; i++)   
      {  
        spans[i].count = i;  
        spans[i].onmouseover = function()   
        {          
                this.style['margin-top'] = '-145px';
                this.style.display='block';     
        }
        spans[i].onmouseout = function()   
        {          
                this.style['margin-top'] = '0px';
                this.style.display='none';     
        }     
      }   
}

JS设置CSS样式的几种方式

作者: 日期: 2017年5月10日 没有评论

1. 直接设置style的属性  某些情况用这个设置 !important值无效

如果属性有'-'号，就写成驼峰的形式（如textAlign）  如果想保留 – 号，就中括号的形式  element.style['text-align'] = '100px';

element.style.height = '100px';

2. 直接设置属性（只能用于某些属性，相关样式会自动识别）

element.setAttribute('height', 100);
element.setAttribute('height', '100px');

3. 设置style的属性

element.setAttribute('style', 'height: 100px !important');

4. 使用setProperty  如果要设置!important，推荐用这种方法设置第三个参数

element.style.setProperty('height', '300px', 'important');

5. 改变class   比如JQ的更改class相关方法

因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式

element.className = 'blue';
element.className += 'blue fb';

6. 设置cssText

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';

PHP通用自定义分页处理

作者: 日期: 2017年5月5日 没有评论

①、先下载page.txt，更名为page.php。

②、用法（假设page.php已经被引用包含）

	if($_GET['action']=='all'){
		
		$cp = empty($_GET['p'])?1:$_GET['p'];//当前页码
		
		$rows = getrows($dbh,'posts');
		//echo "共有".$rows."行数据</br>";
		
		$pnums = get_all_pp($rows,$ppgs=5);//总页数
		//echo "总页数是:".$pnums."</br>";
		
		$pi = get_pi($cp,$ppgs=5);//limit $pi,$ppgs;
		//echo "当前limit:".$pi.",$ppgs</br>";
		
		$pv = 6;//定义可见的页码数量,$pv>0;
		
		$list_posts = get_data($dbh,'posts',$req=array(),$or='id',$ory='desc',$pi,$ppgs=5);
		
		$sp_html = xp_html($cp,$pv,$pnums,$dir,$admin=1,$php='do');
		
		//echo $sp_html."</br>";
		view($html="list",array('data'=>$data,'pghtml'=>$sp_html,'list_posts'=>$list_posts),'admin/',$dir);	
	}

③、关于view函数

//视图层模板控制
function view($html='index',$dt=array(),$admin,$dir=""){
	extract($dt);
 	/*if($admin == 'admin/'){
	         $xml = 	sim_load_xml();
	 } */
	//echo TEMPLATES_PATH.$admin.$dir.'/'.$html.'.html';
	include(TEMPLATES_PATH.$admin.'top.html');
	if($dir=='admin'){
		include(TEMPLATES_PATH.$admin.$html.'.html');
	}else{
		include(TEMPLATES_PATH.$admin.$dir.'/'.$html.'.html');		
	}
	include(TEMPLATES_PATH.$admin.'footer.html');
 }

④、效果(注意分页显示的样式)

I`5AI$@AIUBPGY}SDH%T@$L.png

点击按钮跳转到页面指定位置

作者: 日期: 2017年5月4日 没有评论

　　这里主要分为两种情况，分别是点击锚点实现跳转和点击button按钮实现跳转页面，下面就分别探讨一下两种方式的具体实现代码。
　　一：通过html锚点实现滚动定位到页面指定位置（DIV）：
　　如果我们要点击实现跳转的地方是一个html锚点，也就是点击一个A标签超链接实现跳转，可以把A标签的href属性直接指向跳转指定位置的div，代码实现思路如下：
　　<a href="#abc">点击跳转</a>
　　<div id="abc">将要跳转到这里</div>
　　点击上面A链接将会滚动跳转到同一页面中id="abc"的那个div处，需要注意的是跳转指定位置div的id是唯一的，A标签直接指向此id，id前面别忘了加上#号。
　　二：通过点击button按钮使用js实现滚定跳转到页面指定位置（DIV）：
　　如果我们要点击实现跳转的地方是一个button按钮的话，由于button不能添加href，所以我们只好使用js跳转代码来实现，具体代码示例如下：
　　<script>
　　　function onTopClick() {
　　　　window.location.hash = "#abc";
　　}
　　</script>
　　<input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
　　<div id="abc">跳转到的位置</div>
　　上面这段代码，点击提交按钮，将会滚定跳转定位到同一页面id="abc"的div处。这段js点击跳转页面代码实现的原理是：页面各元素赋予唯一ID，点击提交按钮触发js点击事件，js通过ID滚动跳转定位到该元素，window.location.hash = "#abc"指的就是定位到当前页面id="abc"的div。