<span style="color:#000099;">******标蓝部分为转圈代码,别的地方是我自己的其它东西 </span>
* {
margin: 0px;
padding: 0px;
border: 0px;
}
input {
-webkit-appearance: none;
}
.main li {
list-style-type: none;
/*height: 160px;*/
}
.main a {
/*height: 160px;*/
display:block;
}
div {
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
}
.newEvent {
/*height: 200px;*/
margin: 0.5em 0.62em;
}
.newEvent img {
/*height: 160px;*/
width: 100%;
z-index: -1;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
}
.eventtitle {
background-image: url("/Content/images/cut/eventbg.png");
background-size:100%;
background-repeat: repeat-x;
height: 3.1em;
padding: 0.62em 0 0 0.5em;
position: relative;
bottom: 3.93em;
left: 0px;
line-height: 4.06em;
}
.eventtitle input {
background: none;
border: 0px;
font-size: 1em;
color: white;
/*width: 300px;*/
}
.noNew {
font-size:0.9em;
height: 1.25em;
margin: 0 auto;
text-align: center;
}
</style>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function () {
$(".newEvent img").height($(".newEvent img").width() / 1.7);
$(".newEvent").height($(".newEvent img").height());
$(".main").css("font-size", $(".newEvent img").height() / 11);
$(".eventtitle input").width($(".newEvent img").width() - 30);
})
</script>
</head>
<body>
<div class="main">
<ul>
@foreach (var item in ViewData["articlelist"] as List<LairmeyUserProject.Models.EventArticle>)
{
<li>
<div class="newEvent">
<a href="@item.ArticleUrl" style="height:160px">
<img src="/Content/EventImg/@item.BannerUrl" />
<div class="eventtitle">
<input disabled="disabled" value="@item.Tittle"/>
</div>
</a>
</div>
</li>
}
</ul>
</div>
<span style="color:#000099;"><div class="div_load" style="margin: 10px auto; text-align: center; width: 300px;">
<img id="img" src="~/Content/images/cut/loading.png" />
</div></span>
<script type="text/javascript">
var x = 0;
var canScroll = true;
$(window).scroll(function () {
if (canScroll) {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {
loading();
canScroll = false;
$.post("/Event/Index", { count: x }, function (data) {
stoploading();
x += 4;
$.each(data, function (i, item) {
$("ul").append("<li><div class='newEvent'><a href=" + item.ArticleUrl + "><img src=" + item.BannerUrl + " /><div class='eventtitle'><input disabled='disabled' value=" + item.Tittle + "/></a></div></li>");
canScroll = true;
})
if (data.length < 4) {
$("ul").append("<li style='margin-top:12px'><div class='noNew'>没有了更多了哦~</div></li>");
canScroll = false;
}
});
}
}
})
$(".div_load").hide();
var Du = 0;
var CssCode;
<span style="color:#000099;"> function fransform() {
Du++;
var Objnode = document.getElementById('img');
Objnode.setAttribute('style', '' + CssCode + 'transform:rotate(' + Du + 'deg); ' + CssCode + 'transform-origin: 50% 50%;');
if (Du == 360) { Du = 0; }
}
function loading() {
$(".div_load").slideDown();
if (navigator.userAgent.indexOf("MSIE") > 0) { CssCode = "-ms"; }
else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { CssCode = "-moz-"; }
else if (isSafari = navigator.userAgent.indexOf("Safari") > 0) { CssCode = "-webkit-"; }
else CssCode = "-o-";
setInterval(fransform, 1);
}</span>
function stoploading() {
clearInterval();
$(".div_load").hide();
}
</script>